molong/sentcms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改后台默认样式

Browse Source 
默认固定头部、底部以及左侧菜单
This commit is contained in:
molong
2017-06-11 09:26:34 +08:00
parent 6a98708e85
commit 9d6a9e1c9c
3 changed files with 254 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

561
application/admin/static/js/app.js
View File

@@ -1,328 +1,265 @@
$(function($) { $(function($) {
var storage, fail, uid; var storage, fail, uid;
try { try {
uid = new Date; (storage = window.localStorage).setItem(uid, uid); uid = new Date; (storage = window.localStorage).setItem(uid, uid);
fail = storage.getItem(uid) != uid; fail = storage.getItem(uid) != uid;
storage.removeItem(uid); storage.removeItem(uid);
fail && (storage = false); fail && (storage = false);
} catch(e) {} } catch(e) {}
if (storage) { if (storage) {
try { try {
var usedSkin = localStorage.getItem('config-skin'); var usedSkin = localStorage.getItem('config-skin');
if (usedSkin != '') { if (usedSkin != '') {
$('#skin-colors .skin-changer').removeClass('active'); $('#skin-colors .skin-changer').removeClass('active');
$('#skin-colors .skin-changer[data-skin="' + usedSkin + '"]').addClass('active'); $('#skin-colors .skin-changer[data-skin="' + usedSkin + '"]').addClass('active');
} }
var fixedHeader = localStorage.getItem('config-fixed-header');
if (fixedHeader == 'fixed-header') { //固定头部、左侧菜单以及底部版权信息
$('body').addClass(fixedHeader); $('body').addClass('fixed-header');
$('#config-fixed-header').prop('checked', true); $('body').addClass('fixed-footer');
} $('body').addClass('fixed-leftmenu');
var fixedFooter = localStorage.getItem('config-fixed-footer'); if ($('#page-wrapper').hasClass('nav-small')) {
if (fixedFooter == 'fixed-footer') { $('#page-wrapper').removeClass('nav-small');
$('body').addClass(fixedFooter); }
$('#config-fixed-footer').prop('checked', true); $('.fixed-leftmenu #col-left').nanoScroller({
} alwaysVisible: true,
var boxedLayout = localStorage.getItem('config-boxed-layout'); iOSNativeScrolling: false,
if (boxedLayout == 'boxed-layout') { preventPageScrolling: true,
$('body').addClass(boxedLayout); contentClass: 'col-left-nano-content'
$('#config-boxed-layout').prop('checked', true); });
}
var fixedLeftmenu = localStorage.getItem('config-fixed-leftmenu');
if (fixedLeftmenu == 'fixed-leftmenu') {
$('body').addClass(fixedLeftmenu);
$('#config-fixed-sidebar').prop('checked', true);
if ($('#page-wrapper').hasClass('nav-small')) {
$('#page-wrapper').removeClass('nav-small');
}
$('.fixed-leftmenu #col-left').nanoScroller({
alwaysVisible: true,
iOSNativeScrolling: false,
preventPageScrolling: true,
contentClass: 'col-left-nano-content'
});
}
var sidebarSamll = localStorage.getItem('config-sidebar-samll');
if (sidebarSamll == 'sidebar-samll') {
$('#config-sidebar-samll').prop('checked', true);
$('#page-wrapper').addClass('nav-small');
} else {
$('#page-wrapper').removeClass('nav-small');
};
} catch(e) {
console.log(e);
}
}
$('#config-tool-cog').on('click',
function() {
$('#config-tool').toggleClass('closed');
});
$('#config-fixed-header').on('change',
function() {
var fixedHeader = '';
if ($(this).is(':checked')) {
$('body').addClass('fixed-header');
fixedHeader = 'fixed-header';
} else {
$('body').removeClass('fixed-header');
if ($('#config-fixed-sidebar').is(':checked')) {
$('#config-fixed-sidebar').prop('checked', false);
$('#config-fixed-sidebar').trigger('change');
location.reload();
}
}
writeStorage(storage, 'config-fixed-header', fixedHeader);
});
$('#config-fixed-footer').on('change',
function() {
var fixedFooter = '';
if ($(this).is(':checked')) {
$('body').addClass('fixed-footer');
fixedFooter = 'fixed-footer';
} else {
$('body').removeClass('fixed-footer');
}
writeStorage(storage, 'config-fixed-footer', fixedFooter);
});
$('#config-boxed-layout').on('change',
function() {
var boxedLayout = '';
if ($(this).is(':checked')) {
$('body').addClass('boxed-layout');
boxedLayout = 'boxed-layout';
} else {
$('body').removeClass('boxed-layout');
}
writeStorage(storage, 'config-boxed-layout', boxedLayout);
});
$('#config-fixed-sidebar').on('change',
function() {
var fixedSidebar = '';
if ($(this).is(':checked')) {
if (!$('#config-fixed-header').is(':checked')) {
$('#config-fixed-header').prop('checked', true);
$('#config-fixed-header').trigger('change');
}
if ($('#page-wrapper').hasClass('nav-small')) {
$('#page-wrapper').removeClass('nav-small');
}
$('body').addClass('fixed-leftmenu');
fixedSidebar = 'fixed-leftmenu';
$('.fixed-leftmenu #col-left').nanoScroller({
alwaysVisible: true,
iOSNativeScrolling: false,
preventPageScrolling: true,
contentClass: 'col-left-nano-content'
});
writeStorage(storage, 'config-fixed-leftmenu', fixedSidebar);
} else {
$('body').removeClass('fixed-leftmenu');
writeStorage(storage, 'config-fixed-leftmenu', fixedSidebar);
location.reload();
}
});
$('#config-sidebar-samll').on('change',function(){
var sidebarSamll = '';
if ($(this).is(':checked')) {
$('#page-wrapper').addClass('nav-small');
sidebarSamll = 'sidebar-samll';
writeStorage(storage, 'config-sidebar-samll', sidebarSamll);
} else {
$('#page-wrapper').removeClass('nav-small');
writeStorage(storage, 'config-sidebar-samll', sidebarSamll);
location.reload();
}
})
if (!storage) {
$('#config-fixed-header').prop('checked', false);
$('#config-fixed-footer').prop('checked', false);
$('#config-fixed-sidebar').prop('checked', false);
$('#config-boxed-layout').prop('checked', false);
$('#config-sidebar-samll').prop('checked', false);
}
$('#skin-colors .skin-changer').on('click',
function() {
$('body').removeClassPrefix('theme-');
$('body').addClass($(this).data('skin'));
$('#skin-colors .skin-changer').removeClass('active');
$(this).addClass('active');
writeStorage(storage, 'config-skin', $(this).data('skin'));
});
//合并自script.js var boxedLayout = localStorage.getItem('config-boxed-layout');
setTimeout(function() { if (boxedLayout == 'boxed-layout') {
$('#content-wrapper > .row').css({ $('body').addClass(boxedLayout);
opacity: 1 $('#config-boxed-layout').prop('checked', true);
}); }
}, var sidebarSamll = localStorage.getItem('config-sidebar-samll');
200); if (sidebarSamll == 'sidebar-samll') {
$('#sidebar-nav,#nav-col-submenu').on('click', '.dropdown-toggle', $('#config-sidebar-samll').prop('checked', true);
function(e) { $('#page-wrapper').addClass('nav-small');
e.preventDefault(); } else {
var $item = $(this).parent(); $('#page-wrapper').removeClass('nav-small');
if (!$item.hasClass('open')) { };
$item.parent().find('.open .submenu').slideUp('fast'); } catch(e) {
$item.parent().find('.open').toggleClass('open'); console.log(e);
} }
$item.toggleClass('open'); }
if ($item.hasClass('open')) { $('#config-tool-cog').on('click',
$item.children('.submenu').slideDown('fast'); function() {
} else { $('#config-tool').toggleClass('closed');
$item.children('.submenu').slideUp('fast'); });
} $('#config-boxed-layout').on('change',
}); function() {
$('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav .dropdown-toggle', var boxedLayout = '';
function(e) { if ($(this).is(':checked')) {
if ($(document).width() >= 992) { $('body').addClass('boxed-layout');
var $item = $(this).parent(); boxedLayout = 'boxed-layout';
if ($('body').hasClass('fixed-leftmenu')) { } else {
var topPosition = $item.position().top; $('body').removeClass('boxed-layout');
if ((topPosition + 4 * $(this).outerHeight()) >= $(window).height()) { }
topPosition -= 6 * $(this).outerHeight(); writeStorage(storage, 'config-boxed-layout', boxedLayout);
} });
$('#nav-col-submenu').html($item.children('.submenu').clone());
$('#nav-col-submenu > .submenu').css({ $('#config-sidebar-samll').on('change',function(){
'top': topPosition var sidebarSamll = '';
}); if ($(this).is(':checked')) {
} $('#page-wrapper').addClass('nav-small');
$item.addClass('open'); sidebarSamll = 'sidebar-samll';
$item.children('.submenu').slideDown('fast'); writeStorage(storage, 'config-sidebar-samll', sidebarSamll);
} } else {
}); $('#page-wrapper').removeClass('nav-small');
$('body').on('mouseleave', '#page-wrapper.nav-small #sidebar-nav > .nav-pills > li', writeStorage(storage, 'config-sidebar-samll', sidebarSamll);
function(e) { location.reload();
if ($(document).width() >= 992) { }
var $item = $(this); })
if ($item.hasClass('open')) { if (!storage) {
$item.find('.open .submenu').slideUp('fast'); $('#config-boxed-layout').prop('checked', false);
$item.find('.open').removeClass('open'); $('#config-sidebar-samll').prop('checked', false);
$item.children('.submenu').slideUp('fast'); }
} $('#skin-colors .skin-changer').on('click',
$item.removeClass('open'); function() {
} $('body').removeClassPrefix('theme-');
}); $('body').addClass($(this).data('skin'));
$('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav a:not(.dropdown-toggle)', $('#skin-colors .skin-changer').removeClass('active');
function(e) { $(this).addClass('active');
if ($('body').hasClass('fixed-leftmenu')) { writeStorage(storage, 'config-skin', $(this).data('skin'));
$('#nav-col-submenu').html(''); });
}
});
$('body').on('mouseleave', '#page-wrapper.nav-small #nav-col', //合并自script.js
function(e) { setTimeout(function() {
if ($('body').hasClass('fixed-leftmenu')) { $('#content-wrapper > .row').css({
$('#nav-col-submenu').html(''); opacity: 1
} });
}); },
$('#make-small-nav').click(function(e) { 200);
$('#page-wrapper').toggleClass('nav-small'); $('#sidebar-nav,#nav-col-submenu').on('click', '.dropdown-toggle',
}); function(e) {
$(window).smartresize(function() { e.preventDefault();
if ($(document).width() <= 991) { var $item = $(this).parent();
$('#page-wrapper').removeClass('nav-small'); if (!$item.hasClass('open')) {
} $item.parent().find('.open .submenu').slideUp('fast');
}); $item.parent().find('.open').toggleClass('open');
$('.mobile-search').click(function(e) { }
e.preventDefault(); $item.toggleClass('open');
$('.mobile-search').addClass('active'); if ($item.hasClass('open')) {
$('.mobile-search form input.form-control').focus(); $item.children('.submenu').slideDown('fast');
}); } else {
$(document).mouseup(function(e) { $item.children('.submenu').slideUp('fast');
var container = $('.mobile-search'); }
if (!container.is(e.target) && container.has(e.target).length === 0) { });
container.removeClass('active'); $('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav .dropdown-toggle',
} function(e) {
}); if ($(document).width() >= 992) {
$('.fixed-leftmenu #col-left').nanoScroller({ var $item = $(this).parent();
alwaysVisible: true, if ($('body').hasClass('fixed-leftmenu')) {
iOSNativeScrolling: false, var topPosition = $item.position().top;
preventPageScrolling: true, if ((topPosition + 4 * $(this).outerHeight()) >= $(window).height()) {
contentClass: 'col-left-nano-content' topPosition -= 6 * $(this).outerHeight();
}); }
$("[data-toggle='tooltip']").each(function(index, el) { $('#nav-col-submenu').html($item.children('.submenu').clone());
$(el).tooltip({ $('#nav-col-submenu > .submenu').css({
placement: $(this).data("placement") || 'top' 'top': topPosition
}); });
}); }
$item.addClass('open');
$item.children('.submenu').slideDown('fast');
}
});
$('body').on('mouseleave', '#page-wrapper.nav-small #sidebar-nav > .nav-pills > li',
function(e) {
if ($(document).width() >= 992) {
var $item = $(this);
if ($item.hasClass('open')) {
$item.find('.open .submenu').slideUp('fast');
$item.find('.open').removeClass('open');
$item.children('.submenu').slideUp('fast');
}
$item.removeClass('open');
}
});
$('body').on('mouseenter', '#page-wrapper.nav-small #sidebar-nav a:not(.dropdown-toggle)',
function(e) {
if ($('body').hasClass('fixed-leftmenu')) {
$('#nav-col-submenu').html('');
}
});
$('body').on('mouseleave', '#page-wrapper.nav-small #nav-col',
function(e) {
if ($('body').hasClass('fixed-leftmenu')) {
$('#nav-col-submenu').html('');
}
});
$('#make-small-nav').click(function(e) {
$('#page-wrapper').toggleClass('nav-small');
});
$(window).smartresize(function() {
if ($(document).width() <= 991) {
$('#page-wrapper').removeClass('nav-small');
}
});
$('.mobile-search').click(function(e) {
e.preventDefault();
$('.mobile-search').addClass('active');
$('.mobile-search form input.form-control').focus();
});
$(document).mouseup(function(e) {
var container = $('.mobile-search');
if (!container.is(e.target) && container.has(e.target).length === 0) {
container.removeClass('active');
}
});
$('.fixed-leftmenu #col-left').nanoScroller({
alwaysVisible: true,
iOSNativeScrolling: false,
preventPageScrolling: true,
contentClass: 'col-left-nano-content'
});
$("[data-toggle='tooltip']").each(function(index, el) {
$(el).tooltip({
placement: $(this).data("placement") || 'top'
});
});
}); });
function writeStorage(storage, key, value) { function writeStorage(storage, key, value) {
if (storage) { if (storage) {
try { try {
localStorage.setItem(key, value); localStorage.setItem(key, value);
} catch(e) { } catch(e) {
console.log(e); console.log(e);
} }
} }
} }
$.fn.removeClassPrefix = function(prefix) { $.fn.removeClassPrefix = function(prefix) {
this.each(function(i, el) { this.each(function(i, el) {
var classes = el.className.split(" ").filter(function(c) { var classes = el.className.split(" ").filter(function(c) {
return c.lastIndexOf(prefix, 0) !== 0; return c.lastIndexOf(prefix, 0) !== 0;
}); });
el.className = classes.join(" "); el.className = classes.join(" ");
}); });
return this; return this;
}; (function($, sr) { }; (function($, sr) {
var debounce = function(func, threshold, execAsap) { var debounce = function(func, threshold, execAsap) {
var timeout; var timeout;
return function debounced() { return function debounced() {
var obj = this, var obj = this,
args = arguments; args = arguments;
function delayed() { function delayed() {
if (!execAsap) func.apply(obj, args); if (!execAsap) func.apply(obj, args);
timeout = null; timeout = null;
}; };
if (timeout) clearTimeout(timeout); if (timeout) clearTimeout(timeout);
else if (execAsap) func.apply(obj, args); else if (execAsap) func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100); timeout = setTimeout(delayed, threshold || 100);
}; };
} }
jQuery.fn[sr] = function(fn) { jQuery.fn[sr] = function(fn) {
return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr);
}; };
})(jQuery, 'smartresize'); })(jQuery, 'smartresize');
function helpIntro(){ function helpIntro(){
var placementRight = 'right'; var placementRight = 'right';
var placementLeft = 'left'; var placementLeft = 'left';
if ($('body').hasClass('rtl')) { if ($('body').hasClass('rtl')) {
placementRight = 'left'; placementRight = 'left';
placementLeft = 'right'; placementLeft = 'right';
} }
// Define the tour! // Define the tour!
var tour = { var tour = {
id: "Cube-intro", id: "Cube-intro",
steps: [ steps: [
{ {
target: 'make-small-nav', target: 'make-small-nav',
title: "设置小菜单按钮", title: "设置小菜单按钮",
content: "点击小菜单可以把左侧菜单变成小菜单，增大右侧操作区域！", content: "点击小菜单可以把左侧菜单变成小菜单，增大右侧操作区域！",
placement: "bottom", placement: "bottom",
zindex: 999, zindex: 999,
xOffset: -8 xOffset: -8
}, },
{ {
target: 'config-tool-options', target: 'config-tool-options',
title: "后台配置工具", title: "后台配置工具",
content: "配置后台主题色彩，定制头部、左侧菜单以及底部信息", content: "配置后台主题色彩，定制头部、左侧菜单以及底部信息",
placement: placementLeft, placement: placementLeft,
zindex: 999, zindex: 999,
fixedElement: true, fixedElement: true,
xOffset: -55 xOffset: -55
}, },
{ {
target: 'sidebar-nav', target: 'sidebar-nav',
title: "左侧导航区域", title: "左侧导航区域",
content: "左侧功能导航区域。", content: "左侧功能导航区域。",
placement: placementRight placement: placementRight
} }
], ],
showPrevButton: true showPrevButton: true
}; };
// Start the tour! // Start the tour!
hopscotch.startTour(tour); hopscotch.startTour(tour);
} }

6
application/admin/static/js/skin-changer.js
View File

@@ -11,11 +11,11 @@ if (storage) {
if (usedSkin != '' && usedSkin != null) { if (usedSkin != '' && usedSkin != null) {
document.body.className = usedSkin; document.body.className = usedSkin;
} else { } else {
document.body.className = 'theme-whbl'; document.body.className = '';
} }
} catch(e) { } catch(e) {
document.body.className = 'theme-whbl'; document.body.className = '';
} }
} else { } else {
document.body.className = 'theme-whbl'; document.body.className = '';
} }

18
application/admin/view/public/tool.html
View File

@@ -5,24 +5,6 @@
<div id="config-tool-options"> <div id="config-tool-options">
<h4>布局选项</h4> <h4>布局选项</h4>
<ul> <ul>
<li>
<div class="checkbox-nice">
<input type="checkbox" id="config-fixed-header"/>
<label for="config-fixed-header">固定头部</label>
</div>
</li>
<li>
<div class="checkbox-nice">
<input type="checkbox" id="config-fixed-sidebar"/>
<label for="config-fixed-sidebar">固定左侧菜单</label>
</div>
</li>
<li>
<div class="checkbox-nice">
<input type="checkbox" id="config-fixed-footer"/>
<label for="config-fixed-footer">固定底部</label>
</div>
</li>
<li> <li>
<div class="checkbox-nice"> <div class="checkbox-nice">
<input type="checkbox" id="config-boxed-layout"/> <input type="checkbox" id="config-boxed-layout"/>