การแสดงไอที

เมื่อวานนี้ทุกอย่างอื่น ๆ "วัน Hog พื้น" ผมได้ทำงานในบางรูปแบบ CSS / tableless ทั้งหมดที่เกิดขึ้นได้ดีใน IE 7, FF 3 และโครมก็จนกว่าผมเห็นบางขอบยกเลิก ignorable เห็นเฉพาะใน Google Chrome แม้ว่าแปลกมากและ worring, มันเป็นข้อผิดพลาดบางปัญหา / ใหม่ที่ผมได้มาค่อนข้างสมเหตุสมผลมีจนเครื่องเทศบางอย่างในการทำงานทางโลกของฉัน เศร้า (แต่ดี) มันได้รับการแก้ไขภายในไม่กี่นาทีของหัว ...

โดยทั่วไปมันดูเหมือน Google Chrome ละเว้น CSS รีเซ็ตของฉัน (margin: 0px) มันจริงที่เกิดจากสไตล์ตัวแทนผู้ใช้ (-webkit-padding เริ่มต้น: 40px) ดังนั้นวิธีการแก้ปัญหาคือการตั้งค่ารูปแบบนี้โดยการตั้งค่า padding: 0 องค์ประกอบการทำงาน
วิธีที่ดีเพื่อป้องกันไม่ให้ปัญหาเหล​​่านี้เกิดขึ้นกับองค์ประกอบใด ๆ คือการใช้ CSS Rest ทั่วโลกดังนี้

* {margin: 0; padding: 0;}

ผู้ใช้แผ่นแบบตัวแทน (Specification) คืออะไร?
ข้อความที่ตัดตอนมาต่อไปนี้นำมาจาก http://meiert.com/en/blog/20070922/user-agent-style-sheets/ ลิงค์ตามไปอ่านเพิ่มเติมเกี่ยวกับผู้ใช้แผ่นแบบตัวแทน

CSS 1 แนะนำความคิดโดยระบุว่าตัวแทนของผู้ใช้แต่ละคน (UA มักจะ 'เว็บเบราเซอร์' หรือ 'ลูกค้าเว็บ') จะมีสไตล์ชีตเริ่มต้นที่มีการจัดเอกสารในที่เหมาะสม - แต่โลกีย์ arguably - ลักษณะ CSS 2 กล่าวว่าสอดคล้องกับตัวแทนผู้ใช้ต้องใช้สไตล์ชีตเริ่มต้น (หรือประพฤติตัวเป็นหากพวกเขา) และที่สไตล์ชีตตัวแทนผู้ใช้ 's เริ่มต้นควรนำเสนอองค์ประกอบของภาษาเอกสารในรูปแบบที่ตอบสนองความคาดหวังของงานนำเสนอทั่วไปสำหรับภาษาเอกสาร; CSS 3 จะเป็นใจเดียวกัน

เนื่องจากคุณสมบัติของ CSS ปล่อยให้มันขึ้นไปการใช้งานว่าจะใช้ "ของจริง" สไตล์ชีตเริ่มต้นสำหรับการแสดงผลหรือไม่ก็ไม่น่าแปลกใจที่คุณจะไม่พบสไตล์ชีตเริ่มต้นในโฟลเดอร์ที่ติดตั้งเบราว์เซอร์ของทุก ซึ่งแตกต่างจากโปรแกรม Internet Explorer ของ Microsoft เช่นเดียวกับ Opera, ตัวอย่างเช่น (และเท่าที่ฉันรู้), เบราว์เซอร์ตุ๊กแกเช่น Firefox และ Netscape Navigator (มองหา "html.css") แต่ยัง Konqueror ทำให้มันค่อนข้างง่ายที่จะเข้าใจจัดแต่งทรงผมของพวกเขาเริ่มต้น

นี้คนที่โรงเรียนเก่า แต่ตามปกติเนื่องจากเป็นอาหารเสริมที่มีหน่วยความจำของฉัน ...
ดังนั้นมีการยกเลิก = "true" และปิดการใช้งาน = "false" เดียวกันได้หรือไม่ใช่
... ไม่เชื่อดี! thats วิธีที่มันเป็น ... นี่คือบางคำอธิบายอย่างรวดเร็ว ...
"ยกเลิก" เป็นคุณลักษณะขององค์ประกอบรูปแบบใด / เขตและด้วยเหตุนี้สามารถรับค่าใด ๆ โดยธรรมชาติของมัน

ตราบใดที่คุณลักษณะนี้เป็นปัจจุบันอง​​ค์ประกอบที่จะใช้งานโดยไม่คำนึงถึงค่าของมัน สำหรับเช่น
<input type="text" value="This เป็น disabled" disabled>
<input type="text" value="This เป็น disabled" disabled="disabled">
<input type="text" value="This เป็น disabled" disabled="true">
<input type="text" value="This เป็น disabled" disabled="false">

ทั้งหมดข้างต้นจะทำให้เขตข้อมูลฟอร์มนี้ "พิการ"

เพียงแค่ไม่ให้แอตทริบิวต์ "ยกเลิก" ช่วยฟิลด์ "ABLED" ... เช่นนี้

<input type="text" value="This ไม่ disabled" />

จำเอาไว้ "ค่าใด ๆ (หรือค่าที่ไม่ทั้งหมด) ของแอตทริบิวต์สำหรับผู้พิการ, เบราว์เซอร์จะทำให้มันปิดการใช้งาน" เพื่อให้สิ่งที่ชัดเจนในจิตใจของเรา W3C แนะนำให้เราใช้ปิดการใช้งาน = "พิการ" ในสถานการณ์เหล่านี้

นี่คือความแตกต่าง แต่เมื่อเราใช้คุณลักษณะนี้ใน javascript ...

document.form.element.disabled = true; / / องค์ประกอบที่จะใช้งาน
document.form.element.disabled = false; / / ธาตุจะเปิดใช้งาน

ข้อโต้แย้งดังกล่าวยังเป็นจริงสำหรับแอตทริบิวต์เหล่านี้และองค์ประกอบ:

• การตรวจสอบ (ปุ่มวิทยุและช่องทำเครื่องหมาย)
• ที่เลือก (Option)
• nowrap (TD)

Google เริ่มต้นให้คนเคลื่อนไหวเพื่อถ่ายโอนข้อมูล IE6 ... โดยผู้ใช้ IE6 bugging กับ POPUP ในการโหลดหน้า ... อาจจะไม่คิดที่ดีมาก ... แต่เป็นนักพัฒนา UI ฉันมีรถบรรทุกที่จะเข้าร่วมวงนี้ ... หนึ่งเบราว์เซอร์น้อยสำหรับฉันกังวลเกี่ยวกับ ขออภัย ... เห็นแก่ตัวก็คือ! แต่ฉันได้รวมจาวาสคริปต์นี้ ... (ดูหน้านี้ใน IE6) ...
เฮ้! และเมื่อทราบสว่าง ... ดูมันเป็นจอแสดงผลของพาวเวอร์ของ JavaScript .... มันยังสามารถนำมาลงยักษ์ (หรือเมื่อมันเป็น)

ดังนั้น ... ช่วยเหลือกำจัดโลกของ IE6 กับสายของ javascript!

http://code.google.com/p/sevenup/

ด้วยเบราว์เซอร์ที่จะดูแลตั้งแต่พรุ่งนี้อีก! (IE8 ออกมาจากในวันพรุ่งนี้รัฐของเบต้า) ... IE6 เวลาของมันสูงจริงๆจะได้รับความเมตตาความตายของมันยาว ... เนื่องจากสหเรายืนสำหรับฤดูใบไม้ร่วงของ IE6

"IE6 เป็น 4 Netscape ใหม่ hacks จำเป็นในการสนับสนุน IE6 จะดูมากขึ้นเช่นการขนส่งสินค้าส่วนเกิน ชอบ Netscape 4 ในปี 2000, IE6 เป็นที่รับรู้จะถูกจับกลับมาบนเว็บ. "

เจฟฟ์ Zeldman มาตรฐาน guru

และในขณะเดียวกันสำหรับผู้ที่ต้องการฉันที่จะถูกน้ำท่วมพร้อมโทรศัพท์จากหมดสภาพเค้าโครง CSS ใน IE8 ที่นี่ทำงานเก่ารอบ / แก้ไขโดยใช้แท็ก Meta (meta HTTP-EQUIV = "X-UA-Compatible") คุณอาจจะลองคือ ...

ผิดพลาดพฤติกรรม IE8: CSS แตกหักเค้าโครง (การกำหนดเป้าหมายเบราว์เซอร์รุ่นที่ใช้แท็ก Meta ใน IE8)

ริอีกชิ้นเล็ก ๆ ของกลอุบายจาวาสคริปต์ที่ผมต้องขุดรอบเนื่องจากสถานการณ์ commaned มัน หนึ่งในเว็บไซต์ของฉันฉันมีสถานการณ์เช่นนี้ที่ฉันมีที่จะใช้ "windows.onload" สองครั้ง สิ่งแรกที่จะมาถึงใจที่ไม่มีประสบการณ์เหมือนผม (ฉันต้องบอกว่าตรงไปตรงมาตั้งแต่ฉันได้ใช้กรอบ JavaScript และห้องสมุดผมได้ forgotton ที่จะทำสิ่งง่ายๆด้วยตัวเอง ... ฉันเศร้า แต่จริง) คือวิธีต่อไปนี้ ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 ฯลฯ ..

ขออภัยที่จะพูด แต่นี้ทำงานเคยชิน ... dont ต้องการเพื่อหารือเกี่ยวกับวิทยาศาสตร์การดำเนินการของจาวาสคริมาก ... แต่ตามประสบการณ์ล่าสุดของฉันเพียงฟังก์ชั่นล่าสุด (onloadfn3) จะป่วยจริงได้รับการดำเนิน

ในสถานการณ์ปกติซึ่งแตกต่างจากเหมือง (ซึ่งผมจะพูดถึงน้อยกว่า) ... คุณสามารถทำอย่างใดอย่างหนึ่งดังต่อไปนี้การดำเนินการฟังก์ชั่น onload mutliple ....

หรืออะไรเช่นนี้

 doOnLoad function () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

สำหรับสถานการณ์ปัจจุบันของฉันฉันไม่สามารถใช้อย่างใดอย่างหนึ่งดังกล่าวข้างต้น ...
ฉันไม่จำเป็นต้องเรียก windows.onload สองค่อนข้างที่เรียกฟังก์ชันที่สองภายในฟังก์ชัน onload เดียวทำไม? ที่นี่ดูอย่างรวดเร็วที่งบปัญหาของฉันคือ ...

"หน้าไซต์ของฉันมีโครงสร้างเหมือนธีม WordPress .... เช่นมี header.php ที่พบบ่อยและ Footer.php ที่ได้รับรวมเป็นทั้งหมดเป็นหน้าเว็บไซต์ มีฟังก์ชั่น implementaion onload ใน Footer.php ที่จะทำหน้าที่ onload บางที่พบบ่อยคือ และมีไม่กี่หน้าที่ต้องการบางสิ่งบางอย่างจาก OnLoad ของตนเองนอกเหนือจากที่ทำโดยฟังก์ชั่น onload ที่พบบ่อย ถ้าผมกำหนดฟังก์ชันโทรกลับโดยตรงไปยังตัวจัดการ window.onload จะมากกว่านั่งเรียกกลับได้รับมอบหมายก่อนหน้านี้ใน Footer.php "

.... เป็นปัญหาของฉันเข้าใจ ?

ดี! มีโซลูชั่นไม่กี่แห่งที่ผมพบคือ พวกเขาทั้งหมดจะคล้ายกันมากและส่วนใหญ่ implementions ของการแก้ปัญหาให้โดยไซมอน Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Solution:

เพียงเพิ่มโค้ดจาวาสคริปต์นี้ไปยังเว็บไซต์ ...

 ฟังก์ชั่น addLoadEvent (func) {
     var oldonload = window.onload;
     ถ้า (window.onload typeof! = 'ฟังก์ชั่น') {
        window.onload = func
     } else {
        window.onload = function () {
            ถ้า (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

และเรียกว่าแทน "windows.onload" ปกติ

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent ฟังก์ชั่น (() {
 * / รหัสมากขึ้นในการทำงานในการโหลดหน้า *
 }); 

ข้อดีของโค้ดนี้ ...
1 ในขั้นต้นจะช่วยให้คุณมีเหตุการณ์ windows.onload หลายที่เรียกว่าแยกจากส่วนของรหัสของคุณโดยไม่ต้อง overridding ความหมายก่อนหน้านี้
2 มันเป็นสร้างความรำคาญจริงๆ มันสามารถนำมาวางไว้ในแฟ้มที่มีสคริปต์อื่น ๆ ของคุณหรือในแฟ้มที่แยกต่างหาก
3 มันทำงานได้แม้ว่า window.onload ได้ถูกกำหนด

อีก 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

บางครั้งเพื่อให้ 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 1998 ครั้ง)

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