初始

现在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);
});

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

—— 感谢你的阅读

更多源码：站长图库