JQ表单选择插件

所属分类:输入-选择框

 54044  310  查看评论 (6)
分享到微信朋友圈
X
JQ表单选择插件 ie兼容7

单选按钮:

html代码:

<!--单选按钮示例-->
<div class="radio" id="radio">
   <input
type="hidden" name="" class="radio-value" value="">

   <ul
class="options clear-float">
       <li
data-value="0" class="checked">单选按钮1</li>
       <li
data-value="1">单选按钮2</li>
       <li
data-value="2">单选按钮3</li>
   </ul>
</div>
<!--单选按钮示例-->

javascript代码调用:

$("#radio").jRadio();

可选参数:

// 默认参数
var defaults = {
    valueSelector: ".radio-value",  // 存放radiovalue值的input表单的css选择器
   
itemSelector: ".options > li", // radio项的css选择器
   
checkedClass: "checked",    // 选择状态的类名
   
completeFunction: function () {}    // 回调函数
};


复选框:

html代码:

<!--复选框示例-->
<div class="checkbox" id="checkbox">
   <ul
class="options clear-float">
       <li
class="checked" data-value="0">
           <input
type="hidden" name="" class="checkbox-value" value="">
           <i
class="checkbox-icon"></i>
           
复选框1
       </li>
       <li
data-value="1">
           <input
type="hidden" name="" class="checkbox-value" value="">
           <i
class="checkbox-icon"></i>
           
复选框2
       </li>
       <li
data-value="2">
           <input
type="hidden" name="" class="checkbox-value" value="">
           <i
class="checkbox-icon"></i>
           
复选框3
       </li>
   </ul>
</div>
<!--复选框示例-->

javasctipt代码调用:

$("#checkbox").jCheckBox();

可选参数:

// 默认参数
var defaults = {
    valueSelector: ".checkbox-value",  // 存放每一项checkboxvalue值的input表单的css选择器
   
itemSelector: ".options > li", // checkbox项的css选择器
   
checkedClass: "checked",    // 选择状态的类名
   
completeFunction: function () {}    // 回调函数
};


下拉选择菜单:

html代码:

<!--下拉select示例-->
<div class="select clear-float" id="select">
   <div
class="select-view">
       <input
type="hidden" name="" class="select-value" value="">
       <span
class="select-text">请选择...</span>
       <i
class="select-icon"></i>
   </div>

   <ul
class="options">
       <li
data-value="0">下拉菜单1</li>
       <li
data-value="1">下拉菜单2</li>
       <li
data-value="2">下拉菜单3</li>
   </ul>
</div>
<!--下拉select示例-->

javascript代码调用:

$("#select").jSelect();

可选参数:

// 默认参数
var defaults = {
    viewSelector: ".select-view",   // select选择层容器css选择器
   
valueSelector: ".select-value", // 存放selectvalue值的input表单的css选择器
   
textSelector: ".select-text",  // select显示文本的css选择器
   
iconSelector: ".select-icon", // selecticoncss选择器
   
iconClickAble: true,    // 是否使用点击icon展示下拉项

   
itemContainerSelector: ".options",    // 下拉层css选择器
   
itemSelector: ".options > li",   // 下拉项css选择器

   
completeFunction: function () {}    // 回调函数
};


以上所有的样式均可自己通过css编写,html代码结构一直便可。

相关插件-选择框

强大的下拉框美化插件

Select2是一款基于jQuery的专门针对下拉框的美化插件
  选择框
 50483  344

js模拟ios联动插件iosselect

html下拉菜单select在安卓和IOS下表现不一样,iosselect正是为统一下拉菜单样式而生
  选择框
 30759  356

单选框和复选款

漂亮的单选框和复选框,调用简单,只需要引入js即可使用
  选择框
 23378  318

Bootstrap Switch 开关控制插件

Bootstrap 开关(switch)控件
  选择框
 74040  345

讨论这个项目(6)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Linux 0
    2022/5/12 17:16:00
    别下 跟新版jq不兼容 太老了 回复
    Climber 0
    2018/12/19 16:19:49
    ???没效果呢??? 回复
    Gavin 0
    2016/7/19 16:07:32
    这个也要钱啊......
        流弊的蛋0
        2016/7/19 16:07:14
        呃。当初年少不懂事,后面想改都改不了了。
    回复
    陈成达 0
    2016/7/5 10:07:31
    Wj0212 0
    2016/4/12 11:04:00
    值得借鉴,很实用,赞赞!!! 回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复