การแสดงไอที

อีก Tut ฉบับย่อ ที่นี่สิ่งที่ง่ายและใช้พลังงานที่ดีของ CSS คือ ... แต่ก็ยากที่ concieve (และมันก็คือไม่ฉัน) จะเริ่มต้นด้วย เพิ่ม Dropshadow อาจจะมีชิ้นส่วนของเค้กสำหรับส่วนมากของเราโดยใช้เครื่องมือในการแก้ไขภาพเช่น Photoshop ฯลฯ ANF ดอกไม้ไฟบาง
เหตุผลที่ผมเลือกใช้สำหรับเงาโดยใช้ CSS ก็คือมักจะสร้างในขณะที่การออกแบบหน้า / html ของแอพลิเคชันที่ต้องการให้ซ้ำ สิ่งที่ฉันหมายถึงคือในเว็บไซต์ที่มีอยู่กับภาพจำนวนมากเช่นคนแสดง freinds หรือรายการแกลเลอรี่ภาพก็จะเป็นเรื่องยากที่จะประมวลผลความเร็วในการโหลดทั้งหมดของภาพที่ได้รับการยกเลิกการโหลดอยู่แล้วเพื่อเพิ่มหรือลบเงาเพื่อที่ เรื่อง
ดังนั้นถ้าคุณได้ทำคิดไปข้างหน้าเล็กน้อยในขณะที่สร้าง HTM​​LS เพื่อเพิ่มหน่วยงานเสริมเหล่านี้หรือมักสถานการณ์ที่ว่าคุณมีลอจิกวนการสร้างไอคอนเหล่านี้ / รูปใน XSL, PHP JAVA หรือภาษาเขียนโปรแกรม / สคริปต์อื่น ๆ คุณสามารถเพิ่มได้ตลอดเวลาจากนั้นเป็นเพียงเรื่องของการแสดงและการซ่อนเงาเหล่านี้โดยใช้สถานที่ให้บริการการแสดงผล CSS, เป็นต่อลูกค้าที่เคยเปลี่ยนแปลงความต้องการของ ... ฉัน havn't กระทำการเรียงลำดับของหัวก้าวหน้านี้ ก่อนหน้านี้ ... แต่ ahev เริ่มต้นตอนนี้!

ในตัวอย่างด้านล่าง, ภาพต้นฉบับที่เป็นเงาฟรีและ dropshadows ถูกนำมาใช้ต้องเป็น! นอกจากนี้ผมได้ไปน้อยพิเศษโดยใช้เทคนิคของ Tut ก่อนหน้านี้ของฉัน (Well! เหล่านี้อาจจะเป็นความหลากหลายที่สั้นที่สุดของงานจึงเป็นธรรมเท่านั้นเรียกพวกเขา "Tut" 's) เกี่ยวกับ การใช้สถานที่ให้บริการคลิป CSS สำหรับแสดงปิดเท่านั้น

ภาพต้นฉบับ

ผลการค้นหา CSS DropShadow

ดูการสาธิต | ดาวน์โหลด sourcefiles

ฉันต้องการที่จะเข้าใจนี้ทำไม? Humm ... !

ส่วนใหญ่ของนักเขียน CSS จะยอมรับว่าสถานที่ให้บริการคลิป CSS อาจเป็นหนึ่งในที่สุดยกเลิกการใช้คุณสมบัติ CSS มันจึงเป็นความจริงสำหรับฉันมากเกินไปและเป็นส่วนใหญ่ยินดีที่จะละเลยมันจนผมเริ่มปรับเปลี่ยน MooTools TWO Knob ชิ้นส่วน Slider (Pin) (มีตัวบ่งชี้กลาง) .

มีคำแนะนำที่ดีคือจากหนึ่งในผู้ประกอบการปรับเปลี่ยนชิ้นส่วนเลื่อนการใช้ภาพภ​​ูมิหลังตัด (ต่อส่วนความกว้างของตัวแปร) เพื่อระบุช่วงเลื่อน ดังนั้นเวลาที่จะใส่ความสนุก แต่ยกเลิกการเช่าเหมาลำ (สำหรับฉัน ofcourse) ของฉันน่านน้ำของสถ​​านที่ให้บริการคลิป CSS มา

ดี! วิธีการที่ยากที่จะสามารถ? ไม่มากเลย ... ใช่และไม่ใช่ ไวยากรณ์ที่จะใช้สถานที่ให้บริการคลิป CSS คือตรงสวย แต่ความหมาย / usuage เป็นบิต croocked กับหน่วยความจำเช่นเหมือง, everytime I นั่งการ rework กับสคริปต์ Slider ของฉัน ... ฉันมี tokeep อ้างอิงกลับไปยังสถานที่ให้บริการการใช้งานของคลิปนี้เพื่อเตือนตัวเองตรรกะที่ฉันได้สร้างขึ้นในสคริปต์ของฉัน .... HENCE! คิดว่าจะปากกามันลงมาด้วยความหวังที่จะจำมันในอนาคต (และยังเพื่อประโยชน์ของผู้ที่ดูเหมือน boggled โดยสถานที่ให้บริการคลิป CSS)

คลิป CSS ทำอะไร?

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

การใช้สถานที่ให้บริการคลิป CSS, คุณสามารถสร้างการตัดโดยใช้รูปทรงสี่เหลี่ยมมุมฉาก ชอบหลายคุณสมบัติ CSS อื่น ๆ (เช่นขอบ padding ฯลฯ ), การใช้การดูแลรักษาต้องสี่พิกัดบน, ล่าง, ขวา, ซ้าย (TRBL) ธรรมชาติ croocked ที่ให้บริการนี​​้สะท้อนให้เห็นถึงเมื่อคุณใช้เวลามองใกล้ที่วิธีการคำนวณคลิปภาคคลิปที่ใช้เหล่านี้สี่พิกัด (ส่งเข้าไปในสมองโยนในขณะที่) ตอนนี้สับสนคุณด้านล่างเริ่มจากด้านบนและด้านขวาเริ่มจากด้านซ้าย . คุณจะเห็นสิ่งที่ผมพูด? .... ดังนั้นกระทู้นี้ ...

นี้สับสนเล็กน้อยสามารถหายไปกับคำอธิบายภาพนี้จากคุณสมบัติ CSS คลิป / ดูแลรักษาดังนี้!

CSS ความต้องการของ Clip

งานที่เราได้เริ่มต้นคือการตัดภาพต่อไปนี้เป็นภาพที่หา squarer (และยังเป็นภาพมุมกว้าง)

Thumbnal Original / รูปภาพ	ข้อกำหนดสำหรับคลิป Sqaure Thumbmail

ผลการค้นหาคลิป CSS

ดูการสาธิต | ดาวน์โหลด sourcefiles

คำถามนี้ข้ามใจของฉันสองสามครั้งก่อนเมื่อฉันได้ทำงานในเว็บไซต์ก่อนหน้านี้มากเกินไปซึ่งใช้เวิร์ดเพรสเพื่อแสดงบล็อกหรือรูปแบบใหม่ของเนื้อหาในส่วนหนึ่งของเว็บไซต์ / portal.Being สามเณรใน PHP และรอบเพรสบางอย่างผมเก็บไว้ procastinating มันคิด "นี้ไม่ได้เป็นชิ้นส่วนของเค้กของฉัน" ในที่สุด! ความต้องการนี​​้มาได้ไม่เกินจมูกของฉันเมื่อเริ่มต้น diggin รอบ bit สำหรับการแก้ปัญหา
ฉันรู้สึกประหลาดใจที่พบว่าจริงๆมันคือง่ายกว่าที่จริงผมคิดว่ามันเป็นไปแสดงรายการจากพาดหัวหรือข้อความล่าสุดในหน้าอื่น ๆ ที่นอกเหนือจากส่วนที่ขับเคลื่อนด้วย WordPress เพียงใช้นิด ๆ หน่อย ๆ ของ PHP และ WordPress API .

นี่คือสิ่งที่น่าสนใจ: -
ด้วยเหตุผลของคำอธิบายสมมติว่าเว็บไซต์ของคุณเป็น http://www.inchembur.com/ และคุณมีส่วนข่าวสำหรับเว็บไซต์นี้เมื่อ http://news.inchembur.com/ (ซึ่งถูกเรียกใช้เวิร์ดเพรส) ตอนนี้ต้องการคือการแสดงโพสต์ล่าสุดจาก http://news.inchembur.com/ ในหน้าแรกของเว็บไซต์หลักคือ http://www.inchembur.com/index.php

ขั้นที่ 1: ใน index.php ของคุณเพิ่มชิ้นต่อไปของรหัสรวมไฟล์ WordPress API คุณสามารถเพิ่มไปยังด้านบนของหน้าคุณต้องการโพสต์ของคุณจะปรากฏบน

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); ใช้ / / Disbable ของเวิร์ดเพรส
ต้องใช้ ('/ var / news.inchembur.com / wp บล็อก-header.php-'); / / รวม WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / รับโพสต์ล่าสุด
>?

ในชิ้นข้างต้นของรวมถึงเราจะรับเฉพาะโพสต์ล่าสุดเดียว ถ้าคุณต้องการที่จะลองรูปแบบต่างๆมากขึ้นรู้สึกฟรีเพื่อเจาะ, query_posts() เอกสาร .

ขั้นตอนที่ 2: ตอนนี้ในส่วนของหน้าดัชนี / หน้าแรกที่คุณต้องการแสดงโพสต์ WordPress ล่าสุดจาก http://news.inchembur.com ใช้รหัสต่อไปนี้ จำเป็นต้องพูดความรู้สึกอิสระที่จะโฆษณาหน่วยงานจัดแต่งทรงผมของคุณครอบคลุมและชั้นเรียนตามการออกแบบของคุณต้องการ

Step3: มีขั้นตอนที่ 3 ไม่มี ... พี่มัน ... คุณจะทำ!

แสดงหน้าโพสต์ / เฉพาะวิธีการตรงข้ามกับการโพสต์ล่าสุด: -
นี้สามารถ achived ได้อย่างง่ายดายด้วยการแก้ไขข้อโต้แย้งที่จะ query_posts() ที่จะรวม ID หน้าหรือหน้าบุ้ง

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = เกี่ยวกับ');

หรือคุณสามารถควบคุมจำนวนการโพสต์:
) ; query_posts (showposts = 3);

บางครั้งเพื่อให้ pageweight ลง ... เราได้แยกสคริปต์ของเราเป็นเศษชิ้นส่วนเหล่านี้ ... จาวาสคริปต์สามารถโหลดได้ที่เป็นและเมื่อจำเป็น (เมื่อเหตุการณ์หรือเมื่อคลิกที่ลิงค์หรือปุ่มอื่น ๆ )

Javascripts โหลดแบบไดนามิกจะง่ายและสวยตรงหน้าดังต่อไปนี้ ...

= “text/javascript” > <สคริปต์ประเภท = "text / javascript ของ">
ฟังก์ชั่น loadNewScript (ที่มา) {
var s = document.createElement ('สคริปต์');
s.setAttribute ('ประเภท', 'text / javascript ของ');
s.setAttribute ('src', แหล่งที่มา);
document.body.appendChild (s);
}
</ script>

และคุณสามารถมีการเชื่อมโยงสายต่อไปนี้ที่ใดก็ได้ในร่างกายหรือคุณสามารถมีสคริปต์นี้ "onLoad" ของเอกสารเอง ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <a href = "javascript: loadNewScript ('myDynamicScript.js');"> โหลดสคริปต์แบบไดนามิก </ a>

หรือ

onload="loadNewScript('myDynamicScript.js');"> <body

หากคุณเป็นคน CSS คุณจะได้รู้ว่าอาการปวดในการรับเค้าโครงของคุณทำงาน cross-browser IE8 ยังเป็นประแจในงานสำหรับนักพัฒนาเราอีก Anywaz! ถ้าคุณตีเมื่อปัญหานี้เช่นผมเมื่อวานนี้ที่ทำงานอย่างสมบูรณ์แบบ CSS ของคุณใน IE7 (และก่อนหน้า) และ Firefox ได้ก็เริ่มขว้างปา tantrums ใน IE8 ลองนี้ ... มันอย่างดูเหมือนจะแก้ไขปัญหาของฉันตอนนี้ ....

การใช้การประกาศ Meta เราสามารถระบุเครื่องมือการแสดงผลที่เราต้องการที่จะใช้ IE8 ดังนั้นเพื่อบังคับให้ IE8 แสดงผลเป็น IE7 ... แทรกแท็ก Meta ต่อไปนี้ในหัวของเอกสารของคุณ: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

โดยค่าเริ่มต้น Meta IE จะเป็น: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
ซึ่งจะทำให้ IE8 แสดงผลหน้าเว็บโดยใช้โหมดมาตรฐานใหม่

หากจำเป็นต้องใช้รูปแบบนี้สามารถนำมาใช้เพื่อรองรับเบราว์เซอร์อื่น ๆ ดังนี้

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

รายละเอียดเพิ่มเติมเกี่ยว doctypes:

หากคุณยังไม่คุ้นเคยกับประเภทของสัตว์ที่เรียกว่า "D​​octype" ... นี่คือบางอย่างรวดเร็วอ่าน
อะไร doctypes มีอะไรบ้าง อะไร Quirks BROWSER & โหมดเข้มงวดมีอะไรบ้าง
การตั้งค่า DOCTYPE ใน XSL

สำหรับข้อมูลเพิ่มเติมในการทำความเข้าใจเชิงลึกเกี่ยวกับ doctypes ให้ลองไปที่ลิงก์เหล่านี้ ...
รายการนอกเหนือที่: แก้ไขเว็บไซต์ของคุณด้วย DOCTYPE ขวา!
รายการนอกเหนือ: Beyond DOCTYPE: มาตรฐานเว็บที่เข้ากันได้ไปข้างหน้าและ IE8

หมายเหตุ: แม้ว่าคนส่วนมากของเรา HTML / CSS ได้รับการละเลยความสำคัญของการ decleration DOCTYPE ในเอกสารของเราตั้งค่า DOCTYPE ขวาโดยปกติจะเป็นคำตอบสำหรับปัญหามากที่สุดข้ามเบราว์เซอร์

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

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

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

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

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 2006 ครั้ง)

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

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

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

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

ข้อมูล: จำนวนทั่วทศนิยมหรือร้อยละ
ขณะนี้สคริปต์ถูกออกแบบมาเพื่อแสดงข้อมูลการประเมินเป็นค่าทั้งหมด (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 722 ครั้ง)

ใน Firefox ... บางครั้งคุณอาจสังเกตเห็นว่าเคอร์เซอร์จะเริ่มกะพริบบนหน้าจอ มันอาจจะเกิดขึ้นเมื่อคุณคลิกที่องค์ประกอบใดบนหน้าเว็บซึ่งเป็นแผนกหรือภาพ ฯลฯ นี้เคอร์เซอร์กะพริบในหน้าต่างเบราว์เซอร์ที่เป็นจริงลักษณะการเข้าถึงของ Firefox เรียกว่า 'การเรียกดูลูกศร' คุณสมบัตินี้ช่วยให้ / ช่วยให้ผู้ใช้สามารถเลือกข้อความบนหน้าด้วยแป้นพิมพ์ (ซึ่งปกติเรามักจะทำด้วยการใช้เมาส์ของเรา)

ดี! ถ้าคุณต้องการ donot คุณลักษณะนี้ ... กดง่าย "F7" เพื่อสลับไปยังเท็จและในทางกลับกัน (ถ้าคุณต้องการบน) นอกจากนี้คุณยังสามารถพิมพ์ "about: config" ในแถบที่อยู่ (พิมพ์ "ตก" ในกล่องกรอง) และเพียงดับเบิลคลิกที่มีการเปลี่ยนแปลงตัวเลือก "accessibility.browsewithcaret" จาก "ความจริง" (ลูกศรที่กำลังเปิด ON) เป็น "เท็จ "(ลูกศรที่กำลังเปิด OFF)

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

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

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

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

ก่อนที่เราจะมีการจัดการกับ CSS เพื่อสร้างเค้าโครงหน้าของเราจัดเนื้อหาบางส่วนที่อยู่ภายในเซลล์ของตารางดูเหมือนเด็กเล่นเพียงของ เพียงแค่ตั้งค่า "จัด" หรือสถานที่ให้บริการ "VALIGN" ของตารางที่จะมีการจัดตำแหน่งที่คุณเลือกชิ้นส่วนของเค้ก!
ด้วยรูปแบบ CSS แต่เรามี "vertical-align" สถานที่ให้บริการสำหรับองค์ประกอบก็ดูเหมือนจะไม่เป็นง่ายๆเป็น "เส้นตรง" หรือคุณสมบัติ "VALIGN" การจะมีมากขึ้น specifiic "vertical-align" ไม่เคยดูเหมือนว่าจะแก้ปัญหาใด ๆ ของคุณโดยเฉพาะถ้ามีการเขียนชิ้นส่วนของ cross-browser CSS

โดยไม่ต้องใช้ตาราง HTM​​L ปัญหาของศูนย์กลางบนวัตถุไม่ว่าจะเป็นภาพหรือข้อความบางส่วนที่มีอยู่ภายในได้รับอาจจะทุก UI / CSS ฝันร้ายนักพัฒนาในบางจุด ปัญหานี้ต่อไป extrapolates กังวลของคุณจากการจัดตำแหน่งหากวัตถ​​ุที่จะเป็นศูนย์กลางเป็นแบบไดนามิกในธรรมชาติเช่นเมื่อความสูงของมันคือตัวแปร (ความสูงที่ไม่รู้จัก)

แม้ว่าจะไม่มีวิธีการแก้ปัญหาตรงไปข้างหน้าเป็นที่รู้จักที่จะทำงานในช่วงของเบราว์เซอร์ที่เราต้องจัดการกับการแก้ปัญหาที่ผมได้พยายามที่จะมาถึงที่ไม่ดูเหมือนจะทำงานในเบราว์เซอร์ไม่กี่แห่งที่ผมได้พยายามใน (IE6, IE 7 , FF)

SOLUTION:
ในเบราว์เซอร์เช่น Mozilla, Opera และ Safari แปลกพฤติกรรม "vertical-align" สถานที่ให้บริการสามารถนำความรู้สึกของตนเพียงโดยการตั้งค่า "แสดง" สถานที่ให้บริการของแผนกที่มีการ "ตารางเซลล์" (แสดง: ตารางเซลล์-) .

ปัญหาที่เกิดขึ้นยังคงอยู่กับครอบครัวเบราว์เซอร์ IE ที่ยังดูเหมือนจะไม่เข้าใจว่าจะมี "ตารางเซลล์" ทรัพย์สินและไม่รู้ว่าพวกเขาเป็นพวกเขาก็ไม่สนใจมัน วิธีการแก้ปัญหาให้ด้านล่างนี้แม้ว่าโฆษณาแบบง่ายๆองค์ประกอบเพิ่มเติม DOM ไม่กี่ HTML ของคุณจะทำให้สิ่งที่เกิดขึ้น

CSS และ HTML ลักษณะเช่นนี้
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML: -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/> <br/> ขอ Views: 3456 </ div>
</ div>
</ div>

ผลมีลักษณะเช่นนี้: -

ดูการสาธิตที่นี่ | ดาวน์โหลดไฟล์ที่มา (Downloaded 454 ครั้ง)

TOP จัด CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML: -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/> <br/> ขอ Views: 1234 </ div>
</ div>
</ div>

ผลมีลักษณะเช่นนี้: -

BOTTOM จัด CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/> <br/> ขอ Views: 1234 </ div>
</ div>
</ div>

ผลมีลักษณะเช่นนี้: -

ดูการสาธิตที่นี่ | ดาวน์โหลดที่นี่

ดูเหมือนว่าทุกเพศทุกวัยตั้งแต่ผมพยายามที่จะหาทางออกที่เหมาะสมเพื่อการจัดแนวนี้ปัญหาที่เกิดขึ้น แต่ตอนนี้มีวิธีการแก้ปัญหานี้ผมรู้สึกเหมือนอยู่ที่ความสงบสุขเล็ก ๆ น้อย ๆ

ด้วยความหวังว่าสักวันหนึ่ง

• สถานที่ให้บริการตามแนวตั้งแนว-ใน CSS จะทำงานเหมือนมันไม่อยู่ภายในเซลล์ของตารางโดยไม่ต้องที่จะชนะมากรอบพุ่มไม้
• อย่างน้อยการตั้งค่า margin-top: รถยนต์และขอบล่าง: อัตโนมัติจะให้เป็นผลเช่นเดียวกับกับขอบซ้ายและชุดขอบขวาอัตโนมัติ
• สงครามเบราว์เซอร์จะมากกว่าบางวัน
• มีเพียงแค่จะเบราว์เซอร์สำหรับทั้งหมด

ดาวน์โหลด CSS และ HTML ของการแก้ปัญหาข้างต้นที่นี่ (Downloaded 454 ครั้ง) .. สำหรับ understandability, CSS ไม่ได้รับการเพิ่มประสิทธิภาพ

PS: และโดยวิธีการเหล่านั้นจะรูปขนาดย่อของภาพบางส่วนที่ผมได้คลิก ...