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

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

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

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

@ -111,6 +111,12 @@
}
$.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 () {
var that = this;
var getHeight = function () {

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

File diff suppressed because it is too large Load Diff

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

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

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

@ -71,7 +71,7 @@
<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>
<button id="btnMenuParent" class="btn btn-default" type="button"><i class="fa fa-hand-o-up"></i>选择</button>
</span>
</div>
</div>
@ -85,7 +85,7 @@
<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>
<button id="btnIcon" class="btn btn-default" type="button"><i class="fa fa-dashboard"></i>选择</button>
</span>
</div>
</div>
@ -98,7 +98,7 @@
<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>
<button id="btnMenuOrder" class="btn btn-default" type="button"><i class="fa fa-list-ol"></i>调整</button>
</span>
</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">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<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"><a href="#Glyphicons" data-toggle="tab">Glyphicons 图标</a></li>
</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" id="Glyphicons">@Html.Partial("Glyphicons")</div>
</div>
@ -42,7 +42,7 @@
<i id="fa-bottom"></i>
</div>
<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-primary" id="btnSubmitIcon">保存</button>
</div>

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

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