(((Web Dev No.2))) การใช้ jquery ui เพื่อทำ slider ย่อ-ขยาย font ในหน้าเว็บเพจ

[nistelbooy]

วันนี้(ไม่)ว่าง เบื่อๆ เซ็งๆ เลยมานั่งเขียนบทความให้เพื่อนๆชาวไทยเสียวที่ กำลังหัดทำเว็บนะครับ ถูกใจก็  1 ครับ อิอิ

วันนี้ขอเสนอการทำ slider เพื่อย่อ-ขยาย font ในเว็บเพจ ด้วย jquery ui ครับ

ตัวอย่างหน้าตา



วิธีการใส่โค้ด

ใส่ภายใน head

โค้ด เลือก ขยาย


script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css">  
<script type="text/javascript" src="jquery-ui/jquery-ui.min.js"></script>
<style>
body{font-size:13px;font-family:tahoma;}
#slider{width:400px;margin-bottom:10px;}
h3{border-top:1px solid;padding-top:5px;}
</style>
<script>
$(document).ready(function(){
$( "#slider" ).slider({
value:13,
min: 11,
max: 16,
step: 1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value "px" );
$("p").css("font-size",ui.value "px");
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) "px" );
});
</script>


ใส่ภายใน body

โค้ด เลือก ขยาย


<p>
<label for="amount"></label>
Font size :<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

<div id="slider"></div>

<h3>สุวิทย์ ชิ่งเจรจามรดกโลก</h3>

<p>ผู้สื่อข่าวรายงานว่า
ในการประชุมคณะกรรมการแห่งชาติว่าด้วยอนุสัญญาคุ้มครองมรดกโลกเมื่อวันที่ 18 เมษายน
ที่มีนายไตรรงค์ สุวรรณคีรี รองนายกรัฐมนตรี เป็นประธาน นายสุวิทย์ คุณกิตติ
รัฐมนตรีว่าการกระทรวงทรัพยากรธรรมชาติและสิ่งแวดล้อม (ทส.) ในฐานะหัวหน้าผู้แทนการเจรจาฝ่ายไทย
แจ้งต่อที่ประชุมขอถอนตัวจากการเป็นหัวหน้าคณะผู้แทนการเจรจามรดกโลกฝ่ายไทย
ซึ่งต้องทำหน้าที่เจรจาระดับทวิภาคีระหว่างประเทศไทยกับกัมพูชากรณีเขาพระ วิหาร
ที่ประเทศฝรั่งเศสในวันที่ 25 พฤษภาคมนี้
รวมทั้งขอถอนตัวจากการเป็นหัวหน้าคณะผู้แทนไทยไปประชุมคณะกรรมการมรดกโลก
ระหว่างวันที่ 19-29 มิถุนายนที่ประเทศฝรั่งเศสอีกด้วย ซึ่งมีประเด็นสำคัญ คือ
การเจรจาเรื่องแผนบริหารจัดการเขาพระวิหารที่ค้างมาจาการประชุมคณะกรรมการ
มรดกโลกที่ประเทศบราซิล เมื่อปี 2553</p>

<p>รายงานระบุว่า นายสุวิทย์
ให้เหตุผลต่อที่ประชุมว่า ช่วงเวลาดังกล่าวตรงการเลือกตั้งพอดี ทำให้ไม่มีเวลาไปประชุม
ขอให้ที่ประชุมมอบหมายให้กระทรวงการต่างประเทศส่งตัวแทนไปร่วมประชุมแทน</p>

<p>"เรื่องดังกล่าวนายไตรรงค์ได้ตำหนินายสุวิทย์ต่อที่ประชุมว่า
ที่ผ่านมาคณะรัฐมนตรี (ครม.) มอบให้ทส.ทำหน้าที่เจรจา
และนายสุวิทย์ทำหน้าที่มาต่อเนื่อง ดังนั้นจะไปให้กระทรวงต่างประเทศไปเจรจาแทนได้อย่างไร
เรื่องนี้ต้องนำเข้าที่ประชุม ครม.วันที่ 20 เมษายนเพื่อหารือว่าจะให้ใครเป็นผู้แทนเจรจาต่อไป
ซึ่งอาจเป็นกระทรวงการต่างประเทศหรือนายอัษฎา ชัยนาม
ประธานคณะกรรมาธิการเขตแดนร่วมไทย-กัมพูชา (เจบีซี) ฝ่ายไทย" รายงานข่าวระบุ</p>


ref

hxxp://jquery.com

hxxp://jqueryui.com

ดาวน์โหลดไฟล์ตัวอย่าง

Download Source File


ขอบคุณครับ กดบวกหน้าตาดีกันทุกคนครับ อิอิ

*************
บทความทั้งหมด

(((Web Dev No.1))) การใช้งาน CKEditor CKFinder สามารถอัพโหลดไฟล์ได้
(((Web Dev No.2))) การใช้ jquery ui เพื่อทำ slider ย่อ-ขยาย font ในหน้าเว็บเพจ
(((Web Dev No.3))) การสร้างไฟล์ sitemap ที่ถูกต้องสำหรับ search engine ต่างๆ
วิธีทำ SEO Friendly URL สำหรับ SMF Forum (แบบ manual ง่ายๆ)
แจกโค้ด php อย่างง่ายๆ ครับ เอาไปประยุกต์ใช้งานได้ รอบที่ 1
แจกโค้ด PHP แสดงบอทมาเก็บข้อมูล... เก็บลง textfile

*************

[SHIINZ]

+1 ขอบคุณครับ น่าสนใจดี

[supachet2526]

ขอบคุณครับ