h5制作_手机小程序怎么做_h5页面制作软件app_免费h5游戏制作平台_h5九宫格
当前位置:建站首页 > 新闻资讯 > 公司新闻 >

html5写一个BUI折叠莱单软件的完成方式

发表日期:2021-04-04 23:10文章编辑:jianzhan浏览次数: 标签:    

写一个BUI折叠莱单软件实际效果浏览

控制剖析控制构造

一个点一下显示信息掩藏的实际效果, 而且点一下的情况下, 会先把进行开展掩藏, 再进行自身的. 从页面上大家看来看构造的设计方案.
 !-- 一般控制最表层便是控制的器皿名 -- 
 div 
 div 莱单 /div 
 div 內容 /div 
 div 莱单2 /div 
 div 內容2 /div 
 /div 
这儿大家选用的是并排平级的方法, 那构造写起來有点儿不便, 实际上这一构造跟 dl,dt,dd 是一致的, 那么我们彻底能够提升成下列构造.
 !-- 一般控制最表层便是控制的器皿名 -- 
 dt 莱单 /dt 
 dd 內容 /dd 
 dt 莱单2 /dt 
 dd 內容2 /dd 
 /dl 
bui的设计方案是根据按键的原形撑开器皿的方法, 那样能够维持每一个器皿全是一致的规范高宽比, 因此大家再对构造开展提升.
 !-- 一般控制最表层便是控制的器皿名 -- 
 dt 莱单 /dt 
 dd 內容 /dd 
 dt 莱单2 /dt 
 dd 內容2 /dd 
 /dl 
像不久实际效果图,莱单的点一下还会继续有标志的转换, 再融合合理布局到来到下列构造, 一切皆合理布局, 一切皆器皿.
 !-- 一般控制最表层便是控制的器皿名 -- 
 dt div 莱单 /div i /i /dt 
 dd 內容 /dd 
 dt div 莱单2 /div i /i /dt 
 dd 內容2 /dd 
 /dl 

控制款式

一般做为软件的单独款式引进, bui-foldmenu.css文档

?

.bui-foldmenu {}
.bui-foldmenu dt,
.bui-foldmenu [class*=bui-btn] {
 border: 0;
 border-bottom: 1px solid #eee;
/* 默认设置掩藏內容 */
.bui-foldmenu dd {
 display: none;
 border: 0;
 overflow-y: auto;
 border-bottom: 1px solid #eee;
 background: #fff;
/* 标志 */
.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";
/* 激话的情况下显示信息block */
.bui-foldmenu .active+dd {
 display: block;
/* 激话的二级莱单的情况下,把箭头符号旋转 */
.bui-foldmenu .active .icon-foldmenu {
 -webkit-transform: rotate(-180deg);
 transform: rotate(-180deg);
}
款式里边就默认设置掩藏內容标识(dt邻近的dd),由控制原始化, 其他全是一些装饰, 设定激话情况的情况下,箭头符号旋转.

控制脚本制作

1.5.4 增加 bui.extend 方式,能够用于拓展软件, 而且维持跟 bui本来的应用方法一致.

bui.extend 控制主要参数是一个目标, 在其中包括下列主要参数

name string 控制名字config object 控制默认设置主要参数callback function 控制的逻辑性非常简单的版本号

// 非常简单的版本号
bui.extend({
 name: "foldmenu",
 config: {
 id: ""
 callback: function(opt) {
 // that 偏向软件的抛出去的公共性方式, option widget 等
 let that = this;
 // this.config 为早已跟原始化主要参数合拼之后的結果;
 let param = this.config;
 // 缓存文件挑选器
 let $id = null;
 // 要抛给开发设计者的方式
 that.init = function(option) {
 // 对立即启用init方式的主要参数开展合拼
 param = $.extend(true, {}, param, option);
 // 宣传单页多张挑选器,假如是宣传单页,这一软件只有在控制模块里边用, 不可以在bui.ready
 $id = bui.$(param.id);
 // 关联恶性事件,点一下的情况下提升激话款式
 $id.children("dt").click(function(e) {
 var hasActive = $(this).hasClass("active");
 if (hasActive) {
 $(this).removeClass("active");
 } else {
 // 再加款式之后会全自动对箭头符号及下一等级展现解决;
 $(this).addClass("active");
 return that;
 // 假如有依靠bui控制,应当在这里里写,那样便捷外界启用
 // that.widgets.loading = ui.loading({
 // appendTo: opt.id
 // });
 // 假如必须消毁的性命周期时间,则在这里中放上.
 // that.beforeDestroy = function() {
 // return that;
 // }
 // 务必传id
 if (!param.id) {
 // 抛出去不正确
 bui.showLog("务必传id主要参数.")
 return that;
 // 默认设置先原始化一次
 return this.init(opt);

控制应用

 dl id="folder" 
 dt 莱单 /dt 
 dd 內容 /dd 
 dt 莱单2 /dt 
 dd 內容2 /dd 
 /dl 

用闭包避免全局性环境污染

放到一个闭包里,那样能够避免控制遭受环境污染, window.libs 指的是 zepto 或是 jquery, 如果你除掉引进 zepto.js 的情况下, 引进 jquery.js 便可以极致转换成jquery版本号. (jquery版本号提议在: 1.9.x - 1.11.x)
;(function(ui, $) {
 "use strict";

* @param {string} [option.handle] [点一下的地区] * @param {number} [option.height] [父楼高度,0则响应式] * @param {string} [option.target] [要显示信息掩藏的总体目标] * @param {number} [option.targetHeight] [总体目标响应式高宽比還是限定高宽比] * @param {boolean} [option.single] [ false(显示信息好几个) || true(一次只折叠一个) ] * @param {function} [option.onInited] [ 1.5.1增加 原始化之后开启 ] * @param {function} [option.callback] [ 点一下按键的回调函数 ] * @example */

详细版

;(function(ui, $) {
 "use strict";
 /* @namespace bui
 * @class foldmenu
 * @constructor
 * @param {object} option
 * @param {string} option.id [控制id]
 * @param {string} [option.handle] [点一下的地区]
 * @param {number} [option.height] [父楼高度,0则响应式]
 * @param {string} [option.target] [要显示信息掩藏的总体目标]
 * @param {number} [option.targetHeight] [总体目标响应式高宽比還是限定高宽比]
 * @param {boolean} [option.single] [ false(显示信息好几个) || true(一次只折叠一个) ]
 * @param {function} [option.onInited] [ 1.5.1增加 原始化之后开启 ]
 * @param {function} [option.callback] [ 点一下按键的回调函数 ]
 * @example
 ui.extend({
 name: "foldmenu",
 config: {
 id: ""
 callback: function(opt) {
 // that 偏向软件的抛出去的公共性方式, option widget 等
 let that = this;
 // this.config 为早已跟原始化主要参数合拼之后的結果;
 let param = this.config;
 // 缓存文件挑选器
 let $id = null;
 // 要抛给开发设计者的方式
 that.init = function(option) {
 // 对立即启用init方式的主要参数开展合拼
 param = $.extend(true, {}, param, option);
 // 宣传单页多张挑选器,假如是宣传单页,这一软件只有在控制模块里边用, 不可以在bui.ready
 $id = ui.$(param.id);
 // 关联恶性事件,点一下的情况下提升激话款式
 $id.children("dt").click(function(e) {
 var hasActive = $(this).hasClass("active");
 if (hasActive) {
 $(this).removeClass("active");
 } else {
 // 再加款式之后会全自动对箭头符号及下一等级展现解决;
 $(this).addClass("active");
 return that;
 // 假如有依靠bui控制,应当在这里里写,那样便捷外界启用
 // that.widgets.loading = ui.loading({
 // appendTo: opt.id
 // });
 // 假如必须消毁的性命周期时间,则在这里中放上.
 // that.beforeDestroy = function() {
 // return that;
 // }
 // 务必传id
 if (!param.id) {
 // 抛出去不正确
 ui.showLog("务必传id主要参数.")
 return that;
 // 默认设置先原始化一次
 return this.init(opt);
})(window.bui || {}, window.libs);

结束语

上边大家实例了一个非常简单的软件的开发设计及应用, 但软件的适应能力还不足, 还必须考虑到各种各样拓展性,繁杂的情景怎样去适应, 比如內容是必须固定不动高宽比,挑选器换为其他,只展现一个,等各种各样要求也不能考虑, 大家必须考虑到大量的情景, 提取大量的自变量做为可配备.

之上便是文中的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多的适用诺心互联网。

相关新闻

为何一个网站开启比较慢?

大家关键为您处理这2个难题:1、钱花了,作出来的实际效果没理想如何办?答:大家服务承...

日期:2021-03-21 浏览次数:172

自古以来情深无法留住,偏要招数深得人心

写这一题目没啥别的目地,仅仅好长时间沒有升级站点了,2020年相对性比以往必须忙上很多...

日期:2021-03-20 浏览次数:148

曲阜基本建设一个网站究竟要花是多少钱?

曲阜网站的平时维护保养关键包含基本维护保养(文图信息内容的提交排版设计和编写)和安全...

日期:2021-03-13 浏览次数:133

网站在线要留意甚么难题?

一个新的网立在发布以前,要做充足多的提前准备工作中,一般也不会是一个过轻松的全过程...

日期:2021-03-09 浏览次数:139

网站的robots文档的书写严禁检索检索搜索引擎蜘

网站的robots文档的书写严禁检索检索搜索引擎蜘蛛针对大部分分做seo提升的朋友来讲,一定都...

日期:2021-03-07 浏览次数:53

如何把一个产品保证长期淘宝网检索排行第一

一般一个店面的总流量中,当然总流量占据总70%上下的才算作一切正常身心健康的,而这百分...

日期:2021-02-27 浏览次数:127