若依 3.4
This commit is contained in:
RuoYi
@ -0,0 +1,322 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('搜索自动补全')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>搜索自动补全<small>https://github.com/lzwme/bootstrap-suggest-plugin</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>展示下拉菜单按钮。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-1">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>不展示下拉菜单按钮。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-2">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>前端json中获取数据</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="suggest-demo-3">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>百度搜索</h3>
|
||||
<p>支持逗号分隔多关键字</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group" style="width: 300px;">
|
||||
<input type="text" class="form-control" id="baidu">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3>淘宝搜索</h3>
|
||||
<p>支持逗号分隔多关键字</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="input-group" style="width: 400px;">
|
||||
<input type="text" class="form-control" id="taobao">
|
||||
<div class="input-group-btn">
|
||||
<button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu dropdown-menu-right" role="menu">
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /btn-group -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-suggest</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>搜索自动补全<small>https://github.com/bassjobsen/Bootstrap-3-Typeahead</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过数据属性的基本示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." data-provide="typeahead" data-source='["ruoyi 1","ruoyi 2","ruoyi 3"]' class="form-control" />
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
|
||||
<p>通过javascript的基本示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-1"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>通过javascript的复杂示例。</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-2"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<p>后台url中获取简单数据</p>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<input type="text" placeholder="ruoyi..." class="form-control" id="typeahead-demo-3"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-typeahead</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-suggest-js" />
|
||||
<th:block th:include="include :: bootstrap-typeahead-js" />
|
||||
<script type="text/javascript">
|
||||
|
||||
var testBsSuggest = $("#suggest-demo-1").bsSuggest({
|
||||
url: ctx + "demo/form/userModel",
|
||||
idField: "userId",
|
||||
keyField: "userName"
|
||||
}).on('onDataRequestSuccess', function (e, result) {
|
||||
console.log('onDataRequestSuccess: ', result);
|
||||
}).on('onSetSelectValue', function (e, keyword) {
|
||||
console.log('onSetSelectValue: ', keyword);
|
||||
}).on('onUnsetSelectValue', function (e) {
|
||||
console.log("onUnsetSelectValue");
|
||||
});
|
||||
|
||||
var testBsSuggest = $("#suggest-demo-2").bsSuggest({
|
||||
url: ctx + "demo/form/userModel",
|
||||
showBtn: false,
|
||||
idField: "userId",
|
||||
keyField: "userName"
|
||||
}).on('onDataRequestSuccess', function (e, result) {
|
||||
console.log('onDataRequestSuccess: ', result);
|
||||
}).on('onSetSelectValue', function (e, keyword) {
|
||||
console.log('onSetSelectValue: ', keyword);
|
||||
}).on('onUnsetSelectValue', function (e) {
|
||||
console.log("onUnsetSelectValue");
|
||||
});
|
||||
|
||||
//data 数据中获取
|
||||
var testdataBsSuggest = $("#suggest-demo-3").bsSuggest({
|
||||
indexId: 1,
|
||||
indexKey: 2,
|
||||
data: {
|
||||
'value': [
|
||||
{
|
||||
'userId': '1',
|
||||
'userCode': '1000001',
|
||||
'userName': '测试1',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '2',
|
||||
'userCode': '1000002',
|
||||
'userName': '测试2',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '3',
|
||||
'userCode': '1000003',
|
||||
'userName': '测试3',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '4',
|
||||
'userCode': '1000004',
|
||||
'userName': '测试4',
|
||||
'userPhone': '15888888888'
|
||||
},
|
||||
{
|
||||
'userId': '5',
|
||||
'userCode': '1000005',
|
||||
'userName': '测试5',
|
||||
'userPhone': '15888888888'
|
||||
}
|
||||
],
|
||||
'defaults': 'http://ruoyi.vip'
|
||||
}
|
||||
});
|
||||
|
||||
//百度搜索测试
|
||||
var baiduBsSuggest = $("#baidu").bsSuggest({
|
||||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||
multiWord: true, //以分隔符号分割的多关键字支持
|
||||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||
url: 'http://unionsug.baidu.com/su?p=3&t=' + (new Date()).getTime() + '&wd=',
|
||||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||
jsonp: 'cb',
|
||||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||
var i, len, data = {
|
||||
value: []
|
||||
};
|
||||
if (!json || !json.s || json.s.length === 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
len = json.s.length;
|
||||
|
||||
jsonStr = "{'value':[";
|
||||
for (i = 0; i < len; i++) {
|
||||
data.value.push({
|
||||
word: json.s[i]
|
||||
});
|
||||
}
|
||||
data.defaults = 'baidu';
|
||||
|
||||
//字符串转化为 js 对象
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
//淘宝搜索建议测试
|
||||
var taobaoBsSuggest = $("#taobao").bsSuggest({
|
||||
indexId: 2, //data.value 的第几个数据，作为input输入框的内容
|
||||
indexKey: 1, //data.value 的第几个数据，作为input输入框的内容
|
||||
allowNoKeyword: false, //是否允许无关键字时请求数据
|
||||
multiWord: true, //以分隔符号分割的多关键字支持
|
||||
separator: ",", //多关键字支持时的分隔符，默认为空格
|
||||
getDataMethod: "url", //获取数据的方式，总是从 URL 获取
|
||||
effectiveFieldsAlias: {
|
||||
Id: "序号",
|
||||
Keyword: "关键字",
|
||||
Count: "数量"
|
||||
},
|
||||
showHeader: true,
|
||||
url: 'http://suggest.taobao.com/sug?code=utf-8&extras=1&q=',
|
||||
/*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
|
||||
jsonp: 'callback',
|
||||
/*如果从 url 获取数据，并且需要跨域，则该参数必须设置*/
|
||||
processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数
|
||||
var i, len, data = {
|
||||
value: []
|
||||
};
|
||||
|
||||
if (!json || !json.result || json.result.length == 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log(json);
|
||||
len = json.result.length;
|
||||
|
||||
for (i = 0; i < len; i++) {
|
||||
data.value.push({
|
||||
"Id": (i + 1),
|
||||
"Keyword": json.result[i][0],
|
||||
"Count": json.result[i][1]
|
||||
});
|
||||
}
|
||||
console.log(data);
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
$('#typeahead-demo-1').typeahead({
|
||||
source: ["ruoyi 1","ruoyi 2","ruoyi 3"]
|
||||
});
|
||||
|
||||
$('#typeahead-demo-2').typeahead({
|
||||
source: [
|
||||
{"name": "Afghanistan", "code": "AF", "ccn0": "040"},
|
||||
{"name": "Land Islands", "code": "AX", "ccn0": "050"},
|
||||
{"name": "Albania", "code": "AL","ccn0": "060"},
|
||||
{"name": "Algeria", "code": "DZ","ccn0": "070"}
|
||||
]
|
||||
});
|
||||
|
||||
$.get(ctx + "demo/form/collection", function(data){
|
||||
$("#typeahead-demo-3").typeahead({
|
||||
source: data.value
|
||||
});
|
||||
},'json');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
593
ruoyi-admin/src/main/resources/templates/demo/form/basic.html
Normal file
593
ruoyi-admin/src/main/resources/templates/demo/form/basic.html
Normal file
@ -0,0 +1,593 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('基本表单')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本表单 <small>简单登录表单示例</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 b-r">
|
||||
<h3 class="m-t-none m-b">登录</h3>
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label>用户名</label>
|
||||
<input type="email" placeholder="请输入您注册的E-mail" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码</label>
|
||||
<input type="password" placeholder="请输入密码" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登 录</strong>
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox">自动登录</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h4>还不是会员？</h4>
|
||||
<p>您可以注册一个新账户</p>
|
||||
<p class="text-center">
|
||||
<a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-5">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>横向表单</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal">
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户名：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="email" placeholder="用户名" class="form-control"> <span class="help-block m-b-none">请输入您注册时所填的E-mail</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">密码：</label>
|
||||
|
||||
<div class="col-sm-8">
|
||||
<input type="password" placeholder="密码" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-3 col-sm-8">
|
||||
<button class="btn btn-sm btn-white" type="submit">登 录</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>内联表单</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form role="form" class="form-inline">
|
||||
<div class="form-group">
|
||||
<label for="exampleInputEmail2" class="sr-only">用户名</label>
|
||||
<input type="email" placeholder="请输入用户名" id="exampleInputEmail2" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="exampleInputPassword2" class="sr-only">密码</label>
|
||||
<input type="password" placeholder="请输入密码" id="exampleInputPassword2" class="form-control">
|
||||
</div>
|
||||
<div class="checkbox m-l m-r-xs">
|
||||
<label>
|
||||
<input type="checkbox"><i></i> 自动登录</label>
|
||||
</div>
|
||||
<button class="btn btn-white" type="submit">登录</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>弹出表单 <small>弹出框登录示例</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="text-center">
|
||||
<a data-toggle="modal" class="btn btn-primary" href="form_basic.html#modal-form">打开登录窗口</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>所有表单元素 <small>包括自定义样式的复选和单选按钮</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form method="get" class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">普通</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">带说明信息</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control"> <span class="help-block m-b-none">帮助文本，可能会超过一行，以块级元素显示</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">密码</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="password" class="form-control" name="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">提示</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder="提示信息" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">禁用</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" disabled="" placeholder="已被禁用" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">静态控制</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<p class="form-control-static">ruoyi.vip</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">复选框&单选框
|
||||
<br/>
|
||||
<small class="text-navy">普通Bootstrap元素</small>
|
||||
</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" value="">选项1</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" checked="" value="option1" id="optionsRadios1" name="optionsRadios">选项1</label>
|
||||
</div>
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" value="option2" id="optionsRadios2" name="optionsRadios">选项2</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">内联复选框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option1" id="inlineCheckbox1">a</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option2" id="inlineCheckbox2">b</label>
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" value="option3" id="inlineCheckbox3">c</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">复选框&单选框
|
||||
<br/><small class="text-navy">自定义样式</small>
|
||||
</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value=""> <i></i> 选项1</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" checked=""> <i></i> 选项2（选中）</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled="" checked=""> <i></i> 选项3（选中并禁用）</label>
|
||||
</div>
|
||||
<div class="checkbox check-box">
|
||||
<label>
|
||||
<input type="checkbox" value="" disabled=""> <i></i> 选项4（禁用）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" value="option1" name="a"> <i></i> 选项1</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" checked="" value="option2" name="a"> <i></i> 选项2（选中）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" disabled="" checked="" value="option2"> <i></i> 选项3（选中并禁用）</label>
|
||||
</div>
|
||||
<div class="radio check-box">
|
||||
<label>
|
||||
<input type="radio" disabled="" name="a"> <i></i> 选项4（禁用）</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">内联复选框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option1">a</label>
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option2">b</label>
|
||||
<label class="checkbox-inline check-box">
|
||||
<input type="checkbox" value="option3">c</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">Select</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<select class="form-control m-b" name="account">
|
||||
<option>选项 1</option>
|
||||
<option>选项 2</option>
|
||||
<option>选项 3</option>
|
||||
<option>选项 4</option>
|
||||
</select>
|
||||
|
||||
<div class="col-sm-4 m-l-n">
|
||||
<select class="form-control" multiple="">
|
||||
<option>选项 1</option>
|
||||
<option>选项 2</option>
|
||||
<option>选项 3</option>
|
||||
<option>选项 4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-success">
|
||||
<label class="col-sm-2 control-label">验证通过</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-warning">
|
||||
<label class="col-sm-2 control-label">未填写</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group has-error">
|
||||
<label class="col-sm-2 control-label">验证未通过</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">自定义尺寸</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" placeholder=".input-lg" class="form-control input-lg m-b">
|
||||
<input type="text" placeholder="Default input" class="form-control m-b">
|
||||
<input type="text" placeholder=".input-sm" class="form-control input-sm">
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">列尺寸</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="row">
|
||||
<div class="col-md-2">
|
||||
<input type="text" placeholder=".col-md-2" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<input type="text" placeholder=".col-md-3" class="form-control">
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<input type="text" placeholder=".col-md-4" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">文本框组</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b"><span class="input-group-addon">@</span>
|
||||
<input type="text" placeholder="用户名" class="form-control">
|
||||
</div>
|
||||
<div class="input-group m-b">
|
||||
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<div class="input-group m-b"><span class="input-group-addon">¥</span>
|
||||
<input type="text" class="form-control"> <span class="input-group-addon">.00</span>
|
||||
</div>
|
||||
<div class="input-group m-b"><span class="input-group-addon"> <input type="checkbox"> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group"><span class="input-group-addon"> <input type="radio"> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">按钮插件</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b"><span class="input-group-btn">
|
||||
<button type="button" class="btn btn-primary">搜</button> </span>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control"> <span class="input-group-btn"> <button type="button" class="btn btn-primary">搜索
|
||||
</button> </span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">带下拉框</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b">
|
||||
<div class="input-group-btn">
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label">分段</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<div class="input-group m-b">
|
||||
<div class="input-group-btn">
|
||||
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="form_basic.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项2</a>
|
||||
</li>
|
||||
<li><a href="form_basic.html#">选项3</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="form_basic.html#">选项4</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<input type="text" class="form-control">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control">
|
||||
|
||||
<div class="input-group-btn">
|
||||
<button tabindex="-1" class="btn btn-white" type="button">操作</button>
|
||||
<button data-toggle="dropdown" class="btn btn-white dropdown-toggle" type="button"><span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu pull-right">
|
||||
分段
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hr-line-dashed"></div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-2">
|
||||
<button class="btn btn-primary" type="submit">保存内容</button>
|
||||
<button class="btn btn-white" type="submit">取消</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="modal-form" class="modal fade" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-6 b-r">
|
||||
<h3 class="m-t-none m-b">登录</h3>
|
||||
|
||||
<p>欢迎登录本站(⊙o⊙)</p>
|
||||
|
||||
<form role="form">
|
||||
<div class="form-group">
|
||||
<label>用户名：</label>
|
||||
<input type="email" placeholder="请输入用户名" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码：</label>
|
||||
<input type="password" placeholder="请输入密码" class="form-control">
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-primary pull-right m-t-n-xs" type="submit"><strong>登录</strong>
|
||||
</button>
|
||||
<label>
|
||||
<input type="checkbox" class="i-checks">自动登录</label>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<h4>还不是会员？</h4>
|
||||
<p>您可以注册一个账户</p>
|
||||
<p class="text-center">
|
||||
<a href="form_basic.html"><i class="fa fa-sign-in big-icon"></i></a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
620
ruoyi-admin/src/main/resources/templates/demo/form/button.html
Normal file
620
ruoyi-admin/src/main/resources/templates/demo/form/button.html
Normal file
@ -0,0 +1,620 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('按钮')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="row wrapper wrapper-content animated fadeInRight">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮颜色</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可使用class来快速改变按钮的颜色，如<code>.btn-primary</code>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">
|
||||
普通按钮
|
||||
</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-w-m btn-default">btn-default</button>
|
||||
<button type="button" class="btn btn-w-m btn-primary">btn-primary</button>
|
||||
<button type="button" class="btn btn-w-m btn-success">btn-success</button>
|
||||
<button type="button" class="btn btn-w-m btn-info">btn-info</button>
|
||||
<button type="button" class="btn btn-w-m btn-warning">btn-warning</button>
|
||||
<button type="button" class="btn btn-w-m btn-danger">btn-danger</button>
|
||||
<button type="button" class="btn btn-w-m btn-white">btn-white</button>
|
||||
<button type="button" class="btn btn-w-m btn-link">btn-link</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮大小</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加class的值为<code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code>来修改按钮的大小
|
||||
</p>
|
||||
<h3 class="font-bold">按钮尺寸</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-primary btn-lg">大按钮</button>
|
||||
<button type="button" class="btn btn-default btn-lg">大按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary">默认按钮</button>
|
||||
<button type="button" class="btn btn-default">默认按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary btn-sm">小按钮</button>
|
||||
<button type="button" class="btn btn-default btn-sm">小按钮</button>
|
||||
<br/>
|
||||
<button type="button" class="btn btn-primary btn-xs">Mini按钮</button>
|
||||
<button type="button" class="btn btn-default btn-xs">Mini按钮</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>线性按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
要使用线性按钮，可添加class<code>.btn-block</code>或<code>.btn-outline</code>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">线性按钮</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-outline btn-default">默认</button>
|
||||
<button type="button" class="btn btn-outline btn-primary">主要</button>
|
||||
<button type="button" class="btn btn-outline btn-success">成功</button>
|
||||
<button type="button" class="btn btn-outline btn-info">信息</button>
|
||||
<button type="button" class="btn btn-outline btn-warning">警告</button>
|
||||
<button type="button" class="btn btn-outline btn-danger">危险</button>
|
||||
<button type="button" class="btn btn-outline btn-link">链接</button>
|
||||
</p>
|
||||
<h3 class="font-bold">块级按钮</h3>
|
||||
<p>
|
||||
<button type="button" class="btn btn-block btn-outline btn-primary">这是一个块级按钮</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>3D按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加<code>.dim</code>class来使用3D按钮.
|
||||
</p>
|
||||
<h3 class="font-bold">3D按钮</h3>
|
||||
|
||||
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim btn-large-dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger dim btn-large-dim" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim btn-large-dim" type="button"><i class="fa fa-dollar"></i>6</button>
|
||||
<button class="btn btn-info dim btn-large-dim btn-outline" type="button"><i class="fa fa-ruble"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="btn btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-default dim " type="button"><i class="fa fa-star"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-money"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-primary dim" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-success dim" type="button"><i class="fa fa-upload"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-info dim" type="button"><i class="fa fa-paste"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-warning dim" type="button"><i class="fa fa-warning"></i>
|
||||
</button>
|
||||
<button class="btn btn-outline btn-danger dim " type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
下拉按钮可使用任何颜色任何大小
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">下拉按钮</h3>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default btn-sm dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-primary btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-warning btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button data-toggle="dropdown" class="btn btn-default btn-xs dropdown-toggle">操作 <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="buttons.html#">置顶</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#" class="font-bold">修改</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">禁用</a>
|
||||
</li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="buttons.html#">删除</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>按钮组</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<h3 class="font-bold">按钮组</h3>
|
||||
<div class="btn-group">
|
||||
<button class="btn btn-white" type="button">左</button>
|
||||
<button class="btn btn-primary" type="button">中</button>
|
||||
<button class="btn btn-white" type="button">右</button>
|
||||
</div>
|
||||
<br/>
|
||||
<br/>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-white"><i class="fa fa-chevron-left"></i>
|
||||
</button>
|
||||
<button class="btn btn-white">1</button>
|
||||
<button class="btn btn-white active">2</button>
|
||||
<button class="btn btn-white">3</button>
|
||||
<button class="btn btn-white">4</button>
|
||||
<button type="button" class="btn btn-white"><i class="fa fa-chevron-right"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>图标按钮 </h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
任何按钮都可以在左侧或右侧添加图标
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">图标按钮</h3>
|
||||
<p>
|
||||
<button class="btn btn-primary " type="button"><i class="fa fa-check"></i> 提交</button>
|
||||
<button class="btn btn-success " type="button"><i class="fa fa-upload"></i> <span class="bold">上传</span>
|
||||
</button>
|
||||
<button class="btn btn-info " type="button"><i class="fa fa-paste"></i> 编辑</button>
|
||||
<button class="btn btn-warning " type="button"><i class="fa fa-warning"></i> <span class="bold">警告</span>
|
||||
</button>
|
||||
<button class="btn btn-default " type="button"><i class="fa fa-map-marker"></i> 百度地图</button>
|
||||
|
||||
<a class="btn btn-success">
|
||||
<i class="fa fa-weixin"> </i> 分享到微信
|
||||
</a>
|
||||
<a class="btn btn-success btn-outline">
|
||||
<i class="fa fa-qq"> </i> 使用QQ账号登录
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-user-md"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-group"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-exchange"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-check-circle-o"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-road"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-ambulance"></i>
|
||||
</a>
|
||||
<a class="btn btn-white btn-bitbucket">
|
||||
<i class="fa fa-star"></i> 收藏
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">按钮切换</h3>
|
||||
<button data-toggle="button" class="btn btn-primary btn-outline" type="button">按钮1</button>
|
||||
<button data-toggle="button" class="btn btn-primary" type="button">按钮2</button>
|
||||
<div data-toggle="buttons-checkbox" class="btn-group">
|
||||
<button class="btn btn-primary active" type="button"><i class="fa fa-bold"></i> 粗体</button>
|
||||
<button class="btn btn-primary" type="button"><i class="fa fa-underline"></i> 下划线</button>
|
||||
<button class="btn btn-primary active" type="button"><i class="fa fa-italic"></i> 斜体</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>圆形图标按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
要使用圆形图标按钮，可以通过添加class为<code>.btn-circle</code>实现
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">圆形按钮</h3>
|
||||
<br/>
|
||||
<button class="btn btn-default btn-circle" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-circle" type="button"><i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-success btn-circle" type="button"><i class="fa fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-info btn-circle" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning btn-circle" type="button"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<br/>
|
||||
<br/>
|
||||
<button class="btn btn-default btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-primary btn-circle btn-lg" type="button"><i class="fa fa-list"></i>
|
||||
</button>
|
||||
<button class="btn btn-success btn-circle btn-lg" type="button"><i class="fa fa-link"></i>
|
||||
</button>
|
||||
<button class="btn btn-info btn-circle btn-lg" type="button"><i class="fa fa-check"></i>
|
||||
</button>
|
||||
<button class="btn btn-warning btn-circle btn-lg" type="button"><i class="fa fa-times"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-lg" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
<button class="btn btn-danger btn-circle btn-lg btn-outline" type="button"><i class="fa fa-heart"></i>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>圆角按钮</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="buttons.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="buttons.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="buttons.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
可以通过添加class的值微<code>.btn-rounded</code>来实现圆角按钮
|
||||
</p>
|
||||
|
||||
<h3 class="font-bold">按钮组</h3>
|
||||
<p>
|
||||
<a class="btn btn-default btn-rounded" href="buttons.html#">默认</a>
|
||||
<a class="btn btn-primary btn-rounded" href="buttons.html#">主要</a>
|
||||
<a class="btn btn-success btn-rounded" href="buttons.html#">成果</a>
|
||||
<a class="btn btn-info btn-rounded" href="buttons.html#">信息</a>
|
||||
<a class="btn btn-warning btn-rounded" href="buttons.html#">警告</a>
|
||||
<a class="btn btn-danger btn-rounded" href="buttons.html#">危险</a>
|
||||
<a class="btn btn-danger btn-rounded btn-outline" href="buttons.html#">危险</a>
|
||||
<br/>
|
||||
<br/>
|
||||
<a class="btn btn-primary btn-rounded btn-block" href="buttons.html#"><i class="fa fa-info-circle"></i> 圆角块级带图标按钮</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
235
ruoyi-admin/src/main/resources/templates/demo/form/datetime.html
Normal file
235
ruoyi-admin/src/main/resources/templates/demo/form/datetime.html
Normal file
@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('日期和时间')" />
|
||||
<th:block th:include="include :: datetimepicker-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>日期选择器 <small>https://github.com/smalot/bootstrap-datetimepicker</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-1" placeholder="yyyy-MM-dd HH:mm">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日时分秒</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="datetimepicker-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">带清空的按钮</label>
|
||||
<div class="input-group date form_date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input class="form-control" size="16" type="text" readonly>
|
||||
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期范围选择</label>
|
||||
<div class="input-daterange input-group">
|
||||
<input type="text" class="input-sm form-control" id="datetimepicker-startTime" placeholder="yyyy-MM-dd"/>
|
||||
<span class="input-group-addon">到</span>
|
||||
<input type="text" class="input-sm form-control" id="datetimepicker-endTime" placeholder="yyyy-MM-dd"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-datetimepicker" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-datetimepicker</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>日期选择器 <small>https://github.com/sentsin/laydate</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-1" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-2" placeholder="yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">显示年月日时分秒</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-3" placeholder="yyyy-MM-dd HH:mm:ss">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单框范围选择</label>
|
||||
<div class="input-group date">
|
||||
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
|
||||
<input type="text" class="form-control" id="laydate-demo-4" placeholder="yyyy-MM-dd - yyyy-MM-dd">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期范围选择</label>
|
||||
<div class="input-daterange input-group">
|
||||
<input type="text" class="input-sm form-control" id="laydate-startTime" placeholder="yyyy-MM-dd"/>
|
||||
<span class="input-group-addon">到</span>
|
||||
<input type="text" class="input-sm form-control" id="laydate-endTime" placeholder="yyyy-MM-dd"/>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=laydate" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=laydate</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: datetimepicker-js" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
<!-- datetimepicker示例 -->
|
||||
$("#datetimepicker-demo-1").datetimepicker();
|
||||
|
||||
$("#datetimepicker-demo-2").datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-demo-3").datetimepicker({
|
||||
format: "yyyy-mm-dd hh:ii:ss",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('.form_date').datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-startTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var startTime = event.date;
|
||||
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||
});
|
||||
|
||||
$("#datetimepicker-endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var endTime = event.date;
|
||||
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||
});
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-1'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-2',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-3',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-4',
|
||||
range: true
|
||||
});
|
||||
|
||||
var startDate = laydate.render({
|
||||
elem: '#laydate-startTime',
|
||||
max: $('#laydate-endTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 结束时间大于开始时间
|
||||
if (value !== '') {
|
||||
endDate.config.min.year = date.year;
|
||||
endDate.config.min.month = date.month - 1;
|
||||
endDate.config.min.date = date.date;
|
||||
} else {
|
||||
endDate.config.min.year = '';
|
||||
endDate.config.min.month = '';
|
||||
endDate.config.min.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var endDate = laydate.render({
|
||||
elem: '#laydate-endTime',
|
||||
min: $('#laydate-startTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 开始时间小于结束时间
|
||||
if (value !== '') {
|
||||
startDate.config.max.year = date.year;
|
||||
startDate.config.max.month = date.month - 1;
|
||||
startDate.config.max.date = date.date;
|
||||
} else {
|
||||
startDate.config.max.year = '';
|
||||
startDate.config.max.month = '';
|
||||
startDate.config.max.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,60 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('左右互选组件')" />
|
||||
<th:block th:include="include :: bootstrap-duallistbox-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>双重列表框 <small>https://github.com/istvan-ujjmeszaros/bootstrap-duallistbox</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
Bootstrap Dual Listbox是针对Twitter Bootstrap进行了优化的响应式双列表框。它适用于所有现代浏览器和触摸设备。
|
||||
</p>
|
||||
|
||||
<form id="form" action="#" class="wizard-big">
|
||||
<select class="form-control dual_select" multiple>
|
||||
<option value="1">若依1</option>
|
||||
<option value="2">若依2</option>
|
||||
<option value="3">若依3</option>
|
||||
<option selected value="4">若依4</option>
|
||||
<option selected value="5">若依5</option>
|
||||
<option value="6">若依6</option>
|
||||
<option value="7">若依7</option>
|
||||
<option value="8">若依8</option>
|
||||
<option value="9">若依9</option>
|
||||
<option value="10">若依10</option>
|
||||
<option value="11">若依11</option>
|
||||
<option value="12">若依12</option>
|
||||
</select>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-duallistbox-js" />
|
||||
<script type="text/javascript">
|
||||
$('.dual_select').bootstrapDualListbox({
|
||||
nonSelectedListLabel: '未有用户',
|
||||
selectedListLabel: '已有用户',
|
||||
preserveSelectionOnMove: 'moved',
|
||||
moveOnSelect: false, // 出现一个剪头，表示可以一次选择一个
|
||||
filterTextClear: '展示所有',
|
||||
moveSelectedLabel: "添加",
|
||||
moveAllLabel: '添加所有',
|
||||
removeSelectedLabel: "移除",
|
||||
removeAllLabel: '移除所有',
|
||||
infoText: '共{0}个',
|
||||
showFilterInputs: false, // 是否带搜索
|
||||
selectorMinimalHeight: 160
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
432
ruoyi-admin/src/main/resources/templates/demo/form/grid.html
Normal file
432
ruoyi-admin/src/main/resources/templates/demo/form/grid.html
Normal file
@ -0,0 +1,432 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('栅格')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>栅格设置</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。</p>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>
|
||||
超小屏幕
|
||||
<small>手机 (<768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
小屏幕
|
||||
<small>平板 (≥768px)</small>
|
||||
</th>
|
||||
<th>
|
||||
中等屏幕
|
||||
<small>桌面显示器 (≥992px)</small>
|
||||
</th>
|
||||
<th>
|
||||
大屏幕
|
||||
<small>大桌面显示器 (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap">栅格系统行为</th>
|
||||
<td>总是水平排列</td>
|
||||
<td colspan="3">开始是堆叠在一起的，当大于这些阈值时将变为水平排列C</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap"><code>.container</code> 最大宽度</th>
|
||||
<td>None （自动）</td>
|
||||
<td>750px</td>
|
||||
<td>970px</td>
|
||||
<td>1170px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">类前缀</th>
|
||||
<td><code>.col-xs-</code>
|
||||
</td>
|
||||
<td><code>.col-sm-</code>
|
||||
</td>
|
||||
<td><code>.col-md-</code>
|
||||
</td>
|
||||
<td><code>.col-lg-</code>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">列（column）数</th>
|
||||
<td colspan="4">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">最大列（column）宽</th>
|
||||
<td class="text-muted">自动</td>
|
||||
<td>~62px</td>
|
||||
<td>~81px</td>
|
||||
<td>~97px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">槽（gutter）宽</th>
|
||||
<td colspan="4">30px （每列左右均有 15px）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">可嵌套</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">偏移（Offsets）</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap">列排序</th>
|
||||
<td colspan="4">是</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>从堆叠到水平排列</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>使用单一的一组 <code>.col-md-*</code> 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” <code>.row</code> 内。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
<div class="col-md-1">.col-md-1</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-8">.col-md-8</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
<div class="col-md-6">.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>移动设备和桌面屏幕</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 <code>.col-xs-*</code> 和 <code>.col-md-*</code>。请看下面的实例，研究一下这些是如何工作的。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
<div class="col-xs-6">.col-xs-6</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>手机、平板、桌面</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>在上面案例的基础上，通过使用针对平板设备的 <code>.col-sm-*</code> 类，我们来创建更加动态和强大的布局吧。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
<!-- Optional: clear the XS cols if their content doesn't match in height -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>多余的列（column）将另起一行排列</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>在等宽的4网格中，网格不等高会碰到问题，为了解决这个问题，可使用<code>.clearfix</code>。<a href="grid_options.html#responsive-utilities">响应实用工具类</a>
|
||||
</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
.col-xs-6 .col-sm-3
|
||||
<br>调整窗口大小或者在手机上查看本示例
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
|
||||
<!-- Add the extra clearfix for only the required viewport -->
|
||||
<div class="clearfix visible-xs"></div>
|
||||
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>列偏移</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<p>使用 <code>.col-md-offset-*</code> 类可以将列向右侧偏移。这些类实际是通过使用 <code>*</code> 选择器为当前元素增加了左侧的边距（margin）。例如，<code>.col-md-offset-4</code> 类将 <code>.col-md-4</code> 元素向右侧偏移了4个列（column）的宽度。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">.col-md-4</div>
|
||||
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>嵌套列</h5>
|
||||
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 <code>.row</code> 元素和一系列 <code>.col-sm-*</code> 元素到已经存在的 <code>.col-sm-*</code> 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9">
|
||||
第一级： .col-md-9
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">
|
||||
第二级： .col-md-6
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
第二级： .col-md-6
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>列排序</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="grid_options.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="grid_options.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="grid_options.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>通过使用 <code>.col-md-push-*</code> 和 <code>.col-md-pull-*</code> 类就可以很容易的改变列（column）的顺序。</p>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
|
||||
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
118
ruoyi-admin/src/main/resources/templates/demo/form/jasny.html
Normal file
118
ruoyi-admin/src/main/resources/templates/demo/form/jasny.html
Normal file
@ -0,0 +1,118 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('功能扩展')" />
|
||||
<th:block th:include="include :: jasny-bootstrap-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>文件上传控件 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">输入组示例</label>
|
||||
|
||||
<div class="fileinput fileinput-new input-group" data-provides="fileinput">
|
||||
<div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
|
||||
<span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">按钮示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input type="file" name="..."></span>
|
||||
<span class="fileinput-filename"></span>
|
||||
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">图片上传示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">图片预览示例</label>
|
||||
<br/>
|
||||
<div class="fileinput fileinput-new" data-provides="fileinput">
|
||||
<div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
|
||||
<img th:src="@{/img/profile.jpg}">
|
||||
</div>
|
||||
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
|
||||
<div>
|
||||
<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input type="file"></span>
|
||||
<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>固定格式文本 <small>https://github.com/jasny/bootstrap</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">手机号码格式</label>
|
||||
<input type="text" class="form-control" data-mask="999-9999-9999" placeholder="请输入手机号码">
|
||||
<span class="help-block">158-8888-88888</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">电话号码格式</label>
|
||||
<input type="text" class="form-control" data-mask="9999-9999999" placeholder="请输入电话号码">
|
||||
<span class="help-block">0730-8888888</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">日期格式</label>
|
||||
<input type="text" class="form-control" data-mask="9999-99-99" placeholder="请输入日期格式">
|
||||
<span class="help-block">yyyy-mm-dd</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">IPV4格式</label>
|
||||
<input type="text" class="form-control" data-mask="999.999.999.999" placeholder="请输入IP地址">
|
||||
<span class="help-block">192.168.100.200</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">税务代码格式</label>
|
||||
<input type="text" class="form-control" data-mask="99-9999999" placeholder="请输入税务代码">
|
||||
<span class="help-block">99-9999999</span>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: jasny-bootstrap-js" />
|
||||
</body>
|
||||
</html>
|
||||
259
ruoyi-admin/src/main/resources/templates/demo/form/select.html
Normal file
259
ruoyi-admin/src/main/resources/templates/demo/form/select.html
Normal file
@ -0,0 +1,259 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('下拉框')" />
|
||||
<th:block th:include="include :: select2-css" />
|
||||
<th:block th:include="include :: bootstrap-select-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<form>
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉框 <small>https://github.com/select2/select2</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单选</label>
|
||||
<select class="form-control">
|
||||
<option value="">--请选择开发语言--</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组单选</label>
|
||||
<select class="form-control">
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多选</label>
|
||||
<select class="form-control select2-multiple" multiple>
|
||||
<option value="">请选择开发语言</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control select2-multiple" multiple>
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=select2" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=select2</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>下拉框 <small>https://github.com/snapappointments/bootstrap-select</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">单选</label>
|
||||
<select class="form-control noselect2 selectpicker">
|
||||
<option value="">--请选择开发语言--</option>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control noselect2 selectpicker">
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多选</label>
|
||||
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择开发语言" multiple>
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">分组多选</label>
|
||||
<select class="form-control noselect2 selectpicker" data-none-selected-text="请选择" multiple>
|
||||
<optgroup label="--请选择开发语言--">
|
||||
<option value="Java">Java</option>
|
||||
<option value="PHP">PHP</option>
|
||||
<option value=".NET">.NET</option>
|
||||
</optgroup>
|
||||
<optgroup label="--请选择数据库--">
|
||||
<option value="Oracle">Oracle</option>
|
||||
<option value="Mysql">Mysql</option>
|
||||
<option value="Sysbase">Sysbase</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-select" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=bootstrap-select</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: select2-js" />
|
||||
<th:block th:include="include :: bootstrap-select-js" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
<!-- datetimepicker示例 -->
|
||||
$("#datetimepicker-demo-1").datetimepicker();
|
||||
|
||||
$("#datetimepicker-demo-2").datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-demo-3").datetimepicker({
|
||||
format: "yyyy-mm-dd hh:ii:ss",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$('.form_date').datetimepicker({
|
||||
format: "yyyy-mm-dd",
|
||||
minView: "month",
|
||||
autoclose: true
|
||||
});
|
||||
|
||||
$("#datetimepicker-startTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var startTime = event.date;
|
||||
$('#datetimepicker-endTime').datetimepicker('setStartDate', startTime);
|
||||
});
|
||||
|
||||
$("#datetimepicker-endTime").datetimepicker({
|
||||
format: 'yyyy-mm-dd',
|
||||
minView: "month",
|
||||
todayBtn: true,
|
||||
autoclose: true,
|
||||
endDate : new Date(),
|
||||
}).on('changeDate', function(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
var endTime = event.date;
|
||||
$("#datetimepicker-startTime").datetimepicker('setEndDate', endTime);
|
||||
});
|
||||
|
||||
<!-- laydate示例 -->
|
||||
layui.use('laydate', function(){
|
||||
var laydate = layui.laydate;
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-1'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-2',
|
||||
type: 'date'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-3',
|
||||
type: 'datetime'
|
||||
});
|
||||
|
||||
laydate.render({
|
||||
elem: '#laydate-demo-4',
|
||||
range: true
|
||||
});
|
||||
|
||||
var startDate = laydate.render({
|
||||
elem: '#laydate-startTime',
|
||||
max: $('#laydate-endTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 结束时间大于开始时间
|
||||
if (value !== '') {
|
||||
endDate.config.min.year = date.year;
|
||||
endDate.config.min.month = date.month - 1;
|
||||
endDate.config.min.date = date.date;
|
||||
} else {
|
||||
endDate.config.min.year = '';
|
||||
endDate.config.min.month = '';
|
||||
endDate.config.min.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
var endDate = laydate.render({
|
||||
elem: '#laydate-endTime',
|
||||
min: $('#laydate-startTime').val(),
|
||||
theme: 'molv',
|
||||
trigger: 'click',
|
||||
done: function(value, date) {
|
||||
// 开始时间小于结束时间
|
||||
if (value !== '') {
|
||||
startDate.config.max.year = date.year;
|
||||
startDate.config.max.month = date.month - 1;
|
||||
startDate.config.max.date = date.date;
|
||||
} else {
|
||||
startDate.config.max.year = '';
|
||||
startDate.config.max.month = '';
|
||||
startDate.config.max.date = '';
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
198
ruoyi-admin/src/main/resources/templates/demo/form/sortable.html
Normal file
198
ruoyi-admin/src/main/resources/templates/demo/form/sortable.html
Normal file
@ -0,0 +1,198 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('拖动排序')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>任务列表</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="text" placeholder="添加新任务" class="input input-sm form-control">
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-sm btn-white"> <i class="fa fa-plus"></i> 添加</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="warning-element">
|
||||
加强过程管理，及时统计教育经费使用情况，做到底码清楚，
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
支持财会人员的继续培训工作。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
协同教导处搞好助学金、减免教科书费的工作。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="danger-element">
|
||||
要求会计、出纳人员严格执行财务制度，遵守岗位职责，按时上报各种资料。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.06.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
做好职工公费医疗工作，按时发放门诊费。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
有计划地把课本复习三至五遍。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
看一本高质量的高中语法书
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
选择一份较好的英语报纸，通过阅读提高英语学习效果。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>进行中</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="success-element">
|
||||
全面、较深入地掌握我们“产品”的功能、特色和优势并做到应用自如。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.01
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
根据自己以前所了解的和从其他途径搜索到的信息，录入客户资料150家。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
锁定有意向客户20家。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
力争完成销售指标。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="info-element">
|
||||
在总结和摸索中前进。
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
不断学习行业知识、产品知识，为客户带来实用介绍内容
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
<li class="danger-element">
|
||||
先友后单：与客户发展良好友谊，转换销售员角色，处处为客户着想
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.11.04
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="ibox">
|
||||
<div class="ibox-content">
|
||||
<h3>已完成</h3>
|
||||
<p class="small"><i class="fa fa-hand-o-up"></i> 在列表之间拖动任务面板</p>
|
||||
<ul class="sortable-list connectList agile-list">
|
||||
<li class="info-element">
|
||||
制定工作日程表
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.10
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
每天坚持打40个有效电话，挖掘潜在客户
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
拜访客户之前要对该客户做全面的了解(客户的潜在需求、职位、权限以及个人性格和爱好)
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标签</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.09.09
|
||||
</div>
|
||||
</li>
|
||||
<li class="warning-element">
|
||||
提高自己电话营销技巧，灵活专业地与客户进行电话交流
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-primary">确定</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.08.04
|
||||
</div>
|
||||
</li>
|
||||
<li class="success-element">
|
||||
通过电话销售过程中了解各盛市的设备仪器使用、采购情况及相关重要追踪人
|
||||
<div class="agile-detail">
|
||||
<a href="#" class="pull-right btn btn-xs btn-white">标记</a>
|
||||
<i class="fa fa-clock-o"></i> 2018.05.12
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script th:src="@{/js/jquery-ui-1.10.4.min.js}"></script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$(".sortable-list").sortable({connectWith: ".connectList"}).disableSelection()
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,353 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('选项卡 & 面板')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeIn">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基本面板 <small class="m-l-sm">这是一个自定义面板</small></h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="tabs_panels.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="tabs_panels.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h2>
|
||||
Bootstrap<br/>
|
||||
</h2>
|
||||
<p>
|
||||
简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true"> 第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div id="tab-1" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>HTML5 文档类型</strong>
|
||||
<p>Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-2" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>移动设备优先</strong>
|
||||
<p>在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 Bootstrap 3 中，我们重写了整个框架，使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-6">
|
||||
<div class="panel blank-panel">
|
||||
|
||||
<div class="panel-heading">
|
||||
<div class="panel-title m-b-md">
|
||||
<h4>图标选项卡</h4>
|
||||
</div>
|
||||
<div class="panel-options">
|
||||
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="tabs_panels.html#tab-4"><i class="fa fa-laptop"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-5"><i class="fa fa-desktop"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-6"><i class="fa fa-signal"></i></a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="tabs_panels.html#tab-7"><i class="fa fa-bar-chart-o"></i></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="panel-body">
|
||||
<div class="tab-content">
|
||||
<div id="tab-4" class="tab-pane active">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
|
||||
<div id="tab-5" class="tab-pane">
|
||||
<strong>Normalize.css</strong>
|
||||
|
||||
<p>为了增强跨浏览器表现的一致性，我们使用了 Normalize.css，这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。</p>
|
||||
</div>
|
||||
<div id="tab-6" class="tab-pane">
|
||||
<strong>布局容器</strong>
|
||||
|
||||
<p>Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。</p>
|
||||
</div>
|
||||
<div id="tab-7" class="tab-pane">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-lg">
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
|
||||
<div class="tabs-left">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-8"> 第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-9"> 第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content ">
|
||||
<div id="tab-8" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-9" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="tabs-container">
|
||||
<div class="tabs-right">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a data-toggle="tab" href="#tab-10">第一个选项卡</a>
|
||||
</li>
|
||||
<li class=""><a data-toggle="tab" href="#tab-11"> 第二个选项卡</a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-content ">
|
||||
<div id="tab-10" class="tab-pane active">
|
||||
<div class="panel-body">
|
||||
<strong>排版与链接</strong>
|
||||
|
||||
<p>Bootstrap 排版、链接样式设置了基本的全局样式。分别是： 为 body 元素设置 background-color: #fff; 使用 @font-family-base、@font-size-base 和 @line-height-base a变量作为排版的基本参数 为所有链接设置了基本颜色 @link-color ，并且当链接处于 :hover 状态时才添加下划线 这些样式都能在 scaffolding.less 文件中找到对应的源码。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="tab-11" class="tab-pane">
|
||||
<div class="panel-body">
|
||||
<strong>栅格系统</strong>
|
||||
|
||||
<p>Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>Bootstrap面板 <small>自定义背景</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
默认面板
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
主要
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-success">
|
||||
<div class="panel-heading">
|
||||
成功
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-info-circle"></i> 信息
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-warning">
|
||||
<div class="panel-heading">
|
||||
<i class="fa fa-warning"></i> 警告
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="panel panel-danger">
|
||||
<div class="panel-heading">
|
||||
危险
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p>通过 .panel-heading 可以很简单地为面板加入一个标题容器。你也可以通过添加设置了 .panel-title 类的标签，添加一个预定义样式的标题。 为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内。</p>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
面板Footer
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>折叠面板</h5>
|
||||
<div class="ibox-tools">
|
||||
<a class="collapse-link">
|
||||
<i class="fa fa-chevron-up"></i>
|
||||
</a>
|
||||
<a class="dropdown-toggle" data-toggle="dropdown" href="tabs_panels.html#">
|
||||
<i class="fa fa-wrench"></i>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-user">
|
||||
<li><a href="tabs_panels.html#">选项1</a>
|
||||
</li>
|
||||
<li><a href="tabs_panels.html#">选项2</a>
|
||||
</li>
|
||||
</ul>
|
||||
<a class="close-link">
|
||||
<i class="fa fa-times"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="panel-body">
|
||||
<div class="panel-group" id="accordion">
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h5 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseOne">标题 #1</a>
|
||||
</h5>
|
||||
</div>
|
||||
<div id="collapseOne" class="panel-collapse collapse in">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseTwo">标题 #2</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseTwo" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel panel-default">
|
||||
<div class="panel-heading">
|
||||
<h4 class="panel-title">
|
||||
<a data-toggle="collapse" data-parent="#accordion" href="tabs_panels.html#collapseThree">标题 #3</a>
|
||||
</h4>
|
||||
</div>
|
||||
<div id="collapseThree" class="panel-collapse collapse">
|
||||
<div class="panel-body">
|
||||
Bootstrap相关优质项目推荐 这些项目或者是对Bootstrap进行了有益的补充，或者是基于Bootstrap开发的
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="jumbotron">
|
||||
<h1>超大屏幕</h1>
|
||||
<p>Bootstrap 支持的另一个特性，超大屏幕（Jumbotron）。顾名思义该组件可以增加标题的大小，并为登陆页面内容添加更多的外边距（margin）。使用超大屏幕（Jumbotron）的步骤如下：</p>
|
||||
<div class="alert alert-warning">
|
||||
<ol>
|
||||
<li>创建一个带有 class .jumbotron. 的容器</li>
|
||||
<li>除了更大的 <h1>，字体粗细 font-weight 被减为 200px。</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<p><a role="button" class="btn btn-primary btn-lg">了解更多</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('文件上传')" />
|
||||
<th:block th:include="include :: bootstrap-fileinput-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>文件上传控件 <small>https://github.com/kartik-v/bootstrap-fileinput</small></h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">简单示例</label>
|
||||
<div class="file-loading">
|
||||
<input class="file" type="file" multiple data-min-file-count="1" data-theme="fas">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">多文件上传</label>
|
||||
<div class="file-loading">
|
||||
<input id="fileinput-demo-1" type="file" multiple>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="form-group">
|
||||
<label class="font-noraml">相关参数详细信息</label>
|
||||
<div><a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jasny-bootstrap</a></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: bootstrap-fileinput-js" />
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function () {
|
||||
$("#fileinput-demo-1").fileinput({
|
||||
'theme': 'explorer-fas',
|
||||
'uploadUrl': '#',
|
||||
overwriteInitial: false,
|
||||
initialPreviewAsData: true,
|
||||
initialPreview: [
|
||||
"/img/profile.jpg"
|
||||
]
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
193
ruoyi-admin/src/main/resources/templates/demo/form/validate.html
Normal file
193
ruoyi-admin/src/main/resources/templates/demo/form/validate.html
Normal file
@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('表单校验')" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>jQuery Validate 简介</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>jquery.validate.js 是一款优秀的jQuery表单验证插件。它具有如下特点：</p>
|
||||
<ul>
|
||||
<li>安装简单</li>
|
||||
<li>内置超过20种数据验证方法</li>
|
||||
<li>直列错误提示信息</li>
|
||||
<li>可扩展的数据验证方法</li>
|
||||
<li>使用内置的元数据或插件选项来指定您的验证规则</li>
|
||||
<li>优雅的交互设计</li>
|
||||
</ul>
|
||||
<p>官网：<a href="http://jqueryvalidation.org/" target="_blank">http://jqueryvalidation.org/</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>简单示例</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal m-t" id="commentForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">姓名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="cname" name="name" minlength="2" type="text" class="form-control" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">E-mail：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="cemail" type="email" class="form-control" name="email" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">网站：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="curl" type="url" class="form-control" name="url">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">说明：</label>
|
||||
<div class="col-sm-8">
|
||||
<textarea id="ccomment" name="comment" class="form-control" required></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-4 col-sm-offset-3">
|
||||
<button class="btn btn-primary" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-content">
|
||||
<p class="m-t">更多示例请访问官方示例页面：<a href="http://jqueryvalidation.org/files/demo/" target="_blank">查看</a>
|
||||
</p>
|
||||
<p>中文API可参考：<a href="http://doc.ruoyi.vip/#/standard/zjwd?id=jquery-validate" target="_blank">http://doc.ruoyi.vip/#/standard/zjwd?id=jquery-validate</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>完整验证表单</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<form class="form-horizontal m-t" id="signupForm">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">姓氏：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="firstname" name="firstname" class="form-control" type="text">
|
||||
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 这里写点提示的内容</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">名字：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="lastname" name="lastname" class="form-control" type="text" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">用户名：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="username" name="username" class="form-control" type="text" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="password" name="password" class="form-control" type="password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">确认密码：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="confirm_password" name="confirm_password" class="form-control" type="password">
|
||||
<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="col-sm-3 control-label">E-mail：</label>
|
||||
<div class="col-sm-8">
|
||||
<input id="email" name="email" class="form-control" type="email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-8 col-sm-offset-3">
|
||||
<button class="btn btn-primary" type="submit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$("#commentForm").validate();
|
||||
|
||||
var icon = "<i class='fa fa-times-circle'></i> ";
|
||||
$("#signupForm").validate({
|
||||
rules: {
|
||||
firstname: "required",
|
||||
lastname: "required",
|
||||
username: {
|
||||
required: true,
|
||||
minlength: 2
|
||||
},
|
||||
password: {
|
||||
required: true,
|
||||
minlength: 5
|
||||
},
|
||||
confirm_password: {
|
||||
required: true,
|
||||
minlength: 5,
|
||||
equalTo: "#password"
|
||||
},
|
||||
email: {
|
||||
required: true,
|
||||
email: true
|
||||
}
|
||||
},
|
||||
messages: {
|
||||
firstname: icon + "请输入你的姓",
|
||||
lastname: icon + "请输入您的名字",
|
||||
username: {
|
||||
required: icon + "请输入您的用户名",
|
||||
minlength: icon + "用户名必须两个字符以上"
|
||||
},
|
||||
password: {
|
||||
required: icon + "请输入您的密码",
|
||||
minlength: icon + "密码必须5个字符以上"
|
||||
},
|
||||
confirm_password: {
|
||||
required: icon + "请再次输入密码",
|
||||
minlength: icon + "密码必须5个字符以上",
|
||||
equalTo: icon + "两次输入的密码不一致"
|
||||
},
|
||||
email: icon + "请输入您的E-mail"
|
||||
}
|
||||
});
|
||||
|
||||
$("#username").focus(function () {
|
||||
var firstname = $("#firstname").val();
|
||||
var lastname = $("#lastname").val();
|
||||
if (firstname && lastname && !this.value) {
|
||||
this.value = firstname + "." + lastname;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
192
ruoyi-admin/src/main/resources/templates/demo/form/wizard.html
Normal file
192
ruoyi-admin/src/main/resources/templates/demo/form/wizard.html
Normal file
@ -0,0 +1,192 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
<head>
|
||||
<th:block th:include="include :: header('基本表单')" />
|
||||
<th:block th:include="include :: jquery-steps-css" />
|
||||
</head>
|
||||
<body class="gray-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight">
|
||||
<div class="row">
|
||||
<div class="col-sm-5">
|
||||
<div class="jumbotron">
|
||||
<h1>表单向导</h1>
|
||||
<p>Smart UI 部件允许您快速创建表单向导接口。</p>
|
||||
<p><a href="https://github.com/rstaib/jquery-steps" target="_blank" class="btn btn-primary btn-lg" role="button">了解 jQuery Steps</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-7">
|
||||
<div class="ibox float-e-margins">
|
||||
<div class="ibox-title">
|
||||
<h5>基础表单向导</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<p>
|
||||
这是一个简单的表单向导示例
|
||||
</p>
|
||||
<div id="wizard">
|
||||
<h1>第一步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第一步</h2>
|
||||
<p>
|
||||
这是第一步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>第二步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第二步</h2>
|
||||
<p>
|
||||
这是第二步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>第三步</h1>
|
||||
<div class="step-content">
|
||||
<div class="text-center m-t-md">
|
||||
<h2>第三步</h2>
|
||||
<p>
|
||||
这是第三步的内容
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="ibox">
|
||||
<div class="ibox-title">
|
||||
<h5>带验证的表单向导</h5>
|
||||
</div>
|
||||
<div class="ibox-content">
|
||||
<h2>
|
||||
带验证的表单向导
|
||||
</h2>
|
||||
<p>
|
||||
下面这个示例展示了如何在表单向导中使用 jQuery Validation 插件
|
||||
</p>
|
||||
|
||||
<form id="form" action="http://www.zi-han.net/theme/hplus/form_wizard.html#" class="wizard-big">
|
||||
<h1>账户</h1>
|
||||
<fieldset>
|
||||
<h2>账户信息</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-8">
|
||||
<div class="form-group">
|
||||
<label>用户名 *</label>
|
||||
<input id="userName" name="userName" type="text" class="form-control required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>密码 *</label>
|
||||
<input id="password" name="password" type="text" class="form-control required">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>确认密码 *</label>
|
||||
<input id="confirm" name="confirm" type="text" class="form-control required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-4">
|
||||
<div class="text-center">
|
||||
<div style="margin-top: 20px">
|
||||
<i class="fa fa-sign-in" style="font-size: 180px;color: #e5e5e5 "></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</fieldset>
|
||||
<h1>个人资料</h1>
|
||||
<fieldset>
|
||||
<h2>个人资料信息</h2>
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>姓名 *</label>
|
||||
<input id="name" name="name" type="text" class="form-control required">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
<div class="form-group">
|
||||
<label>Email *</label>
|
||||
<input id="email" name="email" type="text" class="form-control required email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>地址 *</label>
|
||||
<input id="address" name="address" type="text" class="form-control">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h1>警告</h1>
|
||||
<fieldset>
|
||||
<div class="text-center" style="margin-top: 120px">
|
||||
<h2>你是火星人 :-)</h2>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
<h1>完成</h1>
|
||||
<fieldset>
|
||||
<h2>条款</h2>
|
||||
<input id="acceptTerms" name="acceptTerms" type="checkbox" class="required">
|
||||
<label for="acceptTerms">我同意注册条款</label>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: jquery-steps-js" />
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#wizard").steps();
|
||||
$("#form").steps({
|
||||
bodyTag: "fieldset", onStepChanging: function (event, currentIndex, newIndex) {
|
||||
if (currentIndex > newIndex) {
|
||||
return true
|
||||
}
|
||||
if (newIndex === 3 && Number($("#age").val()) < 18) {
|
||||
return false
|
||||
}
|
||||
var form = $(this);
|
||||
if (currentIndex < newIndex) {
|
||||
$(".body:eq(" + newIndex + ") label.error", form).remove();
|
||||
$(".body:eq(" + newIndex + ") .error", form).removeClass("error")
|
||||
}
|
||||
form.validate().settings.ignore = ":disabled,:hidden";
|
||||
return form.valid()
|
||||
}, onStepChanged: function (event, currentIndex, priorIndex) {
|
||||
if (currentIndex === 2 && Number($("#age").val()) >= 18) {
|
||||
$(this).steps("next")
|
||||
}
|
||||
if (currentIndex === 2 && priorIndex === 3) {
|
||||
$(this).steps("previous")
|
||||
}
|
||||
}, onFinishing: function (event, currentIndex) {
|
||||
var form = $(this);
|
||||
form.validate().settings.ignore = ":disabled";
|
||||
return form.valid()
|
||||
}, onFinished: function (event, currentIndex) {
|
||||
var form = $(this);
|
||||
form.submit()
|
||||
}
|
||||
}).validate({
|
||||
errorPlacement: function (error, element) {
|
||||
element.before(error)
|
||||
}, rules: {confirm: {equalTo: "#password"}}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user