illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

jquery-labelauty : پلاگین jQuery برای تغییر حالت متن هدر بصورت زیبا

0 1009 ۲۸ فروردین ۹۴

در این مطلب میخوام یک پلاگین jQuery بنام jquery-labelauty رو خدمت شما معرفی کنم و اونو آموزش بدم.

labelauty

 

با استفاده از این پلاگین میتونین استایل زیبایی برای چک باکس ها و رادیوها قرار بدین و رابط کاربری سایتتون رو ارتقاء بدین. با استفاده از این ابزار میتونین روی label های هر المنت چک باکس و رادیو مدیریت داشته باشید. همچنین حجم این پلاگین خیلی بالا نیس و در مرورگرهای بروز و IE9 به بالا هم پشتیبانی میشه.

میبینید که یک چپ باکس با label قرار داده شده و هر زمان که روی اون کلیک میکنید ، هم label تغییر میکنه و هم استایل چک باکس بصورت زیبایی عوض میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery-labelauty.js و jquery.min.js و jquery-labelauty.css نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

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

بعد از اون باید در تگ اسکریپت نهایی ، کد زیر رو قرار بدین :

میبینید که تمام چک باکسهارو انتخاب کردیم و بعد از اون متد labelauty رو براشون فراخوانی کردیم. تا اینجا اگر در خروجی مشاهده کنید ، میبینید که استایلهای مورد نظر اعمال شده و شکل کلی رو به خودش گرفته. ولی بعضی چیزا مقدار پیش فرض خودشون رو دارن که میتونین اونا رو تغییر بدین. مثلا میتونین متن label رو در حالت انتخاب و غیر انتخاب مشخص کنید. برای اینکار :

میبینید که متن بالا رو با استفاده از علامت | جدا کردیم ، متن قبل از این علامت مربوط به تیک خوردن هست و متن بعد از علامت مربوط به تیک برداشتن هست.

میتونین کاری کنید که label اصلا وجود نداشته باشه. برای اینکار :

میبینید که خاصیت label رو برابر با false قرار دادیم. همچنین میتونیم حداقل عرض رو برای این چک باکس مشخص کنیم ، بصورت زیر :

میبینید که حداقل عرض رو 70 پیکسل قرار دادم. همچنین این ابزار زمانی که checkbox غیر فعال باشه نیز استایل مناسبی رو برای اون در نظر میگیره. برای غیر فعال کردن چک باکس میتونین بصورت زیر عمل کنید :

در بالا چک باکس رو هم تیک زدیم و هم غیر فعال کردیم.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram