重新整理样式,适配对话窗口内空间间隙,增加控件默认值支持data-default-val设置
This commit is contained in:
parent
4292f94dc0
commit
e8d44d8b1e
|
@ -1,9 +1,3 @@
|
|||
@media (max-width: 1200px) {
|
||||
.modal-dialog .modal-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 990px) {
|
||||
.modal-dialog {
|
||||
width: 800px;
|
||||
|
@ -11,13 +5,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 990px) {
|
||||
.panel-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.panel-body .form-inline .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
@ -76,6 +63,10 @@
|
|||
.top-menu .search {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 460px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
|
@ -84,7 +75,7 @@
|
|||
}
|
||||
|
||||
.modal-dialog {
|
||||
width: 370px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.top-menu > li {
|
||||
|
@ -93,10 +84,6 @@
|
|||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
.modal-dialog {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.top-menu {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
|
|
|
@ -10,6 +10,26 @@
|
|||
-moz-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.has-error input {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/error.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.has-error .input-group-btn button, .has-error .input-group-btn button:active:focus {
|
||||
border-color: #a94442;
|
||||
}
|
||||
|
||||
.has-success input {
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/success.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.has-success .input-group-btn button, .has-success .input-group-btn button:active:focus {
|
||||
border-color: #3c763d;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.176) !important;
|
||||
}
|
||||
|
@ -18,12 +38,35 @@
|
|||
color: #fff;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: inline-block;
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
#main-content {
|
||||
padding: 15px 15px 0 15px;
|
||||
}
|
||||
|
||||
#main-content > .panel:last-child .panel-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.form-inline .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-inline .form-group .control-label {
|
||||
margin-right: 10px;
|
||||
width: 80px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-body, .panel-body {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-body .form-inline .form-group input {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
@ -513,22 +556,6 @@ div button span {
|
|||
}
|
||||
/*end*/
|
||||
|
||||
.form-inline .form-group label.control-label {
|
||||
margin-right: 10px;
|
||||
width: 80px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-body .form-inline .form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.modal-dialog .modal-body .form-inline .form-group input {
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: #f5f5f5;
|
||||
border-top-left-radius: 6px;
|
||||
|
@ -553,36 +580,6 @@ div button span {
|
|||
padding-top: 5px;
|
||||
}
|
||||
|
||||
input.error {
|
||||
padding-right: 30px;
|
||||
border-color: red;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/error.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
input.valid {
|
||||
padding-right: 30px;
|
||||
border-color: green;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('../images/success.png');
|
||||
background-position: right 8px center;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.navbar-default {
|
||||
background-color: #fff;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.navbar-collapse {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
ul.breadcrumb {
|
||||
position: absolute;
|
||||
top: 56px;
|
||||
|
|
|
@ -105,10 +105,15 @@
|
|||
autoValidate: function (options) {
|
||||
// validate
|
||||
$(this).validate({
|
||||
validClass: "has-success",
|
||||
errorClass: "has-error",
|
||||
ignore: "ignore",
|
||||
rules: $.extend({}, options),
|
||||
highlight: function (element, errorClass, validClass) {
|
||||
$(element).parents('.form-group').addClass(errorClass).removeClass(validClass);
|
||||
},
|
||||
unhighlight: function (element, errorClass, validClass) {
|
||||
$.validator.defaults.unhighlight(element, errorClass, validClass);
|
||||
$(element).parents('.form-group').removeClass(errorClass).addClass(validClass);
|
||||
$(element).popover('destroy');
|
||||
},
|
||||
errorPlacement: function (label, element) {
|
||||
|
|
|
@ -18,8 +18,10 @@
|
|||
reset: function () {
|
||||
for (name in this.options.map) {
|
||||
var ctl = $("#" + this.options.map[name]);
|
||||
if (ctl.hasClass('selectpicker')) ctl.selectpicker('val', "1");
|
||||
else ctl.val("");
|
||||
var dv = ctl.attr("data-default-val");
|
||||
if (dv === undefined) dv = "";
|
||||
if (ctl.hasClass('selectpicker')) ctl.selectpicker('val', dv);
|
||||
else ctl.val(dv);
|
||||
}
|
||||
},
|
||||
get: function () {
|
||||
|
@ -30,7 +32,11 @@
|
|||
target[name] = ctl.selectpicker('val');
|
||||
target[name + 'Name'] = ctl.parentsUntil('bootstrap-select').children('button[data-id="' + this.options.map[name] + '"]').attr('title');
|
||||
}
|
||||
else target[name] = ctl.val();
|
||||
else {
|
||||
var dv = ctl.attr('data-default-val');
|
||||
if (dv !== undefined && ctl.val().trim() === "") target[name] = dv;
|
||||
else target[name] = ctl.val();
|
||||
}
|
||||
}
|
||||
return target;
|
||||
}
|
||||
|
|
|
@ -56,12 +56,7 @@
|
|||
required: true,
|
||||
maxlength: 50
|
||||
},
|
||||
icon: {
|
||||
required: true,
|
||||
maxlength: 50
|
||||
},
|
||||
order: {
|
||||
required: true,
|
||||
digits: true
|
||||
},
|
||||
url: {
|
||||
|
|
|
@ -14,16 +14,18 @@
|
|||
}
|
||||
@section query {
|
||||
<form class="form-inline" role="form">
|
||||
<div class="form-group col-lg-5">
|
||||
<label class="control-label" for="txt_search_name">部门名称</label>
|
||||
<input type="text" class="form-control" id="txt_search_name" />
|
||||
</div>
|
||||
<div class="form-group col-lg-5">
|
||||
<label class="control-label" for="txt_group_desc">部门描述</label>
|
||||
<input type="text" class="form-control" id="txt_group_desc" />
|
||||
</div>
|
||||
<div class="form-group col-lg-2">
|
||||
<button type="button" id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
|
||||
<div class="row">
|
||||
<div class="form-group col-lg-5">
|
||||
<label class="control-label" for="txt_search_name">部门名称</label>
|
||||
<input type="text" class="form-control" id="txt_search_name" />
|
||||
</div>
|
||||
<div class="form-group col-lg-5">
|
||||
<label class="control-label" for="txt_group_desc">部门描述</label>
|
||||
<input type="text" class="form-control" id="txt_group_desc" />
|
||||
</div>
|
||||
<div class="form-group col-lg-2">
|
||||
<button type="button" id="btn_query" class="btn btn-primary form-control"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
@ -42,14 +44,16 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-inline" id="dataForm" name="dataForm" role="form">
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="groupName">部门名称</label>
|
||||
<input type="text" class="form-control" id="groupName" name="groupName" maxlength="50" />
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="groupDesc">部门描述</label>
|
||||
<input type="text" class="form-control" id="groupDesc" name="groupDesc" maxlength="50" />
|
||||
<input type="text" class="form-control hide" id="groupID" name="groupID" />
|
||||
<div class="row">
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="groupName">部门名称</label>
|
||||
<input type="text" class="form-control" id="groupName" name="groupName" maxlength="50" />
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control hidden" id="groupID" name="groupID" />
|
||||
<label class="control-label" for="groupDesc">部门描述</label>
|
||||
<input type="text" class="form-control" id="groupDesc" name="groupDesc" maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -20,24 +20,26 @@
|
|||
}
|
||||
@section query {
|
||||
<form class="form-inline" role="form">
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
||||
<label class="control-label" for="txt_parent_menus_name">父级菜单</label>
|
||||
<input type="text" class="form-control" id="txt_parent_menus_name" />
|
||||
</div>
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
||||
<label class="control-label" for="txt_menus_name">菜单名称</label>
|
||||
<input type="text" class="form-control" id="txt_menus_name" />
|
||||
</div>
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
||||
<label class="control-label" for="sel_menus_category">菜单类别</label>
|
||||
<select class="selectpicker form-control" data-width="auto" id="sel_menus_category">
|
||||
<option value="">全部</option>
|
||||
<option value="0">系统菜单</option>
|
||||
<option value="1">外部菜单</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-2 col-lg-2">
|
||||
<button type="button" id="btn_query" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
|
||||
<div class="row">
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
||||
<label class="control-label" for="txt_parent_menus_name">父级菜单</label>
|
||||
<input type="text" class="form-control" id="txt_parent_menus_name" />
|
||||
</div>
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
||||
<label class="control-label" for="txt_menus_name">菜单名称</label>
|
||||
<input type="text" class="form-control" id="txt_menus_name" />
|
||||
</div>
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-3 col-lg-3">
|
||||
<label class="control-label" for="sel_menus_category">菜单类别</label>
|
||||
<select class="selectpicker" data-width="auto" id="sel_menus_category">
|
||||
<option value="">全部</option>
|
||||
<option value="0">系统菜单</option>
|
||||
<option value="1">外部菜单</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group col-xs-12 col-sm-6 col-md-2 col-lg-2">
|
||||
<button type="button" id="btn_query" class="btn btn-primary form-control"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
}
|
||||
|
@ -53,49 +55,51 @@
|
|||
</div>
|
||||
<div class="modal-body">
|
||||
<form class="form-inline" id="dataForm" name="dataForm" role="form">
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="parentId">父级菜单</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control hide" id="parentId" name="parentId" />
|
||||
<input type="text" class="form-control" readonly id="parentName" />
|
||||
<span class="input-group-btn">
|
||||
<button id="btnMenuParent" class="btn btn-default" type="button">选择</button>
|
||||
</span>
|
||||
<div class="row">
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control hidden" id="parentId" name="parentId" />
|
||||
<label class="control-label" for="parentName">父级菜单</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" readonly id="parentName" name="parentName" placeholder="请选择...(可为空)" maxlength="50" />
|
||||
<span class="input-group-btn">
|
||||
<button id="btnMenuParent" class="btn btn-default" type="button">选择</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="name">菜单名称</label>
|
||||
<input type="text" class="form-control" id="name" name="name" maxlength="50" />
|
||||
<input type="text" class="form-control hide" id="menuID" name="menuID" />
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="icon">菜单图标</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" readonly id="icon" name="icon" maxlength="50" />
|
||||
<span class="input-group-btn">
|
||||
<button id="btnIcon" class="btn btn-default" type="button">选择</button>
|
||||
</span>
|
||||
<div class="form-group col-lg-6">
|
||||
<input type="text" class="form-control hidden" id="menuID" name="menuID" />
|
||||
<label class="control-label" for="name">菜单名称</label>
|
||||
<input type="text" class="form-control" id="name" name="name" placeholder="不可为空" maxlength="50" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="url">路径</label>
|
||||
<input type="text" class="form-control" id="url" name="url" maxlength="50" />
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="order">菜单序号</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="order" name="order" />
|
||||
<span class="input-group-btn">
|
||||
<button id="btnMenuOrder" class="btn btn-default" type="button">调整</button>
|
||||
</span>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="icon">菜单图标</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" readonly id="icon" name="icon" placeholder="请选择...(可为空)" maxlength="50" />
|
||||
<span class="input-group-btn">
|
||||
<button id="btnIcon" class="btn btn-default" type="button">选择</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="url">路径</label>
|
||||
<input type="text" class="form-control" id="url" name="url" placeholder="不可为空" maxlength="50" />
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="order">菜单序号</label>
|
||||
<div class="input-group">
|
||||
<input type="text" class="form-control" id="order" name="order" data-default-val="10" placeholder="默认为10" maxlength="8" />
|
||||
<span class="input-group-btn">
|
||||
<button id="btnMenuOrder" class="btn btn-default" type="button">调整</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="category">菜单类别</label>
|
||||
<select class="selectpicker" data-width="auto" id="category" name="category" data-default-val="1">
|
||||
<option value="0">系统菜单</option>
|
||||
<option value="1">外部菜单</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group col-lg-6">
|
||||
<label class="control-label" for="category">菜单类别</label>
|
||||
<select class="selectpicker form-control" data-width="auto" id="category">
|
||||
<option value="0">系统菜单</option>
|
||||
<option value="1">外部菜单</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
@ -18,17 +18,11 @@
|
|||
<script src="~/Content/js/framework.js"></script>
|
||||
@RenderSection("Javascript", false)
|
||||
}
|
||||
<section id="container">
|
||||
<section>
|
||||
@RenderSection("header", false)
|
||||
@RenderSection("navigator", false)
|
||||
<section id="main-content">
|
||||
<section class="wrapper">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
@RenderBody()
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@RenderBody()
|
||||
</section>
|
||||
@Html.Partial("Footer")
|
||||
</section>
|
||||
|
|
|
@ -13,16 +13,10 @@
|
|||
<script src="~/Content/js/framework.js"></script>
|
||||
@RenderSection("Javascript", false)
|
||||
}
|
||||
<section id="container">
|
||||
<section>
|
||||
@RenderSection("header", false)
|
||||
<section id="main-content">
|
||||
<section class="wrapper">
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
@RenderBody()
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@RenderBody()
|
||||
</section>
|
||||
@Html.Partial("Footer")
|
||||
</section>
|
||||
|
|
Loading…
Reference in New Issue