Labelauty–jQuery單選框/複選框美化外掛分享

首頁

web前端

js教程

Labelauty–jQuery單選框/複選框美化外掛分享_jquery

May 16, 2016 pm 03:37 PM

jquery js

本文實例講述了Labelauty–jQuery單選框/複選框美化插件，分享給大家供大家參考。具體如下：
Labelauty–jQuery單選框/複選框美化插件，基於jQuery的一個非常小巧的插件，它除了能夠實現單選框/複選框原本的選中、未選中、禁用等功能外，還能夠設置選中和未選取的文字資訊、標籤的最小寬度等。
運行效果圖：-------------------------------查看效果------- -----------------------------

具體程式碼如下

&lt;head&gt;
&lt;title&gt;Labelauty–jQuery单选框/复选框美化插件&lt;/title&gt;
&lt;link rel="stylesheet" href="css/jquery-labelauty.css"&gt;
&lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery-labelauty.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- 代码 开始 --&gt;
&lt;h1&gt;jQuery单选框/复选框美化插件演示&lt;/h1&gt;
&lt;h3&gt;您的职业（单选框）&lt;/h3&gt;
&lt;ul class=""&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="视觉设计师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="交互设计师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="前端工程师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="数据分析师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" disabled data-labelauty="不可用"&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;hr&gt;

&lt;h3&gt;您擅长的技能（复选框）&lt;/h3&gt;
&lt;ul class=""&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="CSS"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="JavaScript"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="SEO"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="PHP"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="JAVA"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty=".NET"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
$(function(){
 $(':input').labelauty();
});
&lt;/script&gt;
&lt;!-- 代码 结束 --&gt;

&lt;div style="text-align:center;margin:50px 0"&gt;
&lt;p style="margin:20px 0"&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

登入後複製

希望本文所述對大家的jQuery程式設計有所幫助。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn