jquery inpitassembly单选复选美化效果代码
代码语言：html
所属分类：表单美化
代码描述：jquery inpitassembly单选复选美化效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
body,
html {
margin: 0;
height: 100%
}
h1,
h2,
h3,
h4,
h5,
p {
margin: 10px 0;
color: inherit
}
pre {
position: relative;
padding: 0 !important;
margin: 0
}
code {
padding: 0 30px !important
}
pre h2 {
position: absolute;
top: 30px;
padding: 3px 20px;
right: 0;
color: #ffffff;
background-color: #9c56f1
}
hr {
background-color: #d2d2d2;
margin: 10px 0;
border: 0;
height: 1px
}
table,
td,
th,
tr {
border: 0.5px solid #c392ff;
margin: 30px 0;
background-color: #e6d2ff;
color: #602aa0;
}
th {
white-space: pre;
}
td,
th {
padding: 10px
}
a,
a:hover,
a:visited {
color: #222
}
*[disabled] {
opacity: 0.3;
cursor: no-drop !important
}
*[formname] {
margin: 0 0 50px 0;
}
.logo {
position: absolute;
right: -80px;
top: -10px;
transform: rotate(45deg);
background-color: rgb(156, 86, 241);
text-align: center;
padding: 20px 0 0 0;
width: 200px;
height: 55px;
}
.logo > a {
transform: rotate(-45deg);
display: block;
}
.inpit .li>div[name][value]:hover {
border: 2px dashed #9c56f1;
background-color: rgba(156, 86, 241, 0.1)
}
.inpit {
background-color: #9c56f1;
position: relative;
height: 100%
}
.inpit .li {
margin: 0 auto;
min-width: 200px;
padding: 20px 0;
display: flow-root
}
.inpit .li>div[name][value],
.inpit .li>div.add {
cursor: pointer;
transition: transform 0.2s ease-in, box-shadow 0.2s ease-out;
width: calc(25% - 64px);
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
float: left;
background-color: #fff;
padding: 10px 20px;
border: 2px dashed #dcdcdc;
border-radius: 4px;
margin: 0 10px 20px
}
.inpit .li>div.ack[name][value],
.inpit .li>div.active[name][value]{
box-shadow: 0 3px 20px rgba(156, 86, 241, 0.43);
transform: scale(1.05);
border: 2px solid #9c56f1;
background-color: #9c56f1;
color: #fff;
animation: scales 0.3s
}
@keyframes scales {
0% {
transform: scale(1)
}
50% {
transform: scale(1.25)
}
100% {
transform: scale(1)
}
}
.inpit>div {
position: relative;
overflow: hidden;
width: 800px;
display: flow-root;
background-color: #fff;
padding: 10px 30px 50px 30px;
margin: 0 auto
}
.inpit button,
.inpit .insideonelist {
background-color: rgb(156, 86, 241);
border-radius: 50px;
font-size: 20px;
color: #fff;
width: 100%;
max-width: 400px;
margin: 10px auto;
border: #000000;
padding: 10px 0;
text-align: center;
display: block;
cursor: pointer
}
.inpit .flex>div {
float: left;
width: 40%;
margin: 0 5% 40px
}
.inpit .flex .li>div {
width: calc(50% - 64px) !important
}
.inpit .style_a {
position: relative;
overflow: hidden
}
.inpit .style_a:before {
content: "VIP";
position: absolute;
top: 0;
right: 0;
background-color: #f00;
color: #fff;
padding: 3px 10px;
font-size: 12px
}
.inpit .style_b.ack {
background: -moz-linear-gradient(top, #9C27B0, rgba(0, 0, 255, 0.5));
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9C27B0), to(rgba(0, 0, 255, 0.5)));
background: -o-linear-gradient(top, #9C27B0, rgba(0, 0, 255, 0.5))
}
.inpit .style_c {
background-image: url("../1.4/img/dy.gif");
color: #fff;
border: 2px solid #2c5286 !important
}
.inpit .style_d {
filter: blur(3px);
}
.inpit .style_d.ack {
filter: none
}
.inpit .t {
margin: 20px 0;
color: #ffffff;
background-color: #9c56f1;
border-left: 4px solid #533379;
padding: 5px 10px;
font-size: 30px
}
.inpit .t > span {
background-color: rgba(0, 0, 0, 0.23);
padding: 0 10px;
margin: 0 10px 0 0;
}
.inpit .ho h2 {
background-image: url("../2.3/img/font-bk.jpg");
-moz-background-clip: text;
-o-background-clip: text;
-webkit-background-clip: text;
background-clip: text;
background-position: 144px center;
color: transparent;
text-align: left;
text-shadow: 0 0 rgba(255, 255, 255, 0.06);
animation: wave-animation 1s infinite linear, loading-animation 10s infinite linear alternate;
font-size: 6rem;
font-weight: bold;
opacity: 1
}
.inside {
background-color: rgba(0, 0, 0, 0.06);
padding: 20px;
display: inline-block;
width: calc(100% - 90px);
margin: 0 0 20px 50px
}
.hljs-attr {
color: #ff4d40
}
.hljs-name,
.hljs-tag {
color: #03A9F4;
font-weight: 100
}
.hljs-string {
color: #009688
}
</style>
</head>
<body class="inpit">
<div id="inpitassembly" formname="demonstration">
<!--- 初始 --->
<h2 class="t">初始</h2>
<p>
现在inpit/assembly并不需要一定声明"type="inpit/assembly"(标签中)作为inpitassembly的容器，而是通过inpitassembly方法来启动。
</p>
<p>
当然为承载1.0版本的声明方式你依旧可以这样写,例子2：
</p>
<pre>
<h2>CDN</h2>
<code class="html">
<!-- jquery 2.1 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<!-- inpit/assembly 2.0 + -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/inpitassembly.2.3.js"></script>
</code>
</pre>
<p>为更新缓存的inpitassembly，可以在地址后加入时间戳(?time=20171111020000)</p>
<p>当然你也可以随时更改inpitassembly版本:</p>
<pre>
<h2>CDN</h2>
<code class="html">
<!-- inpit/assembly 1.4 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/inpitassembly.1.4.js"></script>
<!-- inpit/assembly 2.1 ~ 2.3 -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/inpitassembly.2.3.js"></script>
</code>
</pre>
<pre>
<h2>js</h2>
<code class="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({});
})
</code>
</pre>
<p>
注意到了么，似乎和之前调用方法不一样，现在通过$().inpitassembly({})初始inpitassembly控件，再不是直接在标签内声明"type="inpit/assembly"即可使用，因此在使用inpitassembly前必须初始控件.
</p>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<th>参数</th>
<th>值</th>
<th>默认值</th>
<th>注释</th>
<th>兼容</th>
</tr>
<tr>
<td>selected</td>
<td>string</td>
<td>active</td>
<td>选中记号</td>
<td>2.3</td>
</tr>
<tr>
<td>selected_data</td>
<td>数组</td>
<td></td>
<td>标记初始值，如果data:"all",表单下所有选项都会选中</td>
<td>2.3</td>
</tr>
<tr>
<td>ischeck_</td>
<td>true / false</td>
<td>true</td>
<td>是否初始选项，如果复选带有min声明，将取min值前面作为默认选项</td>
<td>2.0</td>
</tr>
<tr>
<td>ischeck_class</td>
<td>true / false</td>
<td>false</td>
<td>在标签中已经设置若干默认值与min="2"情况下，关闭初始值，这防止出现默认选项应该是D/F，而不是变成A/B/D/F</td>
<td>2.0</td>
</tr>
<tr>
<td>min</td>
<td>方法事件</td>
<td></td>
<td>回调当前表单对象/最小值</td>
<td>2.3</td>
</tr>
<tr>
<td>max</td>
<td>方法事件</td>
<td></td>
<td>回调当前表单对象/最大值</td>
<td>2.3</td>
</tr>
</table>
<h3 class="t"><span>新增</span>MIN和MAX回调事件</h3>
<p>
inpit/assembly提供选项数量等于min=""max="",触发min/max回调事件，回调中包含一个对象和数值
</p>
<pre>
<h2>js</h2>
<code class="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);
}
});
})
</code>
</pre>
<h3 class="t"><span>新增</span>默认初始值</h3>
<pre>
<h2>js</h2>
<code class="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"
}
// * ================
// * 数据更加复杂怎么办？
// * 凉拌，请处理好最后初始值
// * ================
]
});
})
</code>
</pre>
<p>初始值会在渲染完毕后对选项标识，记号由selected来决定，如果它没有传进inpit/assembly中，inpit/assembly将使用默认的active。</p>
<ul>
<li>
<b>Q:为何明明设置初始值，但并没有设置？</b>
<p>1.检查你的selected_data中的name(也就是表单名)是否初始所在域之内，如果不是同一个，那么先再创建一个inpit-assembly设置初始值。</p>
<p>2.确定你设置name是否存在页面上？如果你是动态创建的inpit/assembly表单，那么请先创建完整DOM节点再来初始inpit/assembly。</p>
</li>
<li>
<b>Q:如何全选初始值？</b>
<p>data:"all"</p>
</li>
</ul>
<!--- 单选 --->
<h3 class="t">单选</h3>
<div class="li" 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>
<p>标准的单选框，声明为checkbox</p>
<pre>
<h2>HTML</h2>
<code class="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>
</code>
</pre>
<h3>三个合并一起单选</h3>
<div class="li" 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>
<p>合并在同一个区域内单选组件，通过NAME识别是否同一个表单内，因此你必须注意它是区分大小写的，当然NAME可中文,比如上方B-C内的NAME值为“变态”</p>
<pre>
<h2>HTML</h2>
<code class="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>
</code>
</pre>
<h3 class="t">复选</h3>
<div class="li" 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>
<p>标准的复选组件，声明为radio；复选含min与max(最小值和最大值)</p>
<pre>
<h2>HTML</h2>
<code class="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>
</code>
</pre>
<h3>最多5个</h3>
<div class="li" 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 class="add">
<h2>增加选项</h2>
<p>动态增加数据</p>
</div>
</div>
<p>向radio组件增加max声明，可对复选组件可选最大个数</p>
<pre>
<h2>HTML</h2>
<code class="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>
</code>
</pre>
<h3>至少3个</h3>
<div class="li" 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>
<p>向radio组件增加min声明，可对复选组件可选最小个数</p>
<pre>
<h2>HTML</h2>
<code class="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&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0