Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to write the BUI folding menu plug-in in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Control analyzes the structure of the control

A click shows the hidden effect, and when clicked, it will hide the expansion first, and then expand its own. Let's look at the design of the structure from the interface. Menu content menu 2 content 2 here we use the same level of juxtaposition, that structure is a bit troublesome to write, in fact, this structure is consistent with dl,dt,dd, then we can be optimized to the following structure. Menu content menu 2 content 2bui is based on the prototype of the button to open the container, so that each container is consistent with the standard height, so we optimize the structure. Menu content menu 2 content 2 just like the effect picture, the menu click will also have the icon switch, and then combined with the layout to get the following structure, everything is layout, everything is a container. Menu content menu 2 content 2

Control style

Generally introduced as a stand-alone style for plug-ins, bui-foldmenu.css files

.bui-foldmenu {}. Bui-foldmenu > dt,.bui-foldmenu > [class*=bui-btn] {border: 0; border-bottom: 1px solid # eee;} / * default hidden content * / .bui-foldmenu > dd {display: none; border: 0; overflow-y: auto; border-bottom: 1px solid # eee; background: # fff } / * icon * / .bui-foldmenu. Icon-foldmenu {- webkit-transition:-webkit-transform 0.3s ease-in-out 0s; transition: transform 0.3s ease-in-out 0s;} .bui-foldmenu. Icon-foldmenu:before {content: "e649";} / * display block * / .bui-foldmenu > .active + dd {display: block when activated } / * when activating the secondary menu, flip the arrow * / .bui-foldmenu > .active. Icon-foldmenu {- webkit-transform: rotate (- 180deg); transform: rotate (- 180deg); in the style, the content tag (dd adjacent to dt) is hidden by default, initialized by the control, and other embellishments. When setting the active state, the arrow is flipped.

Control script

1.5.4 added bui.extend method, which can be used to extend plug-ins and keep consistent with the original use of bui.

The bui.extend control parameter is an object that contains the following parameters

Name string control name config object control default parameters the simplest logical version of the callback function control

/ / the simplest version bui.extend ({name: "foldmenu", config: {id: "}, callback: function (opt) {/ / that points to the public method thrown by the plug-in, let that = this; / / this.config, such as option widget, is the result that has been merged with the initialization parameters; let param = this.config / / cache selector let $id = null; / / method to be thrown to the developer that.init = function (option) {/ / A pair of parameters that directly call the init method are merged param = $.extend (true, {}, param, option) / / single-page multi-page selector. If it is a single page, this plug-in can only be used in the module, not in bui.ready $id = bui.$ (param.id); / / bind the event and add the activation style $id.children ("dt") .click (function (e) {var hasActive = $(this) .hasClass ("active")) If (hasActive) {$(this) .removeClass ("active");} else {/ / automatically handles arrows and the next level presentation after styling; $(this) .addClass ("active");}}) return that } / / if there is a dependency on the bui control, it should be written here to facilitate the external call / / that.widgets.loading = ui.loading ({/ / appendTo: opt.id / /}); / / if you need to destroy the life cycle, add it here. / / that.beforeDestroy = function () {/ return that; / /} / / must pass id if (! param.id) {/ / throw error bui.showLog ("id parameter must be passed.") Return that;} / / initialize return this.init (opt) once by default;}})

Control to use

Menu content menu 2 content 2 / initialize var uiFloder = bui.foldmenu ({id: "# folder"}) / / uiFloder.config can get some instance parameters

Plug-in preview

Preview the bui.folder plug-in online

Perfect plug-in

Using closures to prevent global pollution

Put it in a closure to prevent the control from being contaminated. Window.libs refers to zepto or jquery. When you remove the introduction of zepto.js, the introduction of jquery.js can be perfectly switched to the jquery version. (recommended for jquery version: 1.9.x-1.11.x); (function (ui, $) {"use strict";}) (window.bui | | {}, window.libs)

Add notes

/ * @ namespace bui * @ class foldmenu * @ constructor * @ param {object} option * @ param {string} option.id [control id] * @ param {string} [option.handle] [clicked area] * @ param {number} [option.height] [parent layer height 0 Adaptive] * @ param {string} [option.target] [Hidden targets] * @ param {number} [option.targetHeight] [Target Adaptive height or restricted height] * @ param {boolean} [option.single] [false (shows multiple) | | true (fold one at a time) * @ param {function} [option.onInited] [1.5.1 add Triggered after initialization] * @ param {function} [option.callback] [callback with button clicks] * @ example * /

Full version:

; (function (ui, $) {"use strict" / * @ namespace bui * @ class foldmenu * @ constructor * @ param {object} option * @ param {string} option.id [control id] * @ param {string} [option.handle] [clicked area] * @ param {number} [option.height] [parent layer height 0 Adaptive] * @ param {string} [option.target] [Hidden targets] * @ param {number} [option.targetHeight] [Target Adaptive height or restricted height] * @ param {boolean} [option.single] [false (shows multiple) | | true (fold one at a time)] * @ param {function} [option.onInited] [1.5.1 trigger after initialization] * @ param {function} [option.callback] [callback with button clicks] * @ example * * / ui.extend ({name: "foldmenu" Config: {id: "}, callback: function (opt) {/ / that points to the public method thrown by the plug-in, option widget, etc. Let that = this / / this.config is the result after it has been merged with the initialization parameters; let param = this.config; / / cache selector let $id = null / / method to be thrown to the developer that.init = function (option) {/ / A pair of parameters that directly call the init method are merged param = $.extend (true, {}, param, option) / / single-page multi-page selector. If it is a single page, this plug-in can only be used in the module, not in bui.ready $id = ui.$ (param.id) / / bind event, add the active style $id.children ("dt") .click (function (e) {var hasActive = $(this) .hasClass ("active"); if (hasActive) {$(this) .removeClass ("active") when clicked } else {/ / automatically handles arrows and next-level presentation after styling; $(this) .addClass ("active");}}) return that } / / if there is a dependency on the bui control, it should be written here to facilitate the external call / / that.widgets.loading = ui.loading ({/ / appendTo: opt.id / /}); / / if you need to destroy the life cycle, add it here. / / that.beforeDestroy = function () {/ return that; / /} / / must pass id if (! param.id) {/ / throw error ui.showLog ("id parameter must be passed.") Return that;} / / initialize return this.init (opt);}}) by default;}) (window.bui | | {}, window.libs); this is the end of the introduction of "how to write the BUI folding menu plug-in in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.