From 2a9e7c548f578b9e83585dccb2259c6d1c2e513b Mon Sep 17 00:00:00 2001 From: fofolee Date: Sat, 6 Jun 2020 14:30:46 +0800 Subject: [PATCH] =?UTF-8?q?=E6=89=8B=E5=86=8C=E7=95=8C=E9=9D=A2=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E7=9B=AE=E5=BD=95=E7=B4=A2=E5=BC=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/index.js | 6 + src/assets/options.js | 6 +- src/assets/plugins/jquery.autoMenu.js | 181 ++++++++++++++++++++++++++ src/assets/styles/jquery.autoMenu.css | 148 +++++++++++++++++++++ src/index.html | 2 + 5 files changed, 340 insertions(+), 3 deletions(-) create mode 100644 src/assets/plugins/jquery.autoMenu.js create mode 100644 src/assets/styles/jquery.autoMenu.css diff --git a/src/assets/index.js b/src/assets/index.js index de8c0a72..52e4144e 100644 --- a/src/assets/index.js +++ b/src/assets/index.js @@ -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) { diff --git a/src/assets/options.js b/src/assets/options.js index b227257f..acff5821 100644 --- a/src/assets/options.js +++ b/src/assets/options.js @@ -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); diff --git a/src/assets/plugins/jquery.autoMenu.js b/src/assets/plugins/jquery.autoMenu.js new file mode 100644 index 00000000..d2c772d7 --- /dev/null +++ b/src/assets/plugins/jquery.autoMenu.js @@ -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 = '
' + + '' + + ''; + 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); \ No newline at end of file diff --git a/src/assets/styles/jquery.autoMenu.css b/src/assets/styles/jquery.autoMenu.css new file mode 100644 index 00000000..cff41ae3 --- /dev/null +++ b/src/assets/styles/jquery.autoMenu.css @@ -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; +} \ No newline at end of file diff --git a/src/index.html b/src/index.html index d89de5b1..de99dd35 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,9 @@ + +