كيفية تخصيص و Theming jQuery UI Datepicker

jQuery UI رائع ببساطة وبسبب سهولة الاستخدام ، فهو شائع ويستخدم على نطاق واسع في أي موقع ويب تقريباً يحتاج إلى ميزات تفاعلية.

وفي هذا المنشور ، سننظر في إحدى الميزات المتوفرة ، وهي أداة Datepicker.

سنحاول معرفة كيفية تخصيص سمة التقويم ، بحيث تكون قادرًا على إنشاء سمة خاصة بك تتوافق مع التصميم العام. ومع ذلك ، فأنت بحاجة إلى قليل من الفهم في JavaScript والتعرف على CSS قبل اتباع هذا البرنامج التعليمي.

• عرض
• تحميل المصدر

إذا كنت جاهزًا ، فلنبدأ.

الأصول

لنعد بعض الأصول الأساسية للتقويم.

أولاً ، سيشير تصميم التقويم إلى ملف PSD هذا من Premium Pixels. لذا ، من الأفضل تنزيله أولاً لمساعدتنا في أخذ عينة من الألوان التي نحتاجها. بعد ذلك ، قم بتنزيل نموذجين من فصيح أنماط - رسم التي سوف نستخدمها كخلفية للتقويم لدينا. في هذا المثال ، قررنا استخدام الأنماط التالية: الدنيم الأسود والجلد الداكن.

سنحتاج أيضًا إلى أداة لتطوير الويب مثل Firebug لفحص فئات / معرّفات العناصر التي تم إنشاؤها بواسطة واجهة المستخدم jQuery.

حسنًا ، أعتقد أننا حصلنا على الاستعداد الكافي. الآن دعنا نذهب إلى الخطوة الأولى.

الخطوة 1: jQuery UI Datepicker

أولاً ، انتقل إلى صفحة تنزيل jQuery UI. في هذه الصفحة ، سيتم تقديم بعض الخيارات لك ، على النحو التالي ؛ واجهة المستخدم الأساسية ، الحاجيات ، التفاعلات والآثار.

ينبغي لنا ألغ تحديد جميع المكونات, لأننا لسنا بحاجة إلى كل منهم.

ثم ، في الحاجيات حدد القسم فقط منتقي التاريخ. ستحدد واجهة المستخدم jQuery التبعيات الأساسية تلقائيًا ، ثم تحميل الملف.

ربط جميع الملفات التي تم تنزيلها - باستثناء CSS - إلى مستند HTML فارغ ، كما يلي:

الخطوة 2: تخصيص Datepicker

في هذه الخطوة ، سنقوم بتكوين منتقي تاريخ باستخدام الخيارات التالية.

سوف يرشد الكود أعلاه jQuery لعرض التقويم على عنصر به منتقي التاريخ هوية شخصية. لذلك ، نحن بحاجة إلى وضع ما يلي شعبة علامة مع - معرف datepicker - في القسم الأساسي لتشكيل التقويم:

الآن يجب أن يكون التقويم قد تم إنشاؤه بالفعل ويبدو كهذا ، عادي بدون أي أنماط ، ولكن لا يزال لديه الوظيفة.

الخطوة 3: الأنماط

الآن لنبدأ في تصميم التقويم. سنبدأ بتطبيع جميع العناصر - كالمعتاد - وإنشاء ورقة أنماط جديدة ، في هذا المثال أسميها datepicker.css. ثم اربطها جميعًا بمستند HTML.

بعد ذلك ، سنقوم أولاً بإرفاق خلفية للجسم حتى لا يبدو HTML الخاص بنا سهلًا للغاية.

الخلفية: url ('... /img/darkdenim3.png') كرر 0 0 # 555؛ 

بعد ذلك ، سنحدد عرض منتقي التاريخ ، ونضعه في المنتصف ونضيف الظل المسقط لإعطاء التأثير البارز للتقويم..

.ui-datepicker width: 216px؛ الارتفاع: السيارات ؛ الهامش: 5px auto 0 ؛ font: 9pt Arial، sans-serif؛ -webkit-box-shadow: 0px 0px 10px 0px rgba (0، 0، 0، .5)؛ -moz-box-shadow: 0px 0px 10px 0px rgba (0، 0، 0، .5)؛ box-shadow: 0px 0px 10px 0px rgba (0، 0، 0، .5)؛ 

سنقوم أيضًا بإزالة زخرفة التسطير الافتراضية من كل علامة ربط.

.ui-datepicker a text-decoration: none؛ 

التقويم في jQuery UI يتكون من a الطاولة. لذلك ، دعونا نضيف 100٪ عرض ل الطاولة, لذلك سيكون لها نفس أقصى عرض للملف أعلاه ؛ هذا هو 216px

.ui-datepicker table width: 100٪؛ 

تصميم قسم الرأس

لدى datepicker قسم رأس يحتوي على شهر سنة من التقويم. سوف يحتوي هذا القسم على نسيج داكن اللون من الجلد الذي قمنا بتنزيله من قبل بلون خط أبيض قليلاً 1PX الظل الأبيض في الأعلى.

.ui-datepicker-header background: url ('... /img/dark_leather.png') كرر 0 0 # 000؛ اللون: # e0e0e0 ؛ وزن الخط: غامق ؛ -webkit-box-shadow: أقحم 0px 1px 1px 0px rgba (250 ، 250 ، 250 ، 2) ؛ -moz-box-shadow: أقحم 0px 1px 1px 0px rgba (250 ، 250 ، 250 ، .2) ؛ مربع الظل: أقحم 0px 1px 1px 0px rgba (250 ، 250 ، 250 ، .2) ؛ text-shadow: 1px -1px 0px # 000؛ filter: dropshadow (color = # 000، offx = 1، offy = -1)؛ ارتفاع الخط: 30px ؛ عرض الحدود: 1px 0 0 0 ؛ نمط الحدود: الصلبة. لون الحدود: # 111؛ 

بعد ذلك ، دعونا توسيط شهر موضع.

 .ui-datepicker-title text-align: center؛ 

استبدال التالى و السابق النص مع الصور سهم العفريت شرائح من PSD.

.ui-datepicker-prev، .ui-datepicker-next display: inline-block؛ العرض: 30 بكسل ؛ الارتفاع: 30 بكسل ؛ محاذاة النص: المركز ؛ المؤشر: المؤشر ؛ صورة الخلفية: url ('... /img/arrow.png') ؛ تكرار الخلفية: عدم التكرار ؛ ارتفاع الخط: 600 ٪ ؛ إخفاء الفائض؛ 

ثم ، اضبط موضع السهم على التوالي.

.ui-datepicker-prev float: left؛ خلفية الموقف: مركز -30px.  .ui-datepicker-next float: right؛ موقف الخلفية: مركز 0px. 

بينما ال أسماء اليوم ملفوفة داخل THEAD, بناءً على مرجع التصميم الخاص بنا ، سيكون له تدرج أبيض قليلاً. ولتبسيط مهمتنا ، سنستخدم هذه الأداة لإنشاء رمز التدرج:

.ui-datepicker thead background-color: # f7f7f7؛ خلفية الصورة: - التدرج اللوني الخطي (أعلى ، # f7f7f7 0٪ ، # f1f1f1 100٪) ؛ background-image: -webkit-gradient (خطي ، أعلى اليسار ، أسفل اليسار ، توقف لون (0٪ ، # f7f7f7) ، توقف لون (100٪ ، # f1f1f1)) ؛ خلفية الصورة: -تدرج خطي-التدرج (أعلى ، # f7f7f7 0٪ ، # f1f1f1 100٪) ؛ خلفية الصورة: -o-linear-gradient (top، # f7f7f7 0٪، # f1f1f1 100٪)؛ background-image: -ms-linear-gradient (top، # f7f7f7 0٪، # f1f1f1 100٪)؛ خلفية الصورة: التدرج الخطي (أعلى ، # f7f7f7 0٪ ، # f1f1f1 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# f7f7f7"، endColorstr = "# f1f1f1"، GradientType = 0)؛ الحدود السفلية: 1px صلب #bbb ؛ 

ال أسماء اليوم النص سيكون له لون رمادي غامق # 666666 وسيكون لديهم أيضا بيضاء رقيقة نص الظل لمنحه تأثير مضغوط.

.ui-datepicker th text-convert: uppercase؛ حجم الخط: 6pt ؛ الحشو: 5px 0 ؛ اللون: # 666666 ؛ text-shadow: 1px 0px 0px #fff؛ filter: dropshadow (color = # fff، offx = 1، offy = 0)؛ 

في هذه المرحلة ، سوف يظهر التقويم بالشكل التالي:

تصميم التواريخ

يتم التفاف التواريخ التقويم داخل الدفتيريا أو بيانات الجدول. لذلك ، سنقوم بتعيين الحشو ل 0 لإزالة المسافات بين الدفتيريا واعطائها الحدود الصحيحة من 1px.

.ui-datepicker tbody td padding: 0؛ الحدود اليمنى: 1px صلب #bbb ؛ 

باستثناء الماضي الدفتيريا, والتي لن يكون لها الحدود الصحيحة. وضعنا الحد الأيمن على 0 لهذا الغرض.

.ui-datepicker tbody td: last-child border-right: 0px؛ 

صف الجدول سيكون هو نفسه تقريبا. سيكون لها حد حد 1px باستثناء الصف الأخير.

.ui-datepicker tbody tr border-bottom: 1px solid #bbb؛  .ui-datepicker tbody tr: last-child border-bottom: 0px؛ 

تصميم الافتراضي ، تحوم والدولة النشطة

في هذه الخطوة سوف نحدد تحوم التاريخ والأساليب النشطة. سنحدد أولاً الحالة الافتراضية للتاريخ من خلال تحديد البعد ؛ توسيط موضع نص التاريخ ، وإضافة لون التدرج والظل الأبيض الداخلي.

.ui-datepicker td span ، .ui-datepicker td a display: inline-block؛ وزن الخط: غامق ؛ محاذاة النص: المركز ؛ العرض: 30 بكسل ؛ الارتفاع: 30 بكسل ؛ ارتفاع الخط: 30px ؛ اللون: # 666666 ؛ text-shadow: 1px 1px 0px #fff؛ filter: dropshadow (color = # fff، offx = 1، offy = 1)؛  .ui-datepicker-calendar .ui-state-default background: #ededed؛ الخلفية: - التدرج اللوني الخطي (أعلى ، #ededed 0٪ ، #dedede 100٪) ؛ الخلفية: -تدرج-الويب (خطي ، أعلى اليسار ، أسفل اليسار ، لون توقف (0٪ ، # ededed) ، لون توقف (100٪ ، # dedede)) ؛ الخلفية: -تدرج خطي متدرج (أعلى ، #ededed 0٪ ، # dedede 100٪) ؛ الخلفية: -o-linear-gradient (أعلى ، #ededed 0٪ ، # dedede 100٪) ؛ الخلفية: -ms-linear-gradient (أعلى ، #ededed 0٪ ، # dedede 100٪) ؛ الخلفية: التدرج الخطي (أعلى ، #ededed 0٪ ، # dedede 100٪) ؛ filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ededed"، endColorstr = "# dedede"، GradientType = 0)؛ -webkit-box-shadow: أقحم 1px 1px 0px 0px rgba (250 ، 250 ، 250 ، .5) ؛ -moz-box-shadow: أقحم 1px 1px 0px 0px rgba (250 ، 250 ، 250 ، .5) ؛ مربع الظل: أقحم 1px 1px 0px 0px rgba (250 ، 250 ، 250 ، .5) ؛  .ui-datepicker-unselectable .ui-state-default background: # f4f4f4؛ اللون: # b4b3b3 ؛ 

عندما تحوم فوق التاريخ ، فسيتحول إلى اللون الأبيض قليلاً.

 .ui-datepicker-calendar .ui-state-hover background: # f7f7f7؛ 

عندما يكون التاريخ في حالة نشطة ، سيكون له الأنماط التالية.

 .ui-datepicker-calendar .ui-state-active background: # 6eafbf؛ -webkit-box-shadow: inset 0px 0px 10px 0px rgba (0، 0، 0، .1)؛ -moz-box-shadow: inset 0px 0px 10px 0px rgba (0، 0، 0، .1)؛ box-shadow: inset 0px 0px 10px 0px rgba (0، 0، 0، .1)؛ اللون: # e0e0e0 ؛ text-shadow: 0px 1px 0px # 4d7a85؛ filter: dropshadow (color = # 4d7a85 ، offx = 0 ، offy = 1) ؛ الحدود: 1px صلب # 55838f ؛ الموقف: نسبي الهامش: -1 بكسل ؛ 

الآن ، يجب أن يبدو التقويم أفضل بكثير.

تحديد الموقف

في هذه المرحلة ، انظر إلى التاريخ بعناية. عند النقر فوق التاريخ في العمود الأول أو الأخير ، ستلاحظ أن الحالة النشطة تغمر بكسل خارج حافة التقويم.

حتى هنا ، سنفعل بعض الإصلاحات الصغيرة.

أولاً سنقوم بتقليل عرض التاريخ إلى 29px, وقم بتعيين الهامش الأيمن للعمود الأخير والهامش الأيسر للعمود الأول على 0 لعكس -1PX الهامش وضعنا سابقا للحالة النشطة.

.ui-datepicker-calendar td: first-child .ui-state-active width: 29px؛ الهامش الأيسر: 0؛  .ui-datepicker-calendar td: last-child .ui-state-active width: 29px؛ الهامش الأيمن: 0؛  

سيكون التاريخ في الصف الأخير من التقويم أيضا معاملة مماثلة.

.ui-datepicker-calendar tr: last-child .ui-state-active height: 29px؛ الهامش السفلي: 0 ؛ 

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

• عرض
• تحميل المصدر

المكافأة: تمديد التقويم

حسنًا ، اليوم تعلمنا الكثير حول كيفية إنشاء سمة مخصصة لـ jQuery UI Datepicker. لكن يجب ألا تتوقف هنا ، حيث لا يزال هناك العديد من الأشياء التي يمكن تمديدها من منتقي التاريخ هذا. بناءً على مسجيك وإجادة CSS ، يمكنك تمديد التقويم ليكون مثل هذا - إدخال النص مع منتقي تاريخ التراكب.

• عرض
• تحميل المصدر

قراءة متعمقة

لمزيد من القراءة على jQuery UI. يمكنك قراءة الوثائق كاملة هنا:

• الابتداء مع jQuery UI
• Theming jquery UI
• jQuery UI: فئات API Theming

افكار اخيرة

شكرًا لك على قراءة هذا البرنامج التعليمي واتباعه ، آمل أن تجده مفيدًا. وإذا كان لديك أي ملاحظات أو ترغب في إضافة أشياء قد تكون مفقودة من هذا البرنامج التعليمي ، فلا تتردد في الإشارة إليها في قسم التعليقات أدناه. شكرا لك مرة أخرى).