重新整理样式,适配对话窗口内空间间隙,增加控件默认值支持data-default-val设置

This commit is contained in:
Argo-Lenovo 2016-11-09 14:48:21 +08:00
parent 4292f94dc0
commit e8d44d8b1e
9 changed files with 155 additions and 169 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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) {

View File

@ -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;
}

View File

@ -56,12 +56,7 @@
required: true,
maxlength: 50
},
icon: {
required: true,
maxlength: 50
},
order: {
required: true,
digits: true
},
url: {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>