معربا عن تكنولوجيا المعلومات

مع مجموعة متنوعة من دوارات هناك، والعديد من Mootools كذلك، قررت أن أكتب لا يزال صفي كاروسيل الخاصة، لبعض أسباب وجيهة
1. يريد ميزة الترحيل (لتكون قادرة على القفز شريحة معينة / خطوة في دائري).
2. أراد الحرية مع التنسيب من الأزرار اليسار واليمين / وصلات، حيث من أي وقت مضى لي من فضلك.
3. مزيد من السيطرة على خطوات الشرائح.

أنا لم يتمكن من خلق كاروسيل جديد، مع ميزات أعلاه ... على النحو التالي ... لا تتردد في اقتراح أي تعديلات تقوم سيتطلب!

بلدي على سبيل المثال يبدو مثل هذا ... [ عرض الفيلم ]

عرض تجريبي | تحميل Mootools كاروسيل مع ترحيل الإصدار 1.0 (يتم تنزيله 1991 مرة)

1. دائري ترحيل

يمكنك بسهولة إضافة إلى ترحيل دائري الخاص، وذلك ببساطة من خلال وضع علامة الترحيل، والذي هو parater الماضي مرت أثناء إنشاء مثيل من MooCarousel إلى الحقيقية (أريد الترحيل) أو خطأ (متأكدا يريد ترحيل).

فار carousel1 = جديد MooCarousel ('carousel1_wrapper'، 'carousel1_items_container'، 'carousel1_moveleft'، 'carousel1_moveright'، c_ns، c_sss، صحيح)؛ / / نانوثانية = عدد من الشرائح، ونظام الضمان الاجتماعي خطوة الشريحة = حجم

ويمكن أن فكورسي تغيير هذه النظرة achors ترحيل-N-يشعر كما تريد من خلال تعديل CSS الخاصة بهم.

. carousel_paging {مواءمة النصوص: حق؛ الهامش: 5PX 10px 0 0؛}
. carousel_paging الحالي، carousel_paging الصفحة {الخطوط العريضة: لا شيء؛ العرض:. 15px؛ الطول: 15px؛ خط الطول: 15px؛ مواءمة النصوص: المركز؛ العرض: كتلة، تعويم: غادر؛ خلفية: # D8D8EB؛ هامش: 0 1px 0 0؛ النص الديكور: لا شيء؛}

. carousel_paging أ: تحوم، carousel_paging الحالية {خلفية: # 4D4D9B؛ اللون: # FFFFFF؛}.

حسنا! هناك مشكلة صغيرة الرغم من ذلك، وإذا المراسي ترحيل مجموعة، ثم الحصول على ولدت بعد ذلك دائما عنصر كاروسيل. قررت أنني أريد أن تجعل من ديناميكية أيضا، ولكن بعد ذلك فقط للحفاظ على السيناريو للتطاير من النسب، لتخطي ذلك.
لكنك تعلم جافا سكريبت قليلا، هل يمكن بسهولة تعديل رمز جيل الترحيل في فئة MooCarousel لإرضاء الاحتياجات الخاصة بك.

2. Customising رموز اليسار واليمين

يمكنك تغيير موضع أو الصور أو أي ممتلكات displat من أزرار اليمين واليسار لمجرد اللعب حولها مع CSS. لتكون قادرة على تغيير المواضع من buttoms اليسار واليمين وكان السبب الحقيقي بالنسبة لي أن حق طبقتنا بلدي كاروسيل.
منذ هذه الفئة MooCarousel، يقبل معرف لهذه الأزرار، يمكنك وضع هذه الأزرار في الواقع في أي مكان على الصفحة، وإذا كنت من فضلك ... لا يجب أن تكون في التسلسل الهرمي عنصر، كما هو الحال في بلدي على سبيل المثال.

فار carousel1 = جديد MooCarousel ('carousel1_wrapper'، 'carousel1_items_container'، 'carousel1_moveleft'، 'carousel1_moveright'، c_ns، c_sss، صحيح)؛

CSS
.. carousel_container_l، carousel_container_r {الهامش: 50px 0 0 0؛ الموقف: النسبية؛ العرض: 23px؛ الطول: 20px؛ تعويم: غادر؛ المؤشر: المؤشر؛}

. carousel_container_r {الخلفية الموقف: 0-38px؛}

. carousel_container_l {الخلفية الموقف: 0-58px؛}

3. Customising خطوات الشرائح

ماذا يعني خطواتي SLIDE CUSTOMISING؟
معظم دوارات حرك كامل مع الإطار مرئية. لذلك نقول لكم كان أربعة وحدات (كما هو الحال في عينتي أعلاه)، فإنه ينزلق جميع البنود الأربعة. مع هذا المكون كاروسيل، يمكنك تمرير عدد من الشرائح وحجم الخطوة التي تختارها.

فار carousel1 = جديد MooCarousel ('carousel1_wrapper'، 'carousel1_items_container'، 'carousel1_moveleft'، 'carousel1_moveright'، c_ns، c_sss، صحيح)؛
c_ns = عدد من الشرائح، c_sss خطوة الشريحة = حجم

أيضا، في example1 لي لقد calcuted حجم الشريحة الخطوة، على أساس منطق حيث، وأنا أعرف عددا من البنود، عرض على كل بند والهوامش التي قدمت بعد كل عنصر في CSS بي.

/ * للإحتفال صاخب مخمور 1 * /

فار c1_w = 92؛ العرض البند / / إحتفال صاخب مخمور

فار c1_n = 10؛ عدد / / الإجمالي للعناصر إحتفال صاخب مخمور Comparision

فار c1_pp = 4 / / عدد من إحتفال صاخب مخمور Comparision عناصر perpage

فار c1_marginFactor = 51؛

فار c1_sss = c1_w * c1_pp / / نظام الضمان الاجتماعي خطوة الشريحة = حجم

فار c1_ns parseInt = (((* c1_w c1_n) / c1_sss) + 0.5) / / نانوثانية = عدد الشرائح

c1_sss + = c1_marginFactor / / الشريحة = SSS حجم الخطوة، و 51 للهوامش

المتطلبات: Mootools 1.2

عرض تجريبي | تحميل Mootools كاروسيل مع ترحيل الإصدار 1.0 (يتم تنزيله 1991 مرة)

Mootools MooRating هو (عبر متصفح، وبطبيعة الحال لأنه يستخدم القوة من مكتبة MooTools) بسيطة وخفيفة الوزن وممتازة تستند حل التصويت. لم يتم وصفته بانه "تقييم ستار"، وذلك ببساطة، فإن الصورة يمكن أن يكون التصويت على النحو الذي تختاره (لقد قدمت نجوم والحانات وهارتس مع التحميل، ولكن هل يمكن أن تخلق مجموعة خاصة بك، ومجرد قطرة في).

كيف يبدو:

	Mootools التقييم مع صور مختلفة عرض الفيلم
	Mootools التقييم مع قيم النسبة المئوية عرض الفيلم
	Mootools التقييم مع القيم كسور عرض الفيلم

تنزيل تصنيف بالنجوم Mootols النصي (تم تحميلها 718 مرة)

تصنيف البيانات: رقم الجامعة، عشري أو النسبة المئوية
حاليا تم تصميم البرنامج النصي لإظهار البيانات تصنيف كقيم كله (1،2،3،4،5)، في العشرية (1.24، 3.45، الخ) أو في النسب المئوية (12٪، وما إلى ذلك 55٪). يمكن تعيين الخيار لإظهار البيانات في أي من التنسيقات المذكورة ببساطة عن طريق تغيير بعض القيم العلم داخل جافا سكريبت (moorating.js)
أساسا هناك نوعان من البريد علمين للعب مع، لعرض القيم في الشكل الذي تختاره ...

فار inpercent = كاذبة؛ مجموعة / / هذا العلم صحيح، إذا كنت بحاجة ليتم عرضها قيم النسبة المئوية
فار isFractional = مجموعة كاذبة / / هذا صحيح، إذا كنت تريد القيم كسور مثل 1.24، 4.56، 1.25 بدلا من 1،2 ... 5

وأنا لا أعتقد أن هناك أي تفسير لهذا مطلوب. وعلاوة على ذلك. السيناريو بسيط جدا. إذا كنت تعرف القليل javascripting، هل يمكن تعديل البرنامج النصي للحصول على أي نوع من القيمة المعروضة. لعلى سبيل المثال إذا كنت تريد المنازل العشرية 3 ليتم عرضها ... قرص فقط السيناريو على النحو التالي ...

إذا كان (isFractional) {إذا كان (س <= 5 | | X> = 0) moostartval [ط] innerHTML = formatNumber (س، 3)؛.} يتم تغيير / / 2 الى 3
آخر رد moostartval [ط] innerHTML = Math.round (خ)؛

تحديث قيمة التقييم:
أنا [هفنت] ازعجت كتابة أي نصوص أجاكس لاستكمال قيمة التقييمات، لأنني أعرف من خلال تجربتي أنه لا يفعل ذلك دائما تنوي تحديث RATING في أقرب وقت ممكن للمستخدم معدلات شيء. أنت حر لتفعل ما تريد مع قيمة التصويت عليها، وتحديثه، باستخدام أجاكس أو إرسال أو تعيين حقل نموذج مخفي قيمة، لتقديمها مع النموذج بأكمله الخ.

updateRating وظيفة (الهوية، والتصويت) {
/ / حالة تأهب (معرف + "،" + تصنيف)؛
/ / اعملوا ما مع تصنيف
}

هناك وظيفة في جافا سكريبت يسمى "updateRating". وقد مرت هذه الوظيفة على هوية من الدرجة التقييم، للتعرف على النحو الذي التقييمات (إذا كان هناك أكثر أن أحد تقييمات على الصفحة) تم تحديث وقيمة التصويت [updateRating (الهوية، والتقييم)]. هل يمكن أن تختار ما تريد مع هذه القيم، وكما ذكرت سابقا.

صورة تصنيف: نجوم، قلوب، البارات أو أي شيء من فضلك
تغيير التصويت على أي من الأنواع المذكورة أعلاه (نجوم، قلوب، الخ) هو في غاية البساطة. مجرد خلق صورة مماثلة لتلك التي قدمت وأسقطه فيها تذكر، وإذا قمت بتغيير اسم الصورة، لا إجراء التغييرات الضرورية في الملف المغلق، انظر أدناه.

. moostar {هامش: 0px؛ الحشو: 0px؛ الفائض: خفي؛ العرض: 84px؛ الطول: 20px؛ تعويم: غادر؛ خلفية: عنوان ('stars.gif') كرر-X؛}
. moostar فترة {تعويم: غادر؛ الهامش: 0px؛ الحشو: 0px؛ العرض: كتلة؛ العرض: 84px؛ الطول: 20px؛ النص الديكور: لا شيء؛ النص البادئة:-9000px؛ Z-الفهرس: 20؛}
.. moostar عملة التداول {خلفية: عنوان ('stars.gif') غادر 25px؛}

معظم تقييمات الحاجيات استخدام نجمة والصور نصف نجمة مع الماوس فوق الأحداث على كل نجمة. التقييمات مو يستخدم صورة بسيطة العفريت كصورة خلفية لتحقيق التأثيرات البصرية المطلوبة مع ارتفاع منخفض جدا.

المتطلبات: Mootools 1.2
تنزيل تصنيف بالنجوم Mootols النصي (تم تحميلها 718 مرة)

وكنت قد تبحث عن التمرير المزدوج دبس (المنزلق مع اثنين من المقابض، والحد الأدنى والحد الأقصى) باستخدام mootools. رغم ذلك، فعلت العثور على عدد قليل أحسنت المنزلق دبس مزدوجة في المنتدى mootools، وكانت المشكلة الوحيدة أن كل هذه الطعجه المتزلجون لديها علامة النطاق المحدد. أخيرا! قررت لخلق بلدي. حسنا! أنا فعلت استخدام رمز الأصلي وتعديله لديهم خلفية شريط التمرير التي اشارت الى والنطاق المحدد بصريا، كما هو الحال في بلدي على سبيل المثال أدناه. المناطق الزرقاء تشير إلى مجموعة من قيمة اختياره.

عرض الإصدار 2.2 التجريبي | Mootools تحميل مثبت مزدوج المتزلج النسخة 2.2 (تم تحميلها 11727 مرات)

يمكنك بسهولة جدا تغيير الشكل والمظهر من مؤشر المدى (باللون الأزرق في المثال أعلاه)، مقبض الباب المنزلق، المسار المنزلق عن طريق تعديل slider.css على النحو المطلوب.

لا قطرة لي تعليق اذا وجدت أنه من المفيد.

قبل كان لدينا للتعامل مع CSS لإنشاء تخطيطات الصفحات لدينا والتوفيق بين بعض المحتويات داخل خلية جدول بدا لعب الأطفال فقط ل. ببساطة تحديد "محاذاة" أو "valign" الملكية من الجدول لدينا في محاذاة اختيارك، قطعة من الكعكة!
مع تخطيطات المغلق، رغم ان لدينا "محاذاة عمودية" الملكية للعناصر، لا يبدو أن تكون بسيطة مثل "محاذاة" أو "valign" الخصائص. على أن تكون أكثر specifiic في "عمودي محاذاة" لا يبدو أن حل أي من المشاكل الخاصة بك، وخاصة إذا كتابة قطعة من عبر متصفح المغلق.

من دون استخدام جداول HTML، ومشكلة تركز على الكائن، سواء كان صورة أو بعض النص ضمن تقسيم المحتوية، ربما كان كل كابوس مطوري UI / المغلق في بعض نقطة. هذه المشكلة يستنبط المزيد من التوفيق بين همومك، إذا كان الكائن إلى أن تتركز الحيوية في الطبيعة، أي عندما ارتفاعه هو متغير (الارتفاع غير معروف).

على الرغم من أنه لا يوجد حل معروف على التوالي إلى الأمام من شأنها أن تعمل عبر مجموعة من المتصفحات علينا أن نتعامل مع، الحل الذي حاولت أن تصل إلى ما يبدو للعمل في برامج التصفح القليلة التي حاولت في (IE6، IE 7 ، وما يليها).

الحل:
في مثل متصفحات موزيلا، أوبرا وسفاري، وغريب التصرف "محاذاة عمودية" لا يمكن أن تتحقق الملكية إلى رشدها، وذلك ببساطة عن طريق تعيين "عرض" ملك للتقسيم تحتوي على "خلية الجدول" (العرض: جدول خلية) .

المشكلة لا تزال مع عائلة اي من المتصفحات، ومنظمة الصحة العالمية، حتى الآن لا يبدو أن نفهم ما لمع الخاصية "جدول الخلية"، والجاهل كما هي، وأنها تجاهله. الحل الواردة أدناه، على الرغم من البساطة، وإعلانات بعض العناصر أكثر 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/> المشاهدات: 3456 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:

النتيجة يبدو مثل هذا: -

عرض تجريبي هنا | ملفات المصدر تحميل (التحميل 452 مرات)

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/> وجهات النظر: 1234 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:

النتيجة يبدو مثل هذا: -

محاذاة إلى الأسفل 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/> وجهات النظر: 1234 </ div> المصدر:
</ div> المصدر:
</ div> المصدر:

النتيجة يبدو مثل هذا: -

عرض تجريبي هنا | حمل هنا

يبدو أن العصور، منذ كنت في محاولة لايجاد حل معقول لهذه المشكلة المحاذاة. ولكن الآن مع هذا الحل، أشعر أنني في سلام القليل.

مع الأمل في أن يوما ما

• وسوف عمودي الانحياز الملكية في CSS العمل كما يفعل داخل خلية جدول، دون الحاجة للتغلب على الكثير من اللف والدوران
• على الأقل، وتحديد هامش قمة: السيارات وهامش القاع: السيارات، كما سيعطي النتيجة نفسها كما هو الحال مع هامش اليسار واليمين هامش مجموعة لصناعة السيارات
• وسوف تكون حرب برامج التصفح على بعض يوم.
• هناك إرادة واحدة فقط متصفح للجميع.

تحميل CSS و HTML من الحل فوق هنا (تم تحميلها 452 مرة) .. عن الفهم، وعدم CSS الأمثل

ملاحظة: وبالمناسبة، هذه هي الصور المصغرة لبعض الصور التي قد نقرت ...

ليس هناك سوى عدد قليل من العلبة الخفيفة والتي يمكنك أن تجد عند البحث. وكانت هذه المسألة مع معظم lightboxes التي وجدت أنها بدت جميع لاستخدام واحد أو الآخر JAVASCRIPT الوزن الثقيل مثل أطر النموذج، مسج، MOOTOOLS ويحب. انهم جميعا بارد وفاخر تبحث. ولكن إذا كان الشرط الخاص بك هو "لكني أريد ان SCRIPT الاليكتروني بسيط وخفيف الوزن لموقعي"، ثم هنا هو؛

بعض ملامح لطيفة من هذه العلبة الخفيفة

1. خفيف جدا
   أ. 4KB من مخطوطات عندما معبأة (8 كيلوبايت مفتوح)
   ب. 2 ك من CSS
   ج. بعض أسطر HTML للحاوية الاليكتروني
2. بسيطة لفهم وتنفيذ
3. يمكن أن يكون Lightboxes متعددة على نفس الصفحة.
4. يتم استخدام الحاويات الاليكتروني نفسه لإظهار، والمحتوى المختلفة (والتي يتم تضمينها على حدة الانقسامات كما المخفية في الصفحة)، وهذا يتوقف على الرابط / الخيار الذي يتم النقر.
5. مراكز نفسه تلقائيا، مع الأخذ في الاعتبار جميع العوامل مثل ارتفاع النافذة والعرض (دقة الشاشة)، مبلغ صفحة التمرير وارتفاع محتويات العلبة الخفيفة
6. اختبرت في آي إي 7 و FF

عرض تجريبي |
تحميل الكود المصدر الاليكتروني (التحميل 1804 مرات)

jo.js، jo_pack.js [نسخة معبأة]: - مجموعة بسيطة من الأشياء جافا سكريبت [JO]، الذي يحتوي على العنصر، نافذة ومخطوطات وثيقة لتحديد المواقع. يمكنك فتح JO.JS إذا كنت ترغب في الحصول على أيديكم القذرة مع بعض Javascripting متقدمة، وخلق وظائف مجردة، وتمتد خصائص العناصر وتلك. إذا كنت لا أكثر من اللازم في Javascripting، تترك وحدها.

lightbox.js، lightbox_pack.js [نسخة معبأة]: - تحتوي على ضوء النصوص مدير مربع. إذا كنت مصمم الصفحة، ومسؤول أيضا مع تنفيذ صندوق الضوء على الصفحة، تحتاج إلى فهم LightBoxManager. LightBoxManager يحتوي أساسا مجرد وظيفتين showLightBox وcloseLightBox.

lightbox.css: - إذا كنت تعرف CSS، يمكن أن تقوم به في جميع أنحاء مع lightbox.css إلى تخصيص مظهر-N-يشعر lightbox.css

index.html و: تنفيذ عينة من صندوق الضوء مع اثنين من محتوى مختلف

lb_underlay_bkg.png: - وهذا هو الضوء / سيمي صورة شفافة يستخدم الخلفية لبطانة صندوق الصور [البطانة هي طبقة تحت lighbox، والذي يمنع المستخدم من النقر على أي كيان آخر في الصفحة، في حين أن العلبة الخفيفة مفتوحة]. يمكنك استخدام أي صورة أو حتى بلون واحد لهذا الغرض، وهذا يتوقف على تصميم صفحة ومتطلبات.

icon_lb_close.gif: - صورة عن وثيقة مقبض العلبة الخفيفة على اليمين أعلى مربع الضوء. ويمكن استخدام أي صورة وفقا للتصميم

عرض تجريبي |
تحميل الكود المصدر الاليكتروني (التحميل 1804 مرات)

واسمحوا لنا أن تعليقاتك وملاحظاتك ...