innov
/
BootstrapAdmin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修复BUG：菜单二次弹窗在iOS设备中导致滚动条很长很长，修改后位置固定在Top：20px，优化本页面脚本速度

This commit is contained in:
Argo-Lenovo 2016-11-14 19:30:30 +08:00
parent 4b3223b822
commit 06bd77308d
8 changed files with 1894 additions and 1874 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Bootstrap.Admin/Content/css/fa.css
View File

@ -79,12 +79,6 @@
background: #FF6C60 !important; background: #FF6C60 !important;
} }
#pickIcon {
position: fixed;
top: 0;
left: 0;
}
.icon-content { .icon-content {
position: fixed; position: fixed;
top: 15px; top: 15px;
@ -120,8 +114,10 @@
.icon-content .modal-footer i { .icon-content .modal-footer i {
vertical-align: middle; vertical-align: middle;
font-size: 22px; font-size: 22px;
padding: 0 15px; width: 30px;
text-align: center;
color: #337ab7; color: #337ab7;
display: inline-block;
} }
.fontawesome-icon-list .fa-hover a { .fontawesome-icon-list .fa-hover a {
@ -196,14 +192,12 @@
.menu-content { .menu-content {
display: none; display: none;
z-index: 1051; z-index: 1051;
margin: auto;
width: 100%;
margin-top: 100px;
} }
.menu-content .modal-body { .menu-content .modal-body {
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 400px;
padding-bottom: 15px;
} }
.menu-content .dd { .menu-content .dd {

16
Bootstrap.Admin/Content/css/fa.responsive.css
View File

@ -1,9 +1,13 @@
@media (max-height: 768px) { @media (max-width: 360px) {
.icon-content .modal-footer span {
display: none;
}
}
@media (max-height: 768px) {
.menu-content { .menu-content {
position: absolute; top: 20px;
margin-top: inherit; position: fixed;
left: 50%; width: inherit;
margin-left: -300px;
top: 50px;
} }
} }

6
Bootstrap.Admin/Content/js/Longbow.Common.js
View File

@ -111,6 +111,12 @@
} }
$.fn.extend({ $.fn.extend({
adjustDialog: function () {
var $modal_dialog = this;
var m_top = Math.max(0, ($(window).height() - $modal_dialog.height()) / 2);
$modal_dialog.css({ 'margin': m_top + 'px auto' });
return this;
},
autoCenter: function () { autoCenter: function () {
var that = this; var that = this;
var getHeight = function () { var getHeight = function () {

5
Bootstrap.Admin/Content/js/bootstrap.js vendored
View File

@ -1,4 +1,4 @@
/*! /*!
* Bootstrap v3.3.7 (http://getbootstrap.com) * Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc. * Copyright 2011-2016 Twitter, Inc.
* Licensed under the MIT license * Licensed under the MIT license
@ -1166,8 +1166,7 @@ if (typeof jQuery === 'undefined') {
// added by Argo // added by Argo
var $modal_dialog = $(this.$element[0]).find('.modal-dialog'); var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
var m_top = Math.max(0, ($(document).height() - $modal_dialog.height()) / 2); $modal_dialog.adjustDialog();
$modal_dialog.css({ 'margin': m_top + 'px auto' });
} }
Modal.prototype.resetAdjustments = function () { Modal.prototype.resetAdjustments = function () {

73
Bootstrap.Admin/Scripts/Menus.js
View File

@ -17,16 +17,18 @@
id: 'btn_assignRole', id: 'btn_assignRole',
click: function (row) { click: function (row) {
Role.getRolesByMenuId(row.ID, function (data) { Role.getRolesByMenuId(row.ID, function (data) {
$("#dialogRole .modal-title").text($.format('{0}-角色授权窗口', row.Name)); var dialog = $('#dialogRole');
$('#dialogRole form').html(data); dialog.find('.modal-title').text($.format('{0}-角色授权窗口', row.Name));
$('#dialogRole').modal('show'); dialog.find('form').html(data);
dialog.modal('show');
}); });
} }
}, { }, {
id: 'btnSubmitRole', id: 'btnSubmitRole',
click: function (row) { click: function (row) {
var menuId = row.ID; var menuId = row.ID;
var roleIds = $('#dialogRole :checked').map(function (index, element) { var dialog = $('#dialogRole');
var roleIds = dialog.find('input:checked').map(function (index, element) {
return $(element).val(); return $(element).val();
}).toArray().join(','); }).toArray().join(',');
Role.saveRolesByMenuId(menuId, roleIds, { modal: 'dialogRole' }); Role.saveRolesByMenuId(menuId, roleIds, { modal: 'dialogRole' });
@ -69,31 +71,40 @@
} }
}); });
$('.fontawesome-icon-list ul li').addClass('col-md-3 col-sm-4 col-sm-6'); var $dialog = $('#dialogNew');
var $pickIcon = $('#pickIcon');
var $iconList = $('#iconTab').find('div.fontawesome-icon-list');
var $dialogNew = $dialog.find('div.modal-dialog');
var $dialogIcon = $('#dialogIcon');
var $dialogMenu = $('#dialogSubMenu').find('.modal-content');
var $btnSubmitMenu = $('btnSubmitMenu');
var $btnPickIcon = $('#btnIcon');
var $inputIcon = $('#icon');
$('.fontawesome-icon-list .fa-hover a, .fontawesome-icon-list ul li').click(function () { $iconList.find('ul li').addClass('col-md-3 col-sm-4 col-sm-6');
$('.icon-content .modal-footer i').attr('class', $(this).children('i, span:first').attr('class')); $iconList.on('click', 'div.fa-hover a, ul li', function () {
$pickIcon.attr('class', $(this).find('i, span:first').attr('class'));
return false; return false;
}); });
$('#btnIcon').click(function () { $btnPickIcon.on('click', function () {
$('.icon-content').show(); $dialogIcon.show();
}); });
$('.icon-content button').click(function () { $dialogIcon.find('div.modal-header, div.modal-footer').on('click', 'button', function () {
$('.icon-content').hide(); $dialogIcon.hide();
}); });
$('.icon-content button:last').click(function () { $dialogIcon.find('div.modal-footer').on('click', 'button:last', function () {
var icon = $('.icon-content .modal-footer i').attr('class'); var icon = $pickIcon.attr('class');
$('#icon').val(icon); $('#icon').val(icon);
$('#btnIcon i').attr('class', icon); $('#btnIcon').find('i').attr('class', icon);
}); });
// 排序按钮 // 排序按钮
$('#btnMenuOrder').click(function () { $('#btnMenuOrder').on('click', function () {
$('#dialogNew div.modal-dialog').hide(); $dialogNew.hide();
$('.menu-content button:last').data('type', 'order'); $btnSubmitMenu.data('type', 'order');
// handler new menu // handler new menu
if ($('#menuID').val() == "") { if ($('#menuID').val() == "") {
var menuName = $('#name').val(); var menuName = $('#name').val();
@ -107,14 +118,14 @@
$('div.dd > ol.dd-list > li.dd-item').remove('[data-id="0"]'); $('div.dd > ol.dd-list > li.dd-item').remove('[data-id="0"]');
$('div.dd > ol.dd-list > li.dd-item').hide(); $('div.dd > ol.dd-list > li.dd-item').hide();
$('div.dd > ol.dd-list > li[data-category="' + $('#category').selectpicker('val') + '"]').show(); $('div.dd > ol.dd-list > li[data-category="' + $('#category').selectpicker('val') + '"]').show();
$('.menu-content').show(); $dialogMenu.show().adjustDialog();
}); });
// 选择父节点按钮 // 选择父节点按钮
$('#btnMenuParent').click(function () { $('#btnMenuParent').on('click', function () {
$('#dialogNew div.modal-dialog').hide(); $dialogNew.hide();
$('.menu-content button:last').data('type', 'parent'); $btnSubmitMenu.data('type', 'parent');
$('.menu-content').show(); $dialogMenu.show().adjustDialog();
$('li.dd-item').remove('[data-id="0"]'); $('li.dd-item').remove('[data-id="0"]');
$('div.dd :checkbox').hide(); $('div.dd :checkbox').hide();
$('div.dd > ol.dd-list > li.dd-item').hide(); $('div.dd > ol.dd-list > li.dd-item').hide();
@ -122,15 +133,15 @@
$('div.dd :radio').show(); $('div.dd :radio').show();
}); });
$('.menu-content button').click(function () { $dialogMenu.find('div.modal-header, div.modal-footer').on('click', 'button', function () {
// remove active css // remove active css
$('div.dd li span').removeClass('active'); $('div.dd li span').removeClass('active');
$('.menu-content').hide(); $dialogMenu.hide();
$('#dialogNew div.modal-dialog').show(); $dialogNew.show();
}); });
$('.menu-content button:last').click(function () { $btnSubmitMenu.on('click', function () {
var type = $('.menu-content button:last').data('type'); var type = $(this).data('type');
switch (type) { switch (type) {
case "parent": case "parent":
$('#parentId').val($('.dd3-content :radio:checked').val()); $('#parentId').val($('.dd3-content :radio:checked').val());
@ -140,7 +151,6 @@
var data = $('#nestable_menu').nestable('serialize'); var data = $('#nestable_menu').nestable('serialize');
var mid = $('#menuID').val(); var mid = $('#menuID').val();
for (index in data) { for (index in data) {
window.console.log(index);
if (data[index].id == mid || data[index] == 0) { if (data[index].id == mid || data[index] == 0) {
$('#order').val(10 + index * 10); $('#order').val(10 + index * 10);
break; break;
@ -152,6 +162,13 @@
} }
}); });
// Dialog shown event
$dialog.on('show.bs.modal', function () {
var icon = $inputIcon.val();
if (icon == "") icon = "fa fa-dashboard";
$btnPickIcon.find('i').attr('class', icon);
});
$('#nestable_menu').nestable(); $('#nestable_menu').nestable();
// select // select

6
Bootstrap.Admin/Views/Admin/Menus.cshtml
View File

@ -71,7 +71,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" readonly id="parentName" name="parentName" placeholder="请选择...(可为空)" maxlength="50" /> <input type="text" class="form-control" readonly id="parentName" name="parentName" placeholder="请选择...(可为空)" maxlength="50" />
<span class="input-group-btn"> <span class="input-group-btn">
<button id="btnMenuParent" class="btn btn-default" type="button">选择</button> <button id="btnMenuParent" class="btn btn-default" type="button"><i class="fa fa-hand-o-up"></i>选择</button>
</span> </span>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" readonly id="icon" name="icon" placeholder="请选择...(可为空)" maxlength="50" /> <input type="text" class="form-control" readonly id="icon" name="icon" placeholder="请选择...(可为空)" maxlength="50" />
<span class="input-group-btn"> <span class="input-group-btn">
<button id="btnIcon" class="btn btn-default" type="button">选择</button> <button id="btnIcon" class="btn btn-default" type="button"><i class="fa fa-dashboard"></i>选择</button>
</span> </span>
</div> </div>
</div> </div>
@ -98,7 +98,7 @@
<div class="input-group"> <div class="input-group">
<input type="text" class="form-control" id="order" name="order" data-default-val="10" placeholder="默认为10" maxlength="8" /> <input type="text" class="form-control" id="order" name="order" data-default-val="10" placeholder="默认为10" maxlength="8" />
<span class="input-group-btn"> <span class="input-group-btn">
<button id="btnMenuOrder" class="btn btn-default" type="button">调整</button> <button id="btnMenuOrder" class="btn btn-default" type="button"><i class="fa fa-list-ol"></i>调整</button>
</span> </span>
</div> </div>
</div> </div>

6
Bootstrap.Admin/Views/Shared/IconView.cshtml
View File

@ -1,4 +1,4 @@
<div class="modal-content icon-content"> <div id="dialogIcon" class="modal-content icon-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myIconModalLabel">请选择图标</h4> <h4 class="modal-title" id="myIconModalLabel">请选择图标</h4>
@ -10,7 +10,7 @@
<li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li> <li role="presentation" class="active"><a href="#Fontawesome" data-toggle="tab">Fontawesome 图标</a></li>
<li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li> <li role="presentation"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
</ul> </ul>
<div class="tab-content"> <div id="iconTab" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div> <div role="tabpanel" class="tab-pane active" id="Fontawesome">@Html.Partial("AwesomeIcon")</div>
<div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div> <div role="tabpanel" class="tab-pane" id="Glyphicons">@Html.Partial("Glyphicons")</div>
</div> </div>
@ -42,7 +42,7 @@
<i id="fa-bottom"></i> <i id="fa-bottom"></i>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<span>被选择的图标：</span><i></i> <span>被选择的图标：</span><i id="pickIcon"></i>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button> <button type="button" class="btn btn-primary" id="btnSubmitIcon">保存</button>
</div> </div>

2
Bootstrap.Admin/Views/Shared/MenuTree.cshtml
View File

@ -1,5 +1,5 @@
@model IEnumerable<Menu> @model IEnumerable<Menu>
<div class="modal-dialog"> <div id="dialogSubMenu" class="modal-dialog">
<div class="modal-content menu-content"> <div class="modal-content menu-content">
<div class="modal-header"> <div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>