mirror of
https://github.com/fofolee/uTools-Manuals.git
synced 2025-06-07 22:14:04 +08:00
手册界面增加目录索引
This commit is contained in:
fofolee
parent
b99d9f37ab
commit
2a9e7c548f
@ -72,6 +72,7 @@ manualSubInput = () => {
|
||||
// 显示手册
|
||||
showManual = path => {
|
||||
utools.setExpendHeight(550);
|
||||
$('#manual').getNiceScroll().resize()
|
||||
if (/^((ht|f)tps?):\/\//.test(path)) {
|
||||
window.open(path);
|
||||
} else {
|
||||
@ -100,6 +101,11 @@ showManual = path => {
|
||||
$("#manual").fadeIn()
|
||||
Prism.highlightAll();
|
||||
location.href = e ? id : '#manualBody';
|
||||
$('#manualNavi').autoMenu();
|
||||
if ($('h1,h2,h3').length < 10 && $('#manual ul').is(":visible")) {
|
||||
$('.btn-box span').removeClass('icon-minus-sign').addClass('icon-plus-sign')
|
||||
$('#manual ul').hide()
|
||||
}
|
||||
manualSubInput();
|
||||
});
|
||||
request.fail(function (xhr, err) {
|
||||
|
||||
@ -139,9 +139,9 @@ $("#options").on('change', 'input[type=checkbox]', async function () {
|
||||
var featureConf = allFts[code].features;
|
||||
if($(this).prop('checked')){
|
||||
featureConf.cmds.push({
|
||||
"type": "over",
|
||||
"label": featureConf.cmds[0],
|
||||
"maxLength": 50
|
||||
"type": "regex",
|
||||
"match":"/[a-zA-Z\\.\\_]{2,20}/i",
|
||||
"label": featureConf.cmds[0]
|
||||
});
|
||||
}
|
||||
utools.setFeature(featureConf);
|
||||
|
||||
181
src/assets/plugins/jquery.autoMenu.js
Normal file
181
src/assets/plugins/jquery.autoMenu.js
Normal file
@ -0,0 +1,181 @@
|
||||
/*
|
||||
* blogMenu plugin 1.0 2017-09-01 by cary
|
||||
* 说明：自动根据标签（h3,h4）生成博客目录
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
var Menu = (function() {
|
||||
/**
|
||||
* 插件实例化部分，初始化时调用的代码可以放这里
|
||||
* @param element 传入jq对象的选择器，如 $("#J_plugin").plugin() ,其中 $("#J_plugin") 即是 element
|
||||
* @param options 插件的一些参数神马的
|
||||
* @constructor
|
||||
*/
|
||||
var Plugin = function(element, options) {
|
||||
//将dom jquery对象赋值给插件，方便后续调用
|
||||
this.$element = $(element);
|
||||
|
||||
//将插件的默认参数及用户定义的参数合并到一个新的obj里
|
||||
this.settings = $.extend({}, $.fn.autoMenu.defaults, typeof options === 'object' && options)
|
||||
//如果将参数设置在dom的自定义属性里，也可以这样写
|
||||
//this.settings = $.extend({}, $.fn.plugin.defaults, this.$element.data(), options);
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 将插件所有函数放在prototype的大对象里
|
||||
* 插件的公共方法，相当于接口函数，用于给外部调用
|
||||
* @type {{}}
|
||||
*/
|
||||
Plugin.prototype = {
|
||||
init: function() {
|
||||
var opts = this.settings;
|
||||
|
||||
//console.log(opts)
|
||||
this.$element.html(this.createHtml());
|
||||
this.setActive();
|
||||
this.bindEvent();
|
||||
|
||||
},
|
||||
createHtml: function() {
|
||||
var that = this;
|
||||
var opts = that.settings;
|
||||
var width = typeof opts.width === 'number' && opts.width;
|
||||
var height = typeof opts.height === 'number' && opts.height;
|
||||
var padding = typeof opts.padding === 'number' && opts.padding;
|
||||
that.$element.width(width + padding * 2);
|
||||
var html = '<ul style="height: ' + height + 'px;padding:' + padding + 'px">';
|
||||
var num = 0;
|
||||
$('*').each(function() {
|
||||
var _this = $(this);
|
||||
if (_this.get(0).tagName == opts.levelOne.toUpperCase()) {
|
||||
_this.attr('id', num);
|
||||
var nodetext = that.handleTxt(_this.html());
|
||||
html += '<li name="' + num + '"><a href="#' + num + '">' + nodetext + '</a></li>';
|
||||
num++;
|
||||
} else if (_this.get(0).tagName == opts.levelTwo.toUpperCase()) {
|
||||
_this.attr('id', num);
|
||||
var nodetext = that.handleTxt(_this.html());
|
||||
html += '<li class="sub" name="' + num + '"><a href="#' + num + '">' + nodetext + '</a></li>';
|
||||
num++;
|
||||
} else if (_this.get(0).tagName == opts.levelThree.toUpperCase()) {
|
||||
_this.attr('id', num);
|
||||
var nodetext = that.handleTxt(_this.html());
|
||||
html += '<li class="ssub" name="' + num + '"><a href="#' + num + '">' + nodetext + '</a></li>';
|
||||
num++;
|
||||
}
|
||||
})
|
||||
html += '</ul><div class="btn-box">' +
|
||||
'<span class="icon-minus-sign"></span>' +
|
||||
'</a>';
|
||||
return html;
|
||||
},
|
||||
handleTxt: function(txt) {
|
||||
//正则表达式去除HTML的标签
|
||||
return txt.replace(/<\/?[^>]+>/g, "").trim();
|
||||
},
|
||||
setActive: function() {
|
||||
var $el = this.$element,
|
||||
opts = this.settings,
|
||||
items = opts.levelOne + ',' + opts.levelTwo + ',' + opts.levelThree,
|
||||
$items = $(items),
|
||||
// offTop = opts.offTop,
|
||||
currentId;
|
||||
if ($("#manual").scrollTop() == 0) {
|
||||
//初始化active
|
||||
$el.find('li').removeClass('active').eq(0).addClass('active');
|
||||
return;
|
||||
}
|
||||
$items.each(function() {
|
||||
var m = $(this),
|
||||
itemTop = m.offset().top;
|
||||
if (itemTop < 1) {
|
||||
currentId = m.attr('id');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
})
|
||||
var currentLink = $el.find('.active');
|
||||
if (currentId && currentLink.attr('name') != currentId) {
|
||||
currentLink.removeClass('active');
|
||||
$el.find('[name=' + currentId + ']').addClass('active')
|
||||
}
|
||||
},
|
||||
bindEvent: function() {
|
||||
var _this = this;
|
||||
$('#manual').scroll(function() {
|
||||
_this.setActive()
|
||||
var actived = $('#manual .active')
|
||||
if(actived) actived.get(0).scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
});
|
||||
_this.$element.off()
|
||||
_this.$element.on('click', '.btn-box', function() {
|
||||
if ($(this).find('span').hasClass('icon-minus-sign')) {
|
||||
$(this).find('span').removeClass('icon-minus-sign').addClass('icon-plus-sign');
|
||||
_this.$element.find('ul').fadeOut();
|
||||
} else {
|
||||
$(this).find('span').removeClass('icon-plus-sign').addClass('icon-minus-sign');
|
||||
_this.$element.find('ul').fadeIn();
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return Plugin;
|
||||
|
||||
})();
|
||||
|
||||
|
||||
/**
|
||||
* 这里是将Plugin对象 转为jq插件的形式进行调用
|
||||
* 定义一个插件 plugin
|
||||
*/
|
||||
$.fn.autoMenu = function(options) {
|
||||
return this.each(function() {
|
||||
var $el = $(this),
|
||||
// menu = $el.data('autoMenu'),
|
||||
option = $.extend({}, $.fn.autoMenu.defaults, typeof options === 'object' && options);
|
||||
// if (!menu) {
|
||||
//将实例化后的插件缓存在dom结构里（内存里）
|
||||
$el.data('autoMenu', new Menu(this, option));
|
||||
// }
|
||||
|
||||
/**
|
||||
* 如果插件的参数是一个字符串，则 调用 插件的 字符串方法。
|
||||
* 如 $('#id').plugin('doSomething') 则实际调用的是 $('#id).plugin.doSomething();
|
||||
*/
|
||||
if ($.type(options) === 'string') menu[option]();
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 插件的默认值
|
||||
*/
|
||||
$.fn.autoMenu.defaults = {
|
||||
levelOne: 'h1', //一级标题
|
||||
levelTwo: 'h2', //二级标题（暂不支持更多级）
|
||||
levelThree: 'h3', //二级标题（暂不支持更多级）
|
||||
width: 200, //容器宽度
|
||||
height: 400, //容器高度
|
||||
padding: 20, //内部间距
|
||||
offTop: 100, //滚动切换导航时离顶部的距离
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* 优雅处： 通过data-xxx 的方式 实例化插件。
|
||||
* 这样的话 在页面上就不需要显示调用了。
|
||||
* 可以查看bootstrap 里面的JS插件写法
|
||||
*/
|
||||
$(function() {
|
||||
if ($('[data-autoMenu]').length > 0) {
|
||||
new Menu($('[data-autoMenu]'));
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})(jQuery);
|
||||
148
src/assets/styles/jquery.autoMenu.css
Normal file
148
src/assets/styles/jquery.autoMenu.css
Normal file
@ -0,0 +1,148 @@
|
||||
@charset "utf-8";
|
||||
/*reset*/
|
||||
|
||||
/* body,
|
||||
div,
|
||||
ul,
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
ol,
|
||||
dl,
|
||||
dd,
|
||||
dt,
|
||||
form,
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
strong,
|
||||
em {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
box-sizing: content-box
|
||||
} */
|
||||
|
||||
/* li {
|
||||
list-style: none;
|
||||
} */
|
||||
|
||||
/* a {
|
||||
text-decoration: none;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:focus {
|
||||
outline: none;
|
||||
} */
|
||||
|
||||
/*-------main---------*/
|
||||
|
||||
#manualNavi {
|
||||
position: fixed;
|
||||
bottom: 10%;
|
||||
right: 5%;
|
||||
z-index: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#manualNavi ul {
|
||||
line-height: 2;
|
||||
overflow-y: auto;
|
||||
background: #ffffffe0;
|
||||
-webkit-box-shadow: 0 0 10px #CCC;
|
||||
-moz-box-shadow: 0 0 10px #CCC;
|
||||
box-shadow: 0 0 10px #CCC;
|
||||
}
|
||||
|
||||
#manualNavi li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#manualNavi ul>li.sub {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
#manualNavi ul>li.ssub {
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
/* #manualNavi ul>li>a {
|
||||
color: #399c9c;
|
||||
} */
|
||||
|
||||
#manualNavi ul>li.active>a {
|
||||
color: #ff5370;
|
||||
}
|
||||
|
||||
.btn-box {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-plus-sign {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #91ba61;
|
||||
background: #91ba61;
|
||||
position: absolute;
|
||||
top: -415px;
|
||||
left: 245px;
|
||||
}
|
||||
|
||||
.icon-plus-sign:before,
|
||||
.icon-plus-sign:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 4px;
|
||||
height: 18px;
|
||||
background: #fff;
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 7px;
|
||||
}
|
||||
|
||||
.icon-plus-sign:after {
|
||||
-webkit-transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.icon-minus-sign {
|
||||
display: inline-block;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
border: 4px solid #ff5370;
|
||||
background: #ff5370;
|
||||
position: absolute;
|
||||
top: -415px;
|
||||
left: 245px;
|
||||
}
|
||||
|
||||
.icon-minus-sign:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 18px;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
border-radius: 1px;
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 0px;
|
||||
}
|
||||
@ -8,7 +8,9 @@
|
||||
<link rel="stylesheet" href="assets/styles/style.css">
|
||||
<link rel="stylesheet" href="assets/styles/options.css">
|
||||
<link rel="stylesheet" href="assets/styles/prism.css">
|
||||
<link rel="stylesheet" href="assets/styles/jquery.autoMenu.css">
|
||||
<script src="assets/plugins/jquery-3.3.1.min.js"></script>
|
||||
<script src="assets/plugins/jquery.autoMenu.js"></script>
|
||||
<script src="assets/plugins/hlsearch.js"></script>
|
||||
<script src="assets/plugins/jquery.nicescroll.min.js"></script>
|
||||
<script src="assets/plugins/prism.js"></script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user