• بخش 37 – طراحی وب واکنش گرا ، Buttons در Bootstrap
بخش 37 – طراحی وب واکنش گرا ، Buttons در Bootstrap
1395/02/26 - 11:06:13 // Responsive Web Design // 0 نظر // 3160 بازدید

در بخش های قبل در مورد اینکه چطور ، دکمه های مختلفی بسازیم صحبت کردیم . حال یاد می گیریم که چگونه از آن ها در موقعیت های مختلف استفاده کنیم و وضعیت آن ها را با استفاده از پلاگین های جاوا اسکریپت در bootstrap تغییر دهیم .

بخش 37 طراحی وب واکنش گرا ، Buttons در Bootstrap

در بخش های قبل در مورد اینکه چطور ، دکمه های مختلفی بسازیم صحبت کردیم . حال یاد می گیریم که چگونه از آن ها در موقعیت های مختلف استفاده کنیم و وضعیت آن ها را با استفاده از پلاگین های جاوا اسکریپت در bootstrap تغییر دهیم .

دکمه های Bootstrap دارای دو وضعیت فعال active و غیرفعال inactive می باشند . حالت فعال دارای کلاسی به نام active می باشد اما کلاسی برای حالت غیرفعال وجود ندارد . در عوض شما می توانید دکمه ای بسازید که بین دو وضعیت فعال و غیرفعال تغییر وضعیت دهد . این دکمه را در کدهای زیر می بینید :

در این کد ، ما یک دکمه ی بزرگ خاکستری رنگ با استفاده از کلاس های btn و btn-lg و btn-default ساختیم . در حالت جاری این دکمه در حالت غیرفعال خواهد بود . هنگامی کاربر روی آن کلیک می کند ، bootstrap یک کلاس با نام active به این دکمه اضافه خواهد کرد .

هنگامی که روی آن کلیک کردید ، مشاهده می کنید که دکمه به حالت inset تو رفته در خواهد آمد . با کلیک مجدد روی آن دکمه به حالت اولیه ی خود باز خواهد گشت . خصیصه ی data-toggle با مقدار button برای رسیدن به تغییر وضعیت کمک می کند .

تغییر استایل checkbox و radio button شاید هوشمندانه باشد . bootstrap راهی برای اینکار در اختیار شما خواهد گذاشت . در واقع یک دسته از checkbox ها و radio button ها را درون یک دسته از دکمه های Bootstrap قرار می دهد .

مثالی از این کار را در ادامه مشاهده کرده و بعد از آن اجرای این قطعه کد در مرورگر را می بینید .

و اجرای آن :

همانگونه که در بالا مشاهده کردید ما از گروهی از دکمه ها بعنوان checkbox استفاده نمودیم که آن را در درون تگ div با کلاس btn-group قرار دادیم . که باید دارای خصیصه ای با نام data-toggle با مقدار buttons باشد . تمامی المان های input با نوع checkbox-type باید درون یک المان label قرار گیرند . این label ها باید دارای کلاس های bootstrap با عنوان btn باشند . در این مورد ما از gray-colored برای دکمه های خود استفاده نمودیم .

Checkbox های چند رنگ

شما می توانید با مخلوط کردن رنگ های مختلف bootstrap در درون کلاس دکمه های خود ، دارای دکمه های چند رنگ در checkbox شوید . کلاس هایی مانند bn-primary ، btn-info و ...

شما همچنین می توانید با استفاده از دکمه های رادیویی کاری کنید که لیستی از دکمه هایی داشته باشید تا تنها یکی از آن ها قابلیت انتخاب داشته باشند . در ادامه کدی در این زمینه مشاهده می کنید :

اجرای این کد در مرورگر به شکل زیر خواهد بود :

تنها تفاوت این کد با کد قبلی در این است که بجای نوع checkbox از نوع radio استفاده نمودیم . افزون بر آن شما مجبور به قرار دادن radio ها در یک دسته بندی منطقی می باشید و این کار را با استفاده از خصیصه ی name یکسان برای همه ی آن ها انجام می دهید . در این مورد ما کلاس btn-default را با کلاس btn-info تعویض نمودیم تا رنگ خاکستری دکمه ها به رنگ آبی تغییر کند .

دکمه ها با جاوا اسکریپت

Bootstrap با متد button() برای تغییر وضعیت دکمه در jquery همراه می شود . شما می توانید از این متد بصورت زیر استفاده نمایید :

شما همچنین می توانید دکمه را در وضعیت loading قرار دهید . در این حالت دکمه بصورت غیرفعال باقی خواهد ماند . اما شما نیاز به تعریف یک متن بارگزاری دارید که با استفاده از خصیصه ی data-loading-text در المان دکمه انجام خواهد شد .

اجازه دهید تا وضعیت یک دکمه را با استفاده از jqeury بعد از کلیک به حالت Loading تغییر دهیم .

متن دکمه ی ما هنگامی که کلیک می شود از Load Data به Loading Stuff تغییر می کند . شما همچنین می توانید با استفاده از پارامتر reset در متد button() وضعیت دکمه ی خود را به حالت اولیه بازگردانده و درواقع ریست نمایید .

ما همچنین گزینه ای برای نمایش متنی در هنگام پایان عملیات loading داریم . برای اینکار می توانیم خصیصه ی data-complete-text را مقدار داده و در متد button از کد .button(“complete”) استفاده نماییم . برای اجرای متد complete و یا reset کردن دکمه ی خود می توانیم با استفاده از متد setTimeout تاخیری در اجرا ایجاد نماییم تا بتوانیم مراحل انجام کار را مشاهده کنیم . کد زیر برای ایجاد تاخیر را می بینید :

و اجرای این کد در مرورگر بعد از کلیک به شکل زیر خواهد بود :

و در نهایت بعد از 1 ثانیه بصورت زیر در خواهد آمد :

دانلود سورس تمرین این قسمت

شاد و سلامت باشید

محمد جعفری فوتمی

محمد جعفری فوتمی
معرفی نویسنده : محمد جعفری فوتمی

از سال 1382 بطور تخصصی در زمینه ی طراحی وب سایت کار کرده ام و در طی 12 سال گذشته تجربیاتی را کسب کرده ام که در هیچ کتاب و منبع آنلاینی یافت نمی شود ، تصمیم گرفته ام تا این تجربیات را در قالب مقالاتی به اشتراک بگذارم . امیدوارم مفید واقع شود .

امتیاز به مطلب
           
نظرات کاربران
ارسال نظر