初始
现在inpit/assembly并不需要一定声明"type="inpit/assembly"(标签中)作为inpitassembly的容器,而是通过inpitassembly方法来启动。
当然为承载1.0版本的声明方式你依旧可以这样写,例子2:
CDN
为更新缓存的inpitassembly,可以在地址后加入时间戳(?time=1111020000)
当然你也可以随时更改inpitassembly版本:
CDN
js
$(document).ready(function(){
//【例子1】
$("#cp").inpitassembly({
selected:"ack",
ischeck_:true,
ischeck_class:false
});
// * ================
// * 或是
// * 你必须注意无论对象是谁,都依旧需要在对象声明一个formname
// * 2.2版本以上,name变动为formname,这为区分域命名,而非选项的name
// * ================
//【例子2】
$("[type='inpit/assembly']").inpitassembly({
selected:"ack",
ischeck_:true,
ischeck_class:false
});
// * ================
// * 或
// * ================
//【例子3】
$(document).inpitassembly({});
})
注意到了么,似乎和之前调用方法不一样,现在通过$().inpitassembly({})初始inpitassembly控件,再不是直接在标签内声明"type="inpit/assembly"即可使用,因此在使用inpitassembly前必须初始控件.
参数
值
默认值
注释
兼容
selected
string
active
选中记号
2.3
selected_data
数组
标记初始值,如果data:"all",表单下所有选项都会选中
2.3
ischeck_
true / false
true
是否初始选项,如果复选带有min声明,将取min值前面作为默认选项
2.0
ischeck_class
true / false
false
在标签中已经设置若干默认值与min="2"情况下,关闭初始值,这防止出现默认选项应该是D/F,而不是变成A/B/D/F
2.0
min
方法事件
回调当前表单对象/最小值
2.3
max
方法事件
回调当前表单对象/最大值
2.3
新增MIN和MAX回调事件
inpit/assembly提供选项数量等于min=""max="",触发min/max回调事件,回调中包含一个对象和数值
js
$(document).ready(function(){
$("[type='inpit/assembly']").inpitassembly({
min:function(event,min){
// 触发少于min值
alert("你选择的" + event.attr("formname") + "表单少于" + min);
},
max:function(event,max){
// 触发少于max值
alert("你选择的" + event.attr("formname") + "表单大于" + min);
}
});
})
新增默认初始值
js
$(document).ready(function(){
$("[type='inpit/assembly']").inpitassembly({
// * ================
// * selected_data
// * name : 表单名称
// * data : 初始数据,列如["1-1","1-2","1-3"]
// * ================
selected_data:[
{
name:"", // formname名字
data:["可爱","女装"]// 初始选项
},
{
name:"",
data:"all"
}
// * ================
// * 数据更加复杂怎么办?
// * 凉拌,请处理好最后初始值
// * ================
]
});
})
初始值会在渲染完毕后对选项标识,记号由selected来决定,如果它没有传进inpit/assembly中,inpit/assembly将使用默认的active。
Q:为何明明设置初始值,但并没有设置?
1.检查你的selected_data中的name(也就是表单名)是否初始所在域之内,如果不是同一个,那么先再创建一个inpit-assembly设置初始值。
2.确定你设置name是否存在页面上?如果你是动态创建的inpit/assembly表单,那么请先创建完整DOM节点再来初始inpit/assembly。
Q:如何全选初始值?
data:"all"
单选
50G
硬盘
500G
硬盘
1T
硬盘
10T
硬盘
标准的单选框,声明为checkbox
HTML
50G
硬盘
500G
硬盘
1T
硬盘
10T
硬盘
三个合并一起单选
B-A-1
B-A-1
B-A-2
B-A-2
B-B-1
B-B-1
B-B-2
B-B-2
B-B-3
B-B-3
B-C-1
B-C-1
B-C-2
B-C-2
合并在同一个区域内单选组件,通过NAME识别是否同一个表单内,因此你必须注意它是区分大小写的,当然NAME可中文,比如上方B-C内的NAME值为“变态”
HTML
B-A-1
B-A-1
B-A-2
B-A-2
B-B-1
B-B-1
B-B-2
B-B-2
B-B-3
B-B-3
B-C-1
B-C-1
B-C-2
B-C-2
复选
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
标准的复选组件,声明为radio;复选含min与max(最小值和最大值)
HTML
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
最多5个
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
增加选项
动态增加数据
向radio组件增加max声明,可对复选组件可选最大个数
HTML
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
增加选项
动态增加数据
至少3个
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
向radio组件增加min声明,可对复选组件可选最小个数
HTML
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
最多选择3个,至少1个
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
一旦同时声明min和max,复选的个数将在min和max之间
HTML
A1
A1
A2
A2
A3
A3
A4
A4
A5
A5
A6
A6
A7
A7
新增禁用
单选
A1
A1
A3
A3
A4
A4-disabled
A5
A5-disabled
复选
A3
A3-disabled
A4
A4-disabled
A1
A1
A2
A2
就像平常一样,禁用组件仅仅在该标签上声明disabled即可,此时你再无法选中,为了让该按钮显示不可用,可用加入下方样式表。
HTML
A1
A1
A2
A2
A3
A3-disabled
A4
A4-disabled
A5
A5
A6
A6
CSS
*[disabled] {
opacity: .3;
cursor:no-drop !important
}
额外Class
G1
G1
G2
G2
G3
点击我查看
G4
G4
G5
点击我,解除模糊
你可以向选项添加额外Class,虽然不太重要;inpit/assembly会保留选中记号外的Class,因此可单独为每个选项引用一个Class或多个。
返回
注册一个获取事件,为获取该域的值,标签需要放置在域内而不在外面,那么check_result($(this))返回一个对象回来
JS
$("[type='inpit/assembly']").find("button").click(function(){
// * ==========================
// * 向check_result方法传本身
// * 如果你忘记,inpit/assembly依旧会提醒你
// * ==========================
var val = check_result($(this));
// val会输出下方"对象"格式
console.log(val)
})
对象
[{data:[...]}, {parameter: ()=>{},()=>{}}, {obj: Object}]
参数
值
注释
val
对象
返回inpit/assembly方法与inpit/assembly初始值、域
val[0].data
数组
返回选中的选项
val[1].parameter
方法对象
inpit/assembly方法与inpit/assembly初始值
val[2].obj
方法对象
返回inpit/assembly对象
获取
如果觉得《html选择框美化代码 jQuery单选框复选框美化代码 - A5源码》对你有帮助,请点赞、收藏,并留下你的观点哦!