调整一些小冲突
This commit is contained in:
sentsin
parent
5038eebdf1
commit
3e2ad5e063
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,2 +1,2 @@
|
||||
/** layui-v1.0.2 经典模块化前端框架 LGPL license By www.layui.com */
|
||||
;layui.define("jquery",function(i){"use strict";var t=layui.jquery,a=(layui.hint(),layui.device()),e="element",n="layui-this",l="layui-show",o=function(){this.config={}};o.prototype.set=function(i){var a=this;return t.extend(!0,a.config,i),a},o.prototype.on=function(i,t){return layui.onevent(e,i,t)},o.prototype.init=function(i){var o={tabClick:function(i,a){var o=t(this),a=a||o.index(),s=o.parents(".layui-tab"),u=s.find(".layui-tab-content .layui-tab-item"),c=s.attr("lay-filter");o.addClass(n).siblings().removeClass(n),u.eq(a).addClass(l).siblings().removeClass(l),layui.event.call(this,e,"tab("+c+")",{elem:s,index:a})},tabAuto:function(){var i="layui-tab-more",e="layui-tab-bar",l="layui-tab-close",s=this;t(".layui-tab").each(function(){var u=t(this),c=u.find(".layui-tab-title"),r=(u.find(".layui-tab-item"),'lay-stope="tabmore"'),f=t('<span class="layui-unselect layui-tab-bar" '+r+"><i "+r+' class="layui-icon"></i></span>');if(s===window&&8!=a.ie&&o.hideTabMore(!0),u.attr("lay-allowClose")&&!c.find("li").find("."+l)[0]){var y=t('<i class="layui-icon layui-unselect '+l+'">ဆ</i>');y.on("click",function(){var i=t(this).parent(),a=i.index(),e=i.parents(".layui-tab"),l=e.find(".layui-tab-content .layui-tab-item");i.hasClass(n)&&(i.next()[0]?o.tabClick.call(i.next()[0],{},a+1):i.prev()[0]&&o.tabClick.call(i.prev()[0],{},a-1)),i.remove(),l.eq(a).remove()}),c.find("li").append(y)}if(c.prop("scrollWidth")>c.outerWidth()+1){if(c.find("."+e)[0])return;c.append(f),f.on("click",function(t){c[this.title?"removeClass":"addClass"](i),this.title=this.title?"":"收缩"})}else c.find("."+e).remove()})},hideTabMore:function(i){var a=t(".layui-tab-title");i!==!0&&"tabmore"===i.target.getAttribute("lay-stope")||(a.removeClass("layui-tab-more"),a.find(".layui-tab-bar").attr("title",""))}},s={tab:function(){var i=".layui-tab-title li";o.tabAuto.call({}),u.off("click",i,o.tabClick).on("click",i,o.tabClick),t(window).off("resize",o.tabAuto).on("resize",o.tabAuto),t(document).off("click",o.hideTabMore).on("click",o.hideTabMore)},nav:function(){var i,e=".layui-nav",n="layui-nav-item",l="layui-nav-bar",o="layui-nav-tree",s=200,u=function(a,e){var n=t(this);e.hasClass(o)?a.css({top:n.position().top,height:n.height(),opacity:1}):(a.css({left:n.position().left+parseFloat(n.css("marginLeft")),top:n.position().top+n.height()-5}),i=setTimeout(function(){a.css({width:n.width(),opacity:1})},s))};t(e).each(function(){var e=t(this),c=t('<span class="'+l+'"></span>');e.find("."+l)[0]||a.ie&&a.ie<10||(e.append(c),e.find("."+n).on("mouseenter",function(){u.call(this,c,e)}),e.on("mouseleave",function(){clearTimeout(i),setTimeout(function(){e.hasClass(o)?c.css({height:0,top:c.position().top+c.height()/2,opacity:0}):c.css({width:0,left:c.position().left+c.width()/2,opacity:0})},s)}))})},breadcrumb:function(){var i=".layui-breadcrumb";t(i).each(function(){var i=t(this),a=i.attr("lay-separator")||">",e=i.find("a");e.each(function(i){i!==e.length-1&&t(this).append("<span>"+a+"</span>")}),i.css("visibility","visible")})}};return layui.each(s,function(i,t){t()})};var s=new o,u=t("body");s.init(),i(e,function(i){return s.set(i)})});
|
||||
;layui.define("jquery",function(i){"use strict";var t=layui.jquery,a=(layui.hint(),layui.device()),e="element",n="layui-this",l="layui-show",o=function(){this.config={}};o.prototype.set=function(i){var a=this;return t.extend(!0,a.config,i),a},o.prototype.on=function(i,t){return layui.onevent(e,i,t)},o.prototype.init=function(i){var o={tabClick:function(i,a){var o=t(this),a=a||o.index(),s=o.parents(".layui-tab"),c=s.children(".layui-tab-content").children(".layui-tab-item"),r=s.attr("lay-filter");o.addClass(n).siblings().removeClass(n),c.eq(a).addClass(l).siblings().removeClass(l),layui.event.call(this,e,"tab("+r+")",{elem:s,index:a})},tabAuto:function(){var i="layui-tab-more",e="layui-tab-bar",l="layui-tab-close",s=this;t(".layui-tab").each(function(){var c=t(this),r=c.children(".layui-tab-title"),u=(c.children(".layui-tab-content").children(".layui-tab-item"),'lay-stope="tabmore"'),h=t('<span class="layui-unselect layui-tab-bar" '+u+"><i "+u+' class="layui-icon"></i></span>');if(s===window&&8!=a.ie&&o.hideTabMore(!0),c.attr("lay-allowClose")&&!r.find("li").find("."+l)[0]){var y=t('<i class="layui-icon layui-unselect '+l+'">ဆ</i>');y.on("click",function(){var i=t(this).parent(),a=i.index(),e=i.parents(".layui-tab"),l=e.children(".layui-tab-content").children(".layui-tab-item");i.hasClass(n)&&(i.next()[0]?o.tabClick.call(i.next()[0],{},a+1):i.prev()[0]&&o.tabClick.call(i.prev()[0],{},a-1)),i.remove(),l.eq(a).remove()}),r.find("li").append(y)}if(r.prop("scrollWidth")>r.outerWidth()+1){if(r.find("."+e)[0])return;r.append(h),h.on("click",function(t){r[this.title?"removeClass":"addClass"](i),this.title=this.title?"":"收缩"})}else r.find("."+e).remove()})},hideTabMore:function(i){var a=t(".layui-tab-title");i!==!0&&"tabmore"===i.target.getAttribute("lay-stope")||(a.removeClass("layui-tab-more"),a.find(".layui-tab-bar").attr("title",""))}},s={tab:function(){var i=".layui-tab-title li";o.tabAuto.call({}),c.off("click",i,o.tabClick).on("click",i,o.tabClick),t(window).off("resize",o.tabAuto).on("resize",o.tabAuto),t(document).off("click",o.hideTabMore).on("click",o.hideTabMore)},nav:function(){var i,e=".layui-nav",n="layui-nav-item",l="layui-nav-bar",o="layui-nav-tree",s=200,c=function(a,e){var n=t(this);e.hasClass(o)?a.css({top:n.position().top,height:n.height(),opacity:1}):(a.css({left:n.position().left+parseFloat(n.css("marginLeft")),top:n.position().top+n.height()-5}),i=setTimeout(function(){a.css({width:n.width(),opacity:1})},s))};t(e).each(function(){var e=t(this),r=t('<span class="'+l+'"></span>');e.find("."+l)[0]||a.ie&&a.ie<10||(e.append(r),e.find("."+n).on("mouseenter",function(){c.call(this,r,e)}),e.on("mouseleave",function(){clearTimeout(i),setTimeout(function(){e.hasClass(o)?r.css({height:0,top:r.position().top+r.height()/2,opacity:0}):r.css({width:0,left:r.position().left+r.width()/2,opacity:0})},s)}))})},breadcrumb:function(){var i=".layui-breadcrumb";t(i).each(function(){var i=t(this),a=i.attr("lay-separator")||">",e=i.find("a");e.each(function(i){i!==e.length-1&&t(this).append("<span>"+a+"</span>")}),i.css("visibility","visible")})}};return layui.each(s,function(i,t){t()})};var s=new o,c=t("body");s.init(),i(e,function(i){return s.set(i)})});
|
||||
@ -54,6 +54,7 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
|
||||
/** 基础通用 **/
|
||||
/* 消除第三方ui可能造成的冲突 */.layui-box, .layui-box *{-webkit-box-sizing: content-box !important; -moz-box-sizing: content-box !important; box-sizing: content-box !important;}
|
||||
.layui-border-box, .layui-border-box *{-webkit-box-sizing: border-box !important; -moz-box-sizing: border-box !important; box-sizing: border-box !important;}
|
||||
.layui-clear{clear: both; *zoom: 1;}
|
||||
.layui-clear:after{content:'\20'; clear:both; *zoom:1; display:block; height:0;}
|
||||
.layui-inline{position: relative; display: inline-block; *display:inline; *zoom:1; vertical-align: middle;}
|
||||
@ -351,18 +352,18 @@ a cite{font-style: normal; *cursor:pointer;}
|
||||
/* Tab关闭 */.layui-tab-title li .layui-tab-close{ position: relative; margin-left: 8px; top: 1px; color: #c2c2c2;}
|
||||
.layui-tab-title li .layui-tab-close:hover{border-radius: 10px; background-color: #FF5722; color: #fff;}
|
||||
|
||||
/* Tab简洁风格 */.layui-tab-brief .layui-this{color: #009688;}
|
||||
.layui-tab-brief .layui-this:after
|
||||
,.layui-tab-brief .layui-tab-more li.layui-this:after{border: none; border-radius: none; border-bottom: 3px solid #5FB878;}
|
||||
/* Tab简洁风格 */.layui-tab-brief > .layui-tab-title .layui-this{color: #009688;}
|
||||
.layui-tab-brief > .layui-tab-title .layui-this:after
|
||||
,.layui-tab-brief > .layui-tab-title .layui-tab-more li.layui-this:after{border: none; border-radius: 0; border-bottom: 3px solid #5FB878;}
|
||||
|
||||
/* Tab卡片风格 */.layui-tab-card{border: 1px solid #e2e2e2; border-radius: 2px; box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
|
||||
.layui-tab-card .layui-tab-title{ background-color: #f2f2f2;}
|
||||
.layui-tab-card .layui-tab-title li{margin-right: -1px; margin-left: -1px;}
|
||||
.layui-tab-card .layui-this{background-color: #fff; }
|
||||
.layui-tab-card .layui-this:after{border-top: none; border-bottom-color: #fff;}
|
||||
.layui-tab-card .layui-tab-bar{height: 40px; line-height: 40px; border-radius: 0; border-top: none; border-right: none;}
|
||||
.layui-tab-card .layui-tab-more .layui-this{background: none; color: #5FB878;}
|
||||
.layui-tab-card .layui-tab-more .layui-this:after{border: none;}
|
||||
.layui-tab-card > .layui-tab-title{ background-color: #f2f2f2;}
|
||||
.layui-tab-card > .layui-tab-title li{margin-right: -1px; margin-left: -1px;}
|
||||
.layui-tab-card > .layui-tab-title .layui-this{background-color: #fff; }
|
||||
.layui-tab-card > .layui-tab-title .layui-this:after{border-top: none; border-width: 1px; border-bottom-color: #fff;}
|
||||
.layui-tab-card > .layui-tab-title .layui-tab-bar{height: 40px; line-height: 40px; border-radius: 0; border-top: none; border-right: none;}
|
||||
.layui-tab-card > .layui-tab-title .layui-tab-more .layui-this{background: none; color: #5FB878;}
|
||||
.layui-tab-card > .layui-tab-title .layui-tab-more .layui-this:after{border: none;}
|
||||
|
||||
/** fixbar **/
|
||||
.layui-fixbar{position: fixed; right: 15px; bottom: 15px; z-index: 9999;}
|
||||
|
||||
@ -39,7 +39,7 @@ layui.define('jquery', function(exports){
|
||||
var othis = $(this)
|
||||
,index = index || othis.index()
|
||||
,parents = othis.parents('.layui-tab')
|
||||
,item = parents.find('.layui-tab-content .layui-tab-item')
|
||||
,item = parents.children('.layui-tab-content').children('.layui-tab-item')
|
||||
,filter = parents.attr('lay-filter');
|
||||
|
||||
othis.addClass(THIS).siblings().removeClass(THIS);
|
||||
@ -57,8 +57,8 @@ layui.define('jquery', function(exports){
|
||||
|
||||
$('.layui-tab').each(function(){
|
||||
var othis = $(this)
|
||||
,title = othis.find('.layui-tab-title')
|
||||
,item = othis.find('.layui-tab-item')
|
||||
,title = othis.children('.layui-tab-title')
|
||||
,item = othis.children('.layui-tab-content').children('.layui-tab-item')
|
||||
,STOPE = 'lay-stope="tabmore"'
|
||||
,span = $('<span class="layui-unselect layui-tab-bar" '+ STOPE +'><i '+ STOPE +' class="layui-icon"></i></span>');
|
||||
|
||||
@ -73,7 +73,7 @@ layui.define('jquery', function(exports){
|
||||
close.on('click', function(){
|
||||
var li = $(this).parent(), index = li.index();
|
||||
var parents = li.parents('.layui-tab');
|
||||
var item = parents.find('.layui-tab-content .layui-tab-item');
|
||||
var item = parents.children('.layui-tab-content').children('.layui-tab-item')
|
||||
|
||||
if(li.hasClass(THIS)){
|
||||
if(li.next()[0]){
|
||||
|
||||
319
test/form1.html
Normal file
319
test/form1.html
Normal file
@ -0,0 +1,319 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Layui</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css" media="all">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<fieldset class="layui-elem-field layui-field-title">
|
||||
<legend>响应式的表单集合</legend>
|
||||
</fieldset>
|
||||
<form class="layui-form" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证必填项</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证手机</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="tel" name="phone" lay-verify="phone" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证邮箱</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证数字</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="number" lay-verify="number" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证日期</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="date" id="date" lay-verify="date" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">验证链接</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">验证身份证</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="identity" lay-verify="identity" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">自定义验证</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected="">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">行内选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择省</option>
|
||||
<option value="浙江" selected="">浙江省</option>
|
||||
<option value="你的工号">江西省</option>
|
||||
<option value="你最喜欢的老师">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择市</option>
|
||||
<option value="杭州">杭州</option>
|
||||
<option value="宁波">宁波</option>
|
||||
<option value="温州">温州</option>
|
||||
<option value="温州">台州</option>
|
||||
<option value="温州">绍兴</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择县/区</option>
|
||||
<option value="西湖区">西湖区</option>
|
||||
<option value="余杭区">余杭区</option>
|
||||
<option value="拱墅区">临安市</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">复选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="like[write]" title="写作">
|
||||
<input type="checkbox" name="like[read]" title="阅读" checked="">
|
||||
<input type="checkbox" name="like[game]" title="游戏">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关-关</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="close" lay-skin="switch" title="开关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">开关-开</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" checked="" name="open" lay-skin="switch" lay-filter="switchTest" title="开关">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单选框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="sex" value="男" title="男" checked="">
|
||||
<input type="radio" name="sex" value="女" title="女">
|
||||
<input type="radio" name="sex" value="密" title="保密">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">普通文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">编辑器</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea class="layui-textarea layui-hide" id="LAY_demo_editor"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
|
||||
<legend>方框风格的表单集合</legend>
|
||||
</fieldset>
|
||||
<form class="layui-form layui-form-pane" action="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">长输入框</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">短输入框</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="text" name="username" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">日期选择</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="date" id="date" autocomplete="off" class="layui-input" onclick="layui.laydate({elem: this})">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">行内表单</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="number" name="number" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">密码</label>
|
||||
<div class="layui-input-inline">
|
||||
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid layui-word-aux">请务必填写用户名</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-inline">
|
||||
<label class="layui-form-label">范围</label>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-mid">-</div>
|
||||
<div class="layui-input-inline" style="width: 100px;">
|
||||
<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">单行选择框</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="interest" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">写作</option>
|
||||
<option value="1" selected="">阅读</option>
|
||||
<option value="2">游戏</option>
|
||||
<option value="3">音乐</option>
|
||||
<option value="4">旅行</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">行内选择框</label>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择省</option>
|
||||
<option value="浙江" selected="">浙江省</option>
|
||||
<option value="你的工号">江西省</option>
|
||||
<option value="你最喜欢的老师">福建省</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择市</option>
|
||||
<option value="杭州">杭州</option>
|
||||
<option value="宁波">宁波</option>
|
||||
<option value="温州">温州</option>
|
||||
<option value="温州">台州</option>
|
||||
<option value="温州">绍兴</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-input-inline">
|
||||
<select name="quiz">
|
||||
<option value="">请选择县/区</option>
|
||||
<option value="西湖区">西湖区</option>
|
||||
<option value="余杭区">余杭区</option>
|
||||
<option value="拱墅区">临安市</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item layui-form-text">
|
||||
<label class="layui-form-label">文本域</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea placeholder="请输入内容" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn" lay-submit="" lay-filter="demo2">跳转式提交</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<script src="//res.layui.com/layui/build/layui.js" charset="utf-8"></script>
|
||||
<script>
|
||||
layui.use(['form', 'layedit', 'laydate'], function(){
|
||||
var form = layui.form()
|
||||
,layer = layui.layer
|
||||
,layedit = layui.layedit
|
||||
,laydate = layui.laydate;
|
||||
//自定义验证规则
|
||||
form.verify({
|
||||
title: function(value){
|
||||
if(value.length < 5){
|
||||
return '标题至少得5个字符啊';
|
||||
}
|
||||
}
|
||||
,pass: [/(.+){6,12}$/, '密码必须6到12位']
|
||||
});
|
||||
|
||||
//创建一个编辑器
|
||||
layedit.build('LAY_demo_editor');
|
||||
|
||||
//监听提交
|
||||
form.on('submit(demo1)', function(data){
|
||||
layer.alert(JSON.stringify(data.field), {
|
||||
title: '最终的提交信息'
|
||||
})
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user