html选择框美化代码,jQuery单选框复选框美化代码 - A5源码

缺乏、安全感 2022-10-06 04:00 229阅读 0赞

初始

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

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

CDN

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

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

CDN

$(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回调事件，回调中包含一个对象和数值

$(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);

\});

\})

新增默认初始值

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

硬盘

10T

硬盘

标准的单选框，声明为checkbox

HTML

## 50G ##

硬盘

## 500G ##

硬盘

## 1T ##

硬盘

## 10T ##

硬盘

三个合并一起单选

B-A-1

B-A-2

B-B-1

B-B-2

B-B-3

B-C-1

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

复选

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

HTML

## A1 ##

## A2 ##

## A3 ##

## A4 ##

## A5 ##

## A6 ##

## A7 ##

最多5个

增加选项

动态增加数据

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

HTML

## A1 ##

## A2 ##

## A3 ##

## A4 ##

## A5 ##

## A6 ##

## A7 ##

## 增加选项 ##

动态增加数据

至少3个

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

HTML

## A1 ##

## A2 ##

## A3 ##

## A4 ##

## A5 ##

## A6 ##

## A7 ##

最多选择3个,至少1个

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

HTML

## A1 ##

## A2 ##

## A3 ##

## A4 ##

## A5 ##

## A6 ##

## A7 ##

新增禁用

单选

A4-disabled

A5-disabled

复选

A3-disabled

A4-disabled

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

HTML

## A1 ##

## A2 ##

## A3 ##

A3-disabled

## A4 ##

A4-disabled

## A5 ##

## A6 ##

CSS

\*\[disabled\] \{

opacity: .3;

cursor:no-drop !important

额外Class

点击我查看

点击我，解除模糊

你可以向选项添加额外Class，虽然不太重要；inpit/assembly会保留选中记号外的Class，因此可单独为每个选项引用一个Class或多个。

注册一个获取事件，为获取该域的值，标签需要放置在域内而不在外面，那么check\_result($(this))返回一个对象回来

$("\[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源码

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关美化表单元素之单选框的美化

相关 checkbox样式美化修改复选框样式

相关 html选择框美化代码,jQuery单选框复选框美化代码 - A5源码

相关 Bootstrap复选框和单选按钮美化插件

相关 Bootstrap复选框和单选按钮美化插件

相关单选框，复选框，下拉列表的美化

相关 Android—复选框和单选框使用

相关 jquery获取单选框复选框下拉框值

相关 jQuery 单选框/复选框美化

相关 Bootstrap复选框，单选框美化特效