إنشاء وحدة التحكم بحجم الصوت باستخدام jQuery UI Slider
إذا كنت صيادًا مجانيًا ، فمن المحتمل أنك قمت بتنزيل الكثير من واجهات مستخدم PSD (UI). بعضها رائع حقًا ويمكن أن يوفر وقتنا من خلال تصميم النماذج التي كنا نعمل عليها.
سنقوم في هذا المنشور بترميز واجهة مستخدم PSD وتحويلها إلى شيء أكثر وظيفية. سنقوم بترميز رمز PSD UI Slider التالي ليتم تطبيقه كموضوع jQuery UI Slider.
ومع ذلك, ارجو اخذ ملاحظات أن هذا البرنامج التعليمي يهدف ل المستويات المتوسطة من الخبرة. بعد قولي هذا ، ما زال من السهل نسبيًا اتباعه ، طالما أنك على دراية تامة بـ CSS و jQuery.
حسنًا ، الآن لنبدأ.
الخطوة 1: jQuery UI
من الواضح أننا بحاجة إلى jQuery ومكتبة jQuery UI ، ولدينا خياران لاستخدامها. أولاً ، يمكننا ربط jQuery و jQuery UI مباشرةً من CDN التالي: Google Ajax API CDN ، Microsoft CDN ، و jQuery CDN ، هناك الكثير من المزايا لاستخدام ملف CDN المستضاف عندما نضع موقعنا على الإنترنت مباشرة.
ولكن نظرًا لأننا سنعمل عليه فقط في وضع عدم الاتصال ، فسوف نستخدم ثانيا الطريق بدلا من ذلك.
سنقوم بتنزيل وتخصيص مكتبة jQuery UI من صفحة التنزيل الرسمية. نظرًا لأننا نحتاج فقط إلى المكون الإضافي Slider ، فسنختار فقط مكتبة Slider جنبًا إلى جنب مع تبعياتها وترك الآخرين. بهذه الطريقة ستكون الملفات التي نستخدمها أقل حجماً ويمكن تحميلها بشكل أسرع. بعد ذلك ، اربط كل هذه المكتبات بمستند HTML ، ويفضل أن يكون ذلك في أسفل الصفحة أو قبل الإغلاق
العلامة لتكون دقيقة.
الخطوة 2: ترميز HTML
ترميز شريط التمرير بسيط للغاية ، قمنا بتغليف جميع العلامات الضرورية - تلميح الأدوات ، شريط التمرير ، وحدة التخزين - داخل HTML5 الجزء العلامة. سوف jQuery UI ثم تولد تلقائيا الباقي.
الخطوة 3: تثبيت Slider UI
سيقوم المقتطف أدناه بتثبيت المنزلق على الصفحة ، لكنه لا ينطبق إلا على التكوين الافتراضي.
$ (function () $ ("#slider") .slider ()؛)؛
حتى هنا سنقوم بتحسين شريط التمرير قليلاً عن طريق إضافة تكوينات أخرى.
أولاً ، نقوم بتخزين عنصر شريط التمرير كمتغير.
فار المنزلق = $ ('# slider'),
بعد ذلك ، حددنا الحد الأدنى للقيمة الافتراضية لشريط التمرير 35, عندما يتم تحميله أولا.
slider.slider (range: "min"، value: 35،)؛
في هذه المرحلة ، لن نشاهد أي شيء على المتصفح بعد ، لأن jQuery UI هي أساسا فقط توليد العلامات. لذلك ، نحتاج إلى تطبيق بعض الأنماط لبدء رؤية النتيجة بشكل مرئي على المتصفح.
الخطوة 4: الأنماط
قبل المتابعة ، نحتاج إلى بعض الأصول من ملف مصدر PSD مثل نسيج الخلفية والرمز.
لن نتحدث عنها كيفية شريحة في هذه المقالة ، سنركز فقط على الكود. إذا لم تكن متأكدًا من كيفية التقسيم ، راقب سجل الشاشة التالي أولاً قبل المتابعة.
تحويل التصميم من PSD إلى HTML - Nettuts+
حسنًا ، لنبدأ الآن بإضافة الأنماط.
سنبدأ بوضع شريط التمرير في وسط نافذة المتصفح وإرفاق الخلفية التي قطعناها من PSD إلى الجسم.
كرر الخلفية: url ('... /images/bg.jpg') كرر أعلى اليسار ؛ قسم العرض: 150 بكسل ؛ الارتفاع: السيارات ؛ الهامش: 100px auto 0؛ الموقف: نسبي
بعد ذلك ، سنطبق الأنماط الخاصة بـ تلميح الأدوات, الحجم, المقبض, شريط التمرير نطاق و ال المنزلق بحد ذاتها.
سنفعل هذا الجزء جزئيًا ، بدءًا من ...
المنزلق
نظرًا لأننا لم نحدد الحد الأقصى لقيمة شريط التمرير نفسه ، فستطبق واجهة المستخدم jQuery القيمة الافتراضية ؛ هذا هو 100. لذلك ، يمكننا أيضا تطبيق 100 (بكسل) شريط التمرير عرض.
لقد قمنا بتعديل رمز مستوى الصوت قليلاً لتلبية فكرتنا. والفكرة هي أننا ذاهبون لخلق تأثير ل رفع شريط الصوت تدريجيا وفقا لقيمة المنزلق. أنا متأكد من أنك غالبًا ما رأيت مثل هذا التأثير في واجهة مستخدم مشغل الوسائط.
.مستوى الصوت display: inline-block؛ العرض: 25 بكسل ؛ الارتفاع: 25 بكسل ؛ اليمين: -5 بكسل ؛ الخلفية: عنوان url ('... /images/volume.png') بلا تكرار 0 - 50 بكسل ؛ الموقف: مطلق ؛ أعلى هامش: -5 بكسل ؛
مقبض UI
أسلوب المقبض بسيط للغاية ؛ سيكون له رمز يشبه الدائرة المعدنية ، مقطوعة من PSD ، ومرفقة كخلفية.
سوف نقوم أيضًا بتغيير وضع المؤشر إلى مؤشر, لذلك سوف يلاحظ المستخدم أن هذا العنصر قادر على السحب.
.ui-slider-handle position: absolute؛ مؤشر z: 2 ؛ العرض: 25 بكسل ؛ الارتفاع: 25 بكسل ؛ المؤشر: المؤشر ؛ الخلفية: عنوان url ('... /images/handle.png') لا يتكرر 50٪ 50٪ ؛ وزن الخط: غامق ؛ اللون: # 1C94C4 ؛ الخطوط العريضة: لا شيء ؛ أعلى: -7 بكسل. الهامش الأيسر: -12 بكسل ؛
شريط التمرير
سيكون نطاق المنزلق لون تدرج أبيض قليلاً.
.ui-slider-range background: linear-gradient (top، #ffffff 0٪، # eaeaea 100٪)؛ الموقف: مطلق ؛ الحدود: 0 ؛ أعلى: 0 ؛ الارتفاع: 100 ٪ ؛ نصف قطر الحدود: 25 بكسل ؛
الخطوة 5: التأثير
في هذه الخطوة ، سنبدأ العمل على التأثير الخاص لـ Slider.
تلميح
في هذه المرحلة ، لا تحتوي تلميح الأدوات على محتوى حتى الآن ، لذلك سنقوم بملئه بقيمة شريط التمرير. أيضًا ، سيتوافق الموضع الأفقي لأداة تلميح مع موضع المقبض.
بادئ ذي بدء ، نقوم بتخزين عنصر تلميح الأدوات كمتغير.
var tooltip = $ ('. tooltip')؛
ثم نحدد تأثير تلميح الأدوات الذي ذكرناه أعلاه داخل "حدث الشريحة".
slide: function (event، ui) var value = slider.slider ('value')، tooltip.css ('left'، value) .text (ui.value)؛
لكننا نريد أيضًا إخفاء تلميح الأدوات في البداية.
tooltip.hide ()؛
بعد ذلك ، عندما مقبض على وشك البدء في الانزلاق ، وسيتم عرضه مع تأثير الخبو.
start: function (event، ui) tooltip.fadeIn ('fast')؛ ,
وعندما يتوقف المستخدم عن تحريك المقبض ، سوف تتلاشى تلميح الأدوات ويختفي.
stop: function (event، ui) tooltip.fadeOut ('fast')؛ ,
الصوت
كما ذكرنا أعلاه في قسم الأنماط, نحن نخطط لتغيير حجم رمز المقابلة مع موقف المقبض أو أن تكون دقيقة, قيمة شريط التمرير. لذلك ، سوف نطبق العبارة الشرطية التالية لإنشاء هذا التأثير.
لكن أولاً ، نقوم بتخزين عنصر الصوت بالإضافة إلى قيمة شريط التمرير كمتغير.
حجم = $ ('. حجم') ؛
ثم نبدأ البيان الشرطي.
عندما تكون قيمة شريط التمرير أقل أو تساوي 5 لن تحتوي أيقونة مستوى الصوت على أي أشرطة على الإطلاق ، مما يشير إلى أن مستوى الصوت منخفض جدًا ، ولكن عندما تزداد قيمة شريط التمرير ، سيبدأ شريط مستوى الصوت في الزيادة أيضًا.
إذا (القيمة <= 5) volume.css('background-position', '0 0'); else if (value <= 25) volume.css('background-position', '0 -25px'); else if (value <= 75) volume.css('background-position', '0 -50px'); else volume.css('background-position', '0 -75px'); ;
ضعهم جميعًا معًا
حسنًا ، في حال كنت مرتبكًا مع كل الأشياء المذكورة أعلاه ، لا تكون كذلك. هنا هو الاختصار. ضع جميع الرموز التالية في وثيقتك.
