cari

Rumah >hujung hadapan web >tutorial js >Labelauty–butang radio jQuery/pemalam pengindahan kotak semak sharing_jquery

Labelauty–butang radio jQuery/pemalam pengindahan kotak semak sharing_jquery

WBOY
WBOYasal
2016-05-16 15:37:571732semak imbas

Contoh dalam artikel ini menerangkan pemalam pengindahan butang radio Labelauty–jQuery/kotak semak, yang dikongsi dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Labelauty – pemalam pengindahan butang radio/kotak semak jQuery, pemalam yang sangat kecil berdasarkan jQuery Selain merealisasikan fungsi asal yang dipilih, tidak dipilih, dilumpuhkan dan lain-lain fungsi butang radio/kotak semak, ia juga boleh menetapkan pilihan. dan Maklumat teks yang tidak dipilih, lebar minimum label, dsb.
Paparan operasi: ---------------------------------Lihat kesan---- --------------------------

Kod khusus adalah seperti berikut

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

<hr>

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

<div style="text-align:center;margin:50px 0">
<p style="margin:20px 0"></p>
</div>
</body>
</html>

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Perbincangan ringkas tentang acara Sentuhan kemahiran javascript_javascriptArtikel seterusnya：Perbincangan ringkas tentang acara Sentuhan kemahiran javascript_javascript

Artikel berkaitan

Lihat lagi