jquery - inpitassembly

支持状况

谷歌	火狐	Safari	IE	Edge
支持	支持	支持	不支持	支持

安装

CDN

<!-- jquery 2.1~3.0+ -->				
<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.7/inpitassembly.js"></script>
	
为更新缓存的inpitassembly，在地址后加入时间戳，
cdn提供的缓存为30天,当然你也可以随时更改inpitassembly版本，参考下方的版本状况:
					
						
							1.0 - 1.3
							1.4
							2.0
							2.1 - 2.2
							2.3 - 2.5
							2.6
							2.7
						
						
							未公布
							稳定
							未公布
							不稳定
							稳定
							不稳定
							不稳定

调用

HTML

<!-- 单选 -->
<div type="inpit/assembly" formname="A_">
	<div class="li" checkbox>
		<div name="A" value="A">
			<h2>A</h2>
		</div>
	</div>
</div>
<!-- 复选 -->
<div type="inpit/assembly" formname="B_">
	<div class="li" radio>
		<div name="B" value="B">
			<h2>B</h2>
		</div>
	</div>	
</div>

js

$(document).ready(function(){
	//【例子1】
	
	$("#id,.class,body,[formname]").inpitassembly();	// 特定
	
	$(document,window).inpitassembly();	// 全局
	
	// * ================ 
	// * 或
	// * ================
	
	//【例子2】
	// 为承载1.0版本的声明方式你依旧可以这样
	
	$("[type='inpit/assembly']").inpitassembly();
})

inpitassembly 属性

参数

值

默认值

注释

兼容

event

事件

click

注册事件方式

2.4

selected

string

active

选中记号

2.3

selected_data

数组

标记初始值，如果data:"all",表单下所有选项都会选中

2.3

ischeck_

true / false

true

是否初始选项，如果复选带有min声明，将取min值前面作为默认选项

2.0

ischeck_class

true / false

false

该属性需要在ischeck_=true状态下可选，在标签中已经设置若干默认值与min="2"情况下，阻止ischeck_自动再标记初始值，这防止出现初始选项应该是D/F，而不是变成A/B/D/F

2.0

min(event,min)

方法事件

回调当前表单对象/最小值

2.3

max(event,min)

方法事件

回调当前表单对象/最大值

2.3

on(state,event)

方法事件

监听事件,state状态,event将返回对象与所有绑定的事件

	参数	注释	兼容
state(string)	状态
	add	勾选	2.4
	rem	移除状态	2.4
	disabled	禁用	2.4
event	对象
	o.this.obj	对象	2.4
	o.this.parent	父对象	2.4
	o.this.length	对象的数量	2.4
	o.this.type	组件类型	2.5
	o.this.checked	组件状态	2.6
	o.this.val	值	2.6
	事件
	o.events.event	绑定的事件	2.4
	o.events.length	绑定事件数量	2.4

2.4

success

方法事件

一旦组件初始完成则执行success方法下内容
使用check_result()时，调用所有注册过组件的结果一一返回到此处[2.6]

2.5

MIN和MAX回调事件

js

					
// 最小值和最大值声明的条件下(它们是数字类型)超出条件范围时回调事件(对象和数值)				
					
$(document).ready(function(){
	$("[type='inpit/assembly']").inpitassembly({
		max: function(e, o) {
			alert("你选择的" + $(e.this.obj).parents("[formname]").attr("formname") + "表单大于" + o)
		},
		min: function(e, o) {
			alert("你选择的" + $(e.this.obj).parents("[formname]").attr("formname") + "表单少于" + o)
		}
	});	
})

默认初始值

初始单选

小猫

折耳猫

小狗

哈士奇

鼠

仓鼠

鸟

猫头鹰

初始复选

饮料

可口可乐

果汁

橙汁

奶制

抹茶奶盖

饮料

七喜

js

$("[type='inpit/assembly']").inpitassembly({
	
	// * ================ 
	// * selected_data
	// * formname : 表单名字(可选)
	// * name : 选项名称
	// * data : 初始数据,列如["1-1","1-2","1-3"]
	// * ================			
	
	selected_data:[{
			formname:"like",	
			name:"like_a", 			
			data:["仓鼠"]			// 注意单选仅有一个选项
		},
		{
			name:"food_a",
			data:["橙汁"，"七喜"]
		},			
		{
			name:"",
			data:"all"
		}]
});


初始值会在渲染完毕后对选项标识，记号由selected来决定，如果它没有传进inpitassembly中，inpitassembly将使用默认的'active'类名标记.

	Q:已设置初始值，初始值未生效
	1.检查selected_data中的name(也就是表单名)是否初始所在表单之内，若非同一个，再创建一个inpitassembly的初始方法.
	2.当前状态name是否处于节点树上；若动态渲染inpitassembly表单，在完成节点树完成后创建初始方法.
		formname指表单名称，在你创建控件时必要的属性，主要用于区分其他表单内选项'name'值，但在初始值中它是非必选可不填；name指选项名称，它在初始值中必须存在

单选

50G

硬盘

500G

硬盘

1T

硬盘

10T

硬盘

HTML

<!--标准的单选框，声明为checkbox-->

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

三个合并一起单选

苹果

水果

西红柿

水果

白菜

蔬菜

青菜

蔬菜

青瓜

蔬菜

松树

植物

杨柳

植物

HTML

<!--同一表单不同域的单选组件，通过NAME识别是否同一个表单内，因此你必须注意它是区分大小写的，当然NAME可中文,比如上方B-C内的NAME值为“变态”-->
 
<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

A2

A3

A4

A5

A6

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

A2

A3

A4

A5

A6

A7

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

HTML

	<div max="5" 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>

选项至少3个

A1

A2

A3

A4

A5

A6

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

A2

A3

A4

A5

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

A3

A4

A4-disabled

A5

A5-disabled

复选

A3

A3-disabled

A4

A4-disabled

A1

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
}

初始化禁用

JS

$().inpitassembly("disabled",[{
	
	// * ==========================
	// * 这里指域(也就是选项中的name)，非表单formname
	// * ==========================
	
	name:"demonstration",
	data:["A4","A5"]
}])

额外Class

G1

G2

G3

点击我查看

G4

G5

点击我，解除模糊


增加额外CLASS类不会影响标记，非标记状态下其他CLASS将保留，反则CLASS声明释放.

[更新]返回结果

在控件中获取表单结果使用check_result()方法取得，方法中提供了一个参数，仅仅向内部传递'方法'(下方表格),当然inpitassembly是可以指定获取表单，如果你需要这样做，则在check_result()方法传入表单名称或是表单下任意对象，参考下面"返回规则"说明.

变动注意

现在'check_result'似乎有点不同，新版本中返回结果也会在success中返回，你依旧可以在任意地方使用check_result返回的结果直接处理；也可以像这样在success中注册获取结果按钮，再通过success回调内容处理。

JS

$().inpitassembly({
	success:function(res){
		// * =====================
		// * 注册按钮
		// * =====================
		
		// 为避免重复注册可以通过判断success内回调内容是否定义来决定
		
		$("button").on("tag click",()=>{
			check_result("radioa")
		})
		
		// * =====================
		// * 当触发绑定的button事件处理success回调内容
		// * 处理res变量结果
		// * =====================
		for(i of ...res.data.data){
			//...
		}
	}
});

JS

$("[type='inpit/assembly']").find("button").click(function(){
	
	// * ==========================
	// * [2.6]不在推荐使用check_result($(this))
	// * 向check_result方法传触发事件的本身
	// * ==========================
	var val = check_result($(this));
	
	// * ==========================
	// * 或
	// * 表单名字
	// * ==========================
	var val = check_result("formname");	
	
	// 输出下方"对象"格式
	console.log(val)
})
					
						
							
							方式
							注释
						
						
							obj
							$(this)
							【不推荐】请使用JQ中的$(this),非this
						
						
							表单名称
							它是字符串且不能含有空格

	方式	注释
obj	$(this)	【不推荐】请使用JQ中的$(this),非this
表单名称	它是字符串且不能含有空格

对象

{
	data:{
		/ * ==========================
		// * data : 结果
		// * ==========================		
		data:[...],
		parameter: ()=>{},()=>{},
		obj: Object
	}
}
					
						
							参数
							值
							注释
						
						
							val
							对象
							
						
						
							val[0].data
							数组
							返回选中的选项
						
						
							val[1].parameter
							方法对象
							inpit/assembly方法与inpit/assembly初始值
						
						
							val[2].obj
							方法对象
							返回inpit/assembly对象

参数	值	注释
val	对象
val[0].data	数组	返回选中的选项
val[1].parameter	方法对象	inpit/assembly方法与inpit/assembly初始值
val[2].obj	方法对象	返回inpit/assembly对象

若干表单

复选表单ack_two

A1

A2

A3

A4

单选表单ack_three

A1

A2

A3

A4

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

规定了组件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);
});

重叠表单

复选表单inside_onelist

A1

A2

A3

单选表单inside_twolist

A1

A2

A3

A4

单选表单inside_threelist

A1

A2

A3

A4

获取外部inside_onelist值

复选表单ack_three

A1

A2

A3

A4

内部选项约定

可重叠无数个，在创建这样重叠情况下唯一需要注意formname和name避免重复,谨慎管理它们表单归属,控件规定含name和value同时存在为选项

返回规则

JS

$().click(function(){
	
	// * ================ 
	// * 为了让check_result()知道获取是哪一个表单，将要要提供*表单下任意的DOM*，比如：
	// * ================	
	check_result( $(this) || $(this).find("*") ); // 如果你不太清楚$(this)是谁，推荐使用下面的方法
	check_result("表单名称");
});

// * ================ 
// * 通常在统一的情况下我们会这样写
// * ================	
$("[type='inpit/assembly']").find("button").click(function(){
	alert( check_result($(this)).data.data );
});

绑定事件

单选选项：mouseenter

F-1-1

F-1-2

复选选项：mouseover

F-1-1

F-1-2

单选选项：dblclick

F-2-1

F-1

F-2-2

复选选项：dblclick

F-1-1

F-1-2

你可以对表单绑定事件作出更改，inpit/assembly的默认绑定为单击事件，通过event来设置

JS

$().inpitassembly({event:"mouseout"});	

$().inpitassembly({event:"dblclick"});

// * =====================
// * 当然你也可以同时绑定多个事件
// * 为了确保inpitassembly在移动设备上可用，可用绑定tag 和 click
// * =====================

$().inpitassembly({event:"tag click"});

监听表单-on()

表单cp_four

单选

F-1-1

F-1-2

复选

F-1-1

F-1-2

表单cp_five

单选

F-1-1

F-1-2

复选

F-1-1

F-1-2

JS

通过on方法返回事件，在inpitassembly方法内on会回调事件以方便监听表单下发生什么.
在inpitassembly中，包含2个参数，第一个参数返回状态(add/rem/disabled);第二个参数返回对象，如下：

$().inpitassembly({
	on:function(e,o){
		$(".cp_fiveon").prepend("<div>" + (function(){
			let val = e;
			if(val == "add")
				val = "选中" + o.this.obj.attr("value");
			else if(val == "rem")
				val = "移除";
			else if(val == "disabled")
				val = "选项禁用";
				
			return val;
		})() + "，所属" + (function(){
			let type = o.this.type;
			if(type == "radio"){
				type = "(复选)"
			}else if(type == "checkbox"){
				type = "(单选)"
			}
			return type;
		})() + "表单：" + o.this.parent.attr("formname") +  "</div>"); 
	}
});

对象

this:{	
	obj:Object, 			// 当前对象
	parent:Object,			// 父对象
	type:"",			// checkbox或radio
	length:0 			// 对象的数量
},
events:{	
	event:event,			// 绑定的事件
	length:0 			// 绑定事件数量
}

动画

单选

A1

A2

A3

A4

复选

B1

B2

你可以通过e下对象转为jq对象类型使用过渡动画,配合animate等方法使用；在2.6版本中on、max、min都已经返回统一结构对象以便你处理.

JS

on: (o) => {
	$(o.this.obj[0]).fadeToggle()
}，
max: function(e, o){
	$(e.this.obj[0]).animate({
		opacity:'0.5'
	});
},
min: function(e, o){
	$(e.this.obj[0]).animate({
		opacity:'0.5'
	});
}

其他

单选

F-1-1

F-1-2

F-1-3

复选

F-1-1

F-1-2

[新增]正则

JS
			
// * ====================
// * 兼容:2.7
// * 如果区配符合特定要求选项，可通过模糊正则取得
// * ====================			

$().inpitassembly("add",[{
	name:"",
	data:[/的/g,"A-1"]
	
	// 标记所有VALUE含“的”的选项
}])

// * ====================
// * 假如包含多个筛选要求可以这样写:
// * ====================		

$().inpitassembly("add",[{
	name:"",
	data:[/的/g,/你/g]
	
	// * ====================
	// * 含“的”与“你”选项结果
	// * ====================		
}])

删除选项

JS
			
// * ====================
// * 兼容:2.4
// * 删除选项，这里是指删除整个DOM节点	
// * ====================			

$().inpitassembly("delete",[{
	name:"",
	data:[""]
}])

移除选项

JS

// * ====================
// * 兼容:2.5
// * 移除选项，选项不在是选中状态中
// * ====================			

$().inpitassembly("remove",[{
	name:"",
	data:[""]
}])

标记选项

JS

// * ====================
// * 兼容:2.5
// * 标记选项
// * 谨慎在单选上使用
// * ====================							
						
$().inpitassembly("add",[{
	name:"",
	data:[""]
}])

禁用选项

JS

// * ====================
// * 兼容:2.4
// * 禁用特定或多个选项
// * ====================	

$().inpitassembly("disabled",[{
	name:"",
	data:[""]
}])

[新增]解除禁用

JS

// * ====================
// * 兼容:2.7
// * 解除禁用或多个选项
// * ====================	

$().inpitassembly("remdisabled",[{
	name:"",
	data:[""]
}])

[新增]禁用开关

JS

// * ====================
// * 兼容:2.7
// * 禁用开关按钮
// * ====================	

$().inpitassembly("togdisabled",[{
	name:"",
	data:[""]
}])

选项开关

JS

// * ====================
// * 兼容:2.5
// * 启动/禁用开关 
// * 谨慎在单选上使用
// * ====================							
$().inpitassembly("toggle",[{
	name:"",
	data:[""]
}])

1.0 - 1.3	1.4	2.0	2.1 - 2.2	2.3 - 2.5	2.6	2.7
未公布	稳定	未公布	不稳定	稳定	不稳定	不稳定