การแสดงไอที

ด้วยความหลากหลายของ Carousels ออกมีจำนวนมากสำหรับ Mootools เช่นกันก็ยังตัดสินใจที่จะเขียนระดับ Carousel ของตัวเองด้วยเหตุผลที่ดีบางอย่าง
1 เรื่องคุณสมบัติเพจจิ้ง (เพื่อให้สามารถที่จะกระโดดภาพนิ่งเฉพาะ / ขั้นตอนในม้าหมุน)
2 เรื่องเสรีภาพกับตำแหน่งของปุ่มซ้ายและขวา / ลิงค์ที่เคยฉันโปรด
3 การควบคุมที่มากกว่าขั้นตอนการนำเสนอภาพนิ่ง

ฉันไม่จัดการเพื่อสร้าง Carousel ใหม่ที่มีคุณสมบัติข้างต้น ... ดังนี้ ... รู้สึกอิสระที่จะแนะนำการแก้ไขใด ๆ ที่คุณจะต้องมี!

ตัวอย่างของฉันลักษณะเช่นนี้ ... [ Demo ดู ]

ดูการสาธิต | ดาวน์โหลด Mootools Carousel กับเพจเวอร์ชัน 1.0 (Downloaded 1994 ครั้ง)

1 Paging Carousel

คุณสามารถเพิ่มเพจจิ้งท​​ี่ม้าหมุนของคุณเพียงโดยการตั้งธงเพจจิ้งซึ่งเป็น parater ล่าสุดผ่านขณะที่การสร้างอินสแตนซ์ของ MooCarousel ไปจริง (เพจจิ้งต้องการ) หรือเท็จ (เพจจิ้งท​​ี่ต้องการ donot)

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true); / / ns = จำนวนของภาพนิ่ง, SSS = ขนาดขั้นตอนในภาพนิ่ง

และ ofcourse คุณสามารถเปลี่ยนรูปลักษณ์-n-ความรู้สึกของเหล่า achors เพจจิ้งท​​ี่คุณโปรดโดยการปรับเปลี่ยน CSS ของพวกเขา

carousel_paging {text-align: ขวา; ขอบ: 5px 10px 0 0;}.
carousel_paging ปัจจุบันหน้า carousel_paging {เค้าร่าง: ไม่มี; ความกว้าง:.... 15px; ความสูง: 15px; line-height: 15px; ข้อความชิด: ศูนย์; display: block; float: left; พื้นหลัง: # D8D8EB; margin: 0 1px 0 0; ตกแต่งข้อความ: none;}

carousel_paging: โฉบ, carousel_paging ปัจจุบัน {background: # 4D4D9B; color: # FFFFFF;}...

ดี! มีปัญหาเล็ก ๆ แต่ที่โยงเพจจิ้งถ้าตั้งแล้วมันจะได้รับการสร้างเสมอหลังจากส่วนประกอบ Carousel ผมอยากจะให้มันแบบไดนามิกเช่นกัน แต่แล้วเพียงเพื่อให้สคริปสำหรับเป่าออกมาจากสัดส่วนที่ฉันตัดสินใจที่จะข้ามมัน
แต่คุณรู้จาวาสคริน้อยคุณได้อย่างง่ายดายสามารถปรับเปลี่ยนรหัสรุ่นเพจจิ้งในชั้นเรียน MooCarousel เพื่อโปรดความต้องการของคุณ

2 การปรับแต่งไอคอนด้านซ้ายและขวา

คุณสามารถเปลี่ยนภาพหรือตำแหน่งใด ๆ สถานที่ให้บริการ displat จากปุ่มซ้ายและขวาได้ง่ายๆโดยการเล่นรอบกับ CSS เพื่อให้สามารถเปลี่ยนตำแหน่งของ buttoms ซ้ายและขวาคือเหตุผลที่แท้จริงสำหรับฉันไปทางขวาของเราระดับของฉัน Carousel
ตั้งแต่นี้ระดับของ MooCarousel ยอมรับ id สถานที่ของปุ่มเหล่านี้คุณสามารถจริงวางปุ่มเหล่านี้ที่ใดก็ได้บนหน้าถ้าคุณโปรด ... มันไม่ได้ต้องอยู่ในลำดับชั้นขององค์ประกอบดังเช่นในตัวอย่างของฉัน

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);

CSS
.. carousel_container_l, carousel_container_r {margin: 50px 0 0 0; ตำแหน่ง: ญาติ; กว้าง: 23px; ความสูง: 20px; float: left;: ชี้;}

carousel_container_r {background-position: 0-38px;}.

. carousel_container_l {background-position: 0-58px;}

3 การปรับแต่งขั้นตอนการนำเสนอภาพนิ่ง

ผมหมายถึงอะไรขั้นตอนการปรับแต่ง MY SLIDE?
Carousels ส่วนใหญ่เต็มรูปแบบสไลด์ที่มีของหน้าต่างที่มองเห็นได้ ดังนั้นว่าคุณมีสี่รายการ (เช่นในตัวอย่างข้างต้น) ก็จะเลื่อนการเดินทางทั้งหมดสี่รายการ ด้วยชิ้นส่วน Carousel นี้คุณผ่านจำนวนของภาพนิ่งและขนาดขั้นตอนที่คุณเลือก

var carousel1 = new MooCarousel ('carousel1_wrapper', 'carousel1_items_container', 'carousel1_moveleft', 'carousel1_moveright', c_ns, c_sss, true);
c_ns = จำนวนภาพนิ่ง c_sss = ขนาดขั้นตอนการนำเสนอภาพนิ่ง

นอกจากนี้ใน example1 ของฉันฉันได้ calcuted ขนาดขั้นตอนการนำเสนอภาพนิ่งบนพื้นฐานของตรรกะที่ฉันรู้ว่าจำนวนรายการที่ความกว้างในแต่ละรายการและกำไรที่ได้รับหลังจากแต่ละรายการในของฉัน CSS

/ * สำหรับการดื่มฉลอง 1 * /

var c1_w = 92; กว้างรายการ / การดื่มสุรา /

var c1_n = 10; จำนวน / / รวมรายการการดื่มสุราการเปรียบเทียบ

var c1_pp = จำนวนครั้งที่ 4 / / จากการเปรียบเทียบการดื่มสุรา perpage รายการ

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp / / SSS = ขนาดขั้นตอนการนำเสนอภาพนิ่ง

var c1_ns = parseInt (((c1_w * c1_n) / c1_sss) + 0.5); / / ns ภาพนิ่ง = จำนวน

c1_sss + = c1_marginFactor / / SSS = ขนาดขั้นตอนภาพนิ่ง, 51 สำหรับระยะขอบ

ที่ต้องการ: Mootools 1.2

ดูการสาธิต | ดาวน์โหลด Mootools Carousel กับเพจเวอร์ชัน 1.0 (Downloaded 1994 ครั้ง)

Mootools MooRating คือ (เบราว์เซอร์ข้ามของหลักสูตรที่จะใช้พลังของห้องสมุด MooTools) ง่ายน้ำหนักเบาและวิธีการแก้ปัญหาที่ดีเยี่ยมจากการประเมิน มันไม่ได้ถูกเรียกว่าเป็น "ระดับ" เพียงเพราะภาพการประเมินอาจจะเป็นที่คุณเลือก (ฉันมีให้บาร์, ดาวและหัวใจกับการดาวน์โหลด แต่คุณสามารถสร้างความหลากหลายของคุณเองและเป็นเพียงแค่วางใน)

มันดูเหมือนว่าวิธีการ:

	คะแนน Mootools กับภาพที่แตกต่างกันดูการสาธิต
	คะแนน Mootools ที่มีค่าร้อยละดูการสาธิต
	คะแนน Mootools ที่มีค่าเศษส่วนดูการสาธิต

ดาวน์โหลด Mootols การจัดอันดับ Script (Downloaded 718 ครั้ง)

ข้อมูล: จำนวนทั่วทศนิยมหรือร้อยละ
ขณะนี้สคริปต์ถูกออกแบบมาเพื่อแสดงข้อมูลการประเมินเป็นค่าทั้งหมด (1,2,3,4,5) ในทศนิยม (1.24, 3.45 ฯลฯ ) หรือในอัตราร้อยละ (12% ฯลฯ % 55) ทางเลือกที่จะแสดงข้อมูลในรูปแบบใด ๆ ที่กล่าวถึงสามารถตั้งค่าได้ง่ายๆโดยการเปลี่ยนค่าบางอย่างภายในธงจาวาสคริปต์ (moorating.js)
โดยทั่วไปมีสองอีสองธงที่จะเล่นกับการแสดงค่าในรูปแบบที่คุณเลือกคือ ...

var inpercent = false; / / ตั้งธงนี้เป็นจริงถ้าคุณต้องการค่าเปอร์เซ็นต์ที่จะแสดง
var isFractional = false / / กำหนดให้เป็นจริงถ้าคุณต้องการให้ค่าเศษส่วนเช่น 1.24, 1.25, 4.56 มากกว่า 1,2 ... 5

และฉันไม่คิดว่าจะมีคำอธิบายที่จำเป็นสำหรับการนี​​้ ยิ่งกว่านั้น สคริปต์ง่ายมาก ถ้าคุณรู้ JavaScripting น้อยคุณสามารถแก้ไขสคริปต์ที่จะได้รับการเรียงลำดับของค่าที่แสดงใด ๆ สำหรับเช่นถ้าคุณต้องการเป็นทศนิยมสามตำแหน่งที่จะแสดง ... เพียงแค่ปรับแต่งสคริปต์ดังนี้ ...

ถ้า (isFractional) {if (x <= 5 | | x> = 0) moostartval [i] innerHTML = formatNumber (x, 3);.} / / 2 มีการเปลี่ยนแปลงถึง 3
else {moostartval [i] innerHTML = Math.Round (x).

การปรับปรุงค่าคะแนน:
ฉัน havent ใส่ใจการเขียนสคริปต์ AJAX ใด ๆ สำหรับการปรับปรุงค่าคะแนนเพราะฉันรู้จากประสบการณ์ของผมที่ไม่เคยทำมันตั้งใจที่จะอัพเดทการจัดอันดับเร็วที่สุดเท่าที่อัตราผู้ใช้บางสิ่งบางอย่าง คุณมีอิสระที่จะทำสิ่งที่คุณต้องการด้วยค่ารับการจัดอันดับ, ปรับปรุงโดยใช้ AJAX หรือส่งมันหรือตั้งค่ารูปแบบที่ซ่อนเขตข้อมูลที่จะแสดงความคิดเห็นด้วยแบบฟอร์มทั้งหมด ฯลฯ

ฟังก์ชั่น updateRating (id, การประเมิน) {
/ / alert (id + "," การประเมิน +);
/ / ทำสิ่งที่มีเรตติ้ง
}

มีฟังก์ชั่นใน javascript ที่เรียกว่า "updateRating" คือ ฟังก์ชันนี้ได้ถูกส่งผ่าน ID ของกองคะแนนเพื่อระบุเป็นที่ให้คะแนน (ถ้ามีมากกว่าหนึ่งการให้คะแนนบนหน้าเว็บ) ได้รับการปรับปรุงและความคุ้มค่าจากการประเมิน [updateRating (id, การประเมิน)] คุณสามารถเลือกสิ่งที่คุณต้องการกับค่าเหล่านี้ที่ฉันกล่าวถึงก่อนหน้านี้

รูปภาพ Rating: ดาวหัวใจบาร์หรืออะไรที่คุณโปรด
การเปลี่ยนการประเมินใด ๆ ของประเภทดังกล่าวข้างต้น (ดาว ฯลฯ หัวใจ) ง่ายมาก เพียงแค่สร้างภาพคล้ายกับภาพถ่ายและวางมันมาจำไว้ว่าถ้าคุณเปลี่ยนชื่อของภาพที่ไม่ทำการเปลี่ยนแปลงที่จำเป็นในไฟล์ CSS, ดูด้านล่าง

. moostar {margin: 0px; padding: 0px; overflow: hidden; กว้าง: 84px; ความสูง: 20px; float: left; พื้นหลัง: url ('stars.gif') x-repeat;}
. moostar ช่วง {float: left; margin: 0px; padding: 0px; display: block; กว้าง: 84px; ความสูง: 20px; ตกแต่งข้อความ: ไม่มี; ข้อความเยื้อง:-9000px; ดัชนี z: 20;}
.. moostar curr {background: url ('stars.gif') ซ้าย 25px;}

ส่วนใหญ่เครื่องมือการให้คะแนนใช้ภาพดาวและครึ่งหนึ่งดาวกับเมาส์มากกว่าเหตุการณ์ที่ดาวแต่ละ คะแนน ม. ใช้รูปเทพดาง่ายๆเป็นภาพพื้นหลังเพื่อให้บรรลุผลภาพที่ต้องการกับค่าใช้จ่ายที่ต่ำมาก

ที่ต้องการ: Mootools 1.2
ดาวน์โหลด Mootols การจัดอันดับ Script (Downloaded 718 ครั้ง)

ฉันได้รับการมองหาตัวเลื่อนตรึงคู่ (เลื่อนที่มีสองลูกบิด, ต่ำสุดและสูงสุด) โดยใช้ mootools แม้ว่าฉันไม่พบไม่กี่เลื่อนตรึงคู่ทำได้ดีในฟอรั่ม mootools, ปัญหาเดียวก็คือว่าทั้งหมดเหล่านี้อาศัยแถบเลื่อนมีเครื่องหมายช่วงที่เลือก ในที่สุด! ฉันตัดสินใจที่จะสร้างตัวเอง ดี! ฉันไม่ใช้รหัสเดิมและปรับเปลี่ยนให้มีพื้นหลังเลื่อนที่แสดงว่าช่วงที่เลือกทางสายตาเช่นในตัวอย่างด้านล่างของฉัน พื้นที่สีฟ้าแสดงถึงช่วงของค่าที่เลือก

ดูเวอร์ชัน 2.2 Demo | Mootools ดาวน์โหลดต์คู่เวอร์ชัน 2.2 Slider (Downloaded 11808 ครั้ง)

คุณได้อย่างง่ายดายมากสามารถเปลี่ยนรูปลักษณ์และความรู้สึกของตัวบ่งชี้ช่วง (สีน้ำเงินในตัวอย่างข้างต้น), ลูกบิดเลื่อนแทร็คเลื่อนโดยการปรับเปลี่ยน slider.css ตามที่ต้องการ

อย่าปล่อยให้ฉันเห็นถ้าคุณพบว่ามีประโยชน์