初始

现在inpit/assembly并不需要一定声明"type="inpit/assembly"(标签中)作为inpitassembly的容器,而是通过inpitassembly方法来启动。

当然为承载1.0版本的声明方式你依旧可以这样写,例子2:

		

CDN

<!-- jquery 2.1 --> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script> <!-- inpit/assembly 2.0 + --> <script type="text/javascript" src="http://cdn.cabbagelol.net/inpitassembly/2.3/inpitassembly.js"></script>

为更新缓存的inpitassembly,可以在地址后加入时间戳(?time=20171111020000)

当然你也可以随时更改inpitassembly版本:

		

CDN

<!-- inpit/assembly 1.4 --> <script type="text/javascript" src="http://cdn.cabbagelol.net/inpitassembly/1.4/inpitassembly.js"></script> <!-- inpit/assembly 2.1 ~ 2.3 --> <script type="text/javascript" src="http://cdn.cabbagelol.net/inpitassembly/2.3/inpitassembly.js"></script>
		

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。

单选

50G

硬盘

500G

硬盘

1T

硬盘

10T

硬盘

标准的单选框,声明为checkbox

		

HTML

<div checkbox> <div name="a" value="50g"> <h2>50G</h2> <p>硬盘</p> </div> <div name="a" value="500g"> <h2>500G</h2> <p>硬盘</p> </div> <div name="a" value="1t"> <h2>1T</h2> <p>硬盘</p> </div> <div name="a" value="10t"> <h2>10T</h2> <p>硬盘</p> </div> </div>

三个合并一起单选

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

<div checkbox> <!--b-a--> <div name="b-a" value="B-a-1"> <h2>B-A-1</h2> <p>B-A-1</p> </div> <div name="b-a" value="B-a-2"> <h2>B-A-2</h2> <p>B-A-2</p> </div> <!--b-b--> <div name="b-b" value="B-b-1"> <h2>B-B-1</h2> <p>B-B-1</p> </div> <div name="b-b" value="B-b-2"> <h2>B-B-2</h2> <p>B-B-2</p> </div> <div name="b-b" value="B-b-3"> <h2>B-B-3</h2> <p>B-B-3</p> </div> <!--b-c--> <div name="变态" value="B-c-1"> <h2>B-C-1</h2> <p>B-C-1</p> </div> <div name="变态" value="B-c-2"> <h2>B-C-2</h2> <p>B-C-2</p> </div> </div>

复选

A1

A1

A2

A2

A3

A3

A4

A4

A5

A5

A6

A6

A7

A7

标准的复选组件,声明为radio;复选含min与max(最小值和最大值)

		

HTML

<div radio> <div name="d-a" value="A1"> <h2>A1</h2> <p>A1</p> </div> <div name="d-a" value="A2"> <h2>A2</h2> <p>A2</p> </div> <div name="d-a" value="A3"> <h2>A3</h2> <p>A3</p> </div> <div name="d-a" value="A4"> <h2>A4</h2> <p>A4</p> </div> <div name="d-a" value="A5"> <h2>A5</h2> <p>A5</p> </div> <div name="d-a" value="A6"> <h2>A6</h2> <p>A6</p> </div> <div name="d-a" value="A7"> <h2>A7</h2> <p>A7</p> </div> </div>

最多5个

A1

A1

A2

A2

A3

A3

A4

A4

A5

A5

A6

A6

A7

A7

增加选项

动态增加数据

向radio组件增加max声明,可对复选组件可选最大个数

		

HTML

<div max="3" radio> <div name="d-b" value="A1"> <h2>A1</h2> <p>A1</p> </div> <div name="d-b" value="A2"> <h2>A2</h2> <p>A2</p> </div> <div name="d-b" value="A3"> <h2>A3</h2> <p>A3</p> </div> <div name="d-b" value="A4"> <h2>A4</h2> <p>A4</p> </div> <div name="d-b" value="A5"> <h2>A5</h2> <p>A5</p> </div> <div name="d-b" value="A6"> <h2>A6</h2> <p>A6</p> </div> <div name="d-b" value="A7"> <h2>A7</h2> <p>A7</p> </div> <div class="add"> <h2>增加选项</h2> <p>动态增加数据</p> </div> </div>

至少3个

A1

A1

A2

A2

A3

A3

A4

A4

A5

A5

A6

A6

A7

A7

向radio组件增加min声明,可对复选组件可选最小个数

		

HTML

<div min="3" radio> <div name="d-c" value="A1"> <h2>A1</h2> <p>A1</p> </div> <div name="d-c" value="A2"> <h2>A2</h2> <p>A2</p> </div> <div name="d-c" value="A3"> <h2>A3</h2> <p>A3</p> </div> <div name="d-c" value="A4"> <h2>A4</h2> <p>A4</p> </div> <div name="d-c" value="A5"> <h2>A5</h2> <p>A5</p> </div> <div name="d-c" value="A6"> <h2>A6</h2> <p>A6</p> </div> <div name="d-c" value="A7"> <h2>A7</h2> <p>A7</p> </div> </div>

最多选择3个,至少1个

A1

A1

A2

A2

A3

A3

A4

A4

A5

A5

A6

A6

一旦同时声明min和max,复选的个数将在min和max之间

		

HTML

<div min="3" radio> <div name="d-c" value="A1"> <h2>A1</h2> <p>A1</p> </div> <div name="d-c" value="A2"> <h2>A2</h2> <p>A2</p> </div> <div name="d-c" value="A3"> <h2>A3</h2> <p>A3</p> </div> <div name="d-c" value="A4"> <h2>A4</h2> <p>A4</p> </div> <div name="d-c" value="A5"> <h2>A5</h2> <p>A5</p> </div> <div name="d-c" value="A6"> <h2>A6</h2> <p>A6</p> </div> <div name="d-c" value="A7"> <h2>A7</h2> <p>A7</p> </div> </div>

新增禁用

单选

A1

A1

A3

A3

A4

A4-disabled

A5

A5-disabled

复选

A3

A3-disabled

A4

A4-disabled

A1

A1

A2

A2

就像平常一样,禁用组件仅仅在该标签上声明disabled即可,此时你再无法选中,为了让该按钮显示不可用,可用加入下方样式表。

		

HTML

<div class="li" radio> <div name="disabled" value="A1"> <h2>A1</h2> <p>A1</p> </div> <div name="disabled" value="A2"> <h2>A2</h2> <p>A2</p> </div> <div name="disabled" value="A3" disabled> <h2>A3</h2> <p>A3-disabled</p> </div> <div name="disabled" value="A4" disabled> <h2>A4</h2> <p>A4-disabled</p> </div> <div name="disabled" value="A5"> <h2>A5</h2> <p>A5</p> </div> <div name="disabled" value="A6"> <h2>A6</h2> <p>A6</p> </div> </div>
		

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对象

多个type='inpit/assembly'

复选表单ack_two

A1

A1

A2

A2

A3

A3

A4

A4

单选表单ack_three

A1

A1

A2

A2

A3

A3

A4

A4

你将可以在页面上共存多个inpit/assembly,但你必须注意几个要点:

  1. 规定了组件name仅仅区分inpit/assembly域,如果不同域之间下选项name值如果还是相等,那么它依旧认为在同一选择表单中,当然inpit/assembly是故意保留这样设定。你仅仅为选项的name命名新值即可
		

HTML

<div type='inpit/assembly' name="ack_two"> <h4>复选表单ack_two</h4> <div class="li" min="2" radio> <div name="two-a" value="a-1"> <h2>A1</h2> <p>A1</p> </div> <div name="two-a" value="a-2"> <h2>A2</h2> <p>A2</p> </div> <div name="two-a" value="a-3"> <h2>A3</h2> <p>A3</p> </div> <div name="two-a" value="a-4"> <h2>A4</h2> <p>A4</p> </div> </div> <button>获取ack_two表单:</button> </div> <div type='inpit/assembly' name="ack_three"> <h4>单选表单ack_three</h4> <div class="li" checkbox> <div name="ack_three-a" value="a-1"> <h2>A1</h2> <p>A1</p> </div> <div name="ack_three-a" value="a-2"> <h2>A2</h2> <p>A2</p> </div> <div name="ack_three-a" value="a-3"> <h2>A3</h2> <p>A3</p> </div> <div name="ack_three-a" value="a-4"> <h2>A4</h2> <p>A4</p> </div> </div> <button>获取ack_three表单</button> </div>
		

JS

$("[type='inpit/assembly']").inpitassembly({ selected:"ack" }); $("[type='inpit/assembly']").find("button").click(function(){ var val = check_result($(this)); alert(val[0].data); });

新增内部创建新的inpit/assembly

复选表单inside_onelist

A1

A1

A2

A2

A3

A3

单选表单inside_twolist

A1

A1

A2

A2

A3

A3

A4

A4

单选表单inside_threelist

A1

A1

A2

A2

A3

A3

A4

A4

获取外部inside_onelist值

复选表单ack_three

A1

A1

A2

A2

A3

A3

A4

A4

内部选项约定

你能在type='inpit/assembly'内部再创建无数个type='inpit/assembly',你唯一需要注意的是formname和选项的name,虽然允许创建内部但表单(type='inpit/assembly')无法作为一个选项存在,因为type='inpit/assembly'会跳过非选项内容,type='inpit/assembly'规定包含name和value同时存在为选项


返回规则
		

JS

$().find("button").click(function(){ // * ========================== // * check_result // * ========================== var val = check_result($(this)); console.log(val); });

我们向check_result()传递了一个$(this),要知道type='inpit/assembly'会取当前点击的父域,也就是当前这个表单下所有选中,因此我们点击"inside_threelist"按钮则返回inside_threelist表单数据,点击"inside_twolist"按钮则返回inside_twolist表单和inside_threelist表单数据,这是因为inside_twolist表单下包含inside_threelist表单,它会作为inside_twolist表单的一份子

假如我传的不是当前表单,而是其他表单?

		

JS

$().find("button").click(function(){ var val = check_result("ack"); console.log(val); }); // * ================ // * 或是 // * 二种方法都一样能获取特定表单数据,唯一不同是传的是对象时你需要在后面.find("*"),因为type='inpit/assembly'取父域,如果你传一个表单名字,那么也会得到结果 // * ================ $().click(function(){ var val = check_result( $("[formname=ack]").find("*") ); console.log(val); });

通过上方例子你可以在当前表单获取另一个域下值,它们的是相等的

—— 感谢你的阅读

适用浏览器:360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。

来源:站长素材