html5+css3气泡组件的完成

日期:2021-02-25 类型:科技新闻 

关键词:抠图软件电脑版,在线图片加水印,在线 抠图,在线画图网站,淘宝做图片用什么软件好

序言

气泡组件在具体工作中中十分广泛,不管是网页页面中還是app中,例如:

大家这里所谓气泡组件是指目录型气泡组件,这里就其dom完成,css完成,js完成做1个探讨,最终对1些细连接点做1些表明,期待对各位有效

小钗近期初学CSS,这里做1个专题,便于本身CSS提高,文章内容有很多难题与可提升点,请各位具体指导

组件归类

单由气泡组件来讲,他依然属于“弹出层”类组件,也便是说其会具备这些特点:

① 合理布局为摆脱文本文档流

② 能够具备mask蒙版,而且可配备点一下蒙版是不是关掉的特点

③ 可选的特点有点一下访问器返回关掉组件和动漫的显示信息与掩藏动漫特点

在其中较为不一样的是:

① 并不是垂直居中精准定位

② 具备1个箭头标志,而且能够设定再上或在下

③ 由于具备箭头,并且这个箭头是相对1个元素的,1般实际意义上大家每日任务是相对性某个按钮,因此说具备1个triggerEL

因此单从这里阐述来讲,大家的组件名为BubbleLayer,其应当承继与1个通用性的Layer

可是,就由Layer来讲,其至少会具备下列通用性特点:

① 建立——create

② 显示信息——show

③ 掩藏——hide

④ 催毁——destroy

而以上特点其实不是Layer组件所独有的,而是全部组件所独有,因此在Layer之上还应当存在1个AbstractView的抽象性组件

至此承继关联便出来了,抛开过剩的插口不要看,简易来讲是这样的:

组件dom层面完成最简易完成

单从dom完成来讲,实际上1个简易的ul即可以进行每日任务


拷贝编码
编码以下:

<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;">
<li data-index="0" data-flag="c">价钱:¥35</li>
<li data-index="1" data-flag="c">评分:80</li>
<li data-index="2" data-flag="c">级別:5</li>
</ul>

自然这里要有有关的css


拷贝编码
编码以下:

.cui-bubble-layer {
background: #f2f2f2;
border: #bcbcbc 1px solid;
border-radius: 3px
}

至此产生的实际效果是酱紫滴:


拷贝编码
编码以下:

<!doctype html>
<html>
<head>
<meta charset="utf⑻" />
<title>Blade Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
body { background: #f5f5f5; }
ul, ol { list-style: none; }

.cui-bubble-layer { background: #f2f2f2; border: #bcbcbc 1px solid; border-radius: 3px; }
</style>
</head>
<body>
<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;">
<li data-index="0" data-flag="c">价钱:¥35</li>
<li data-index="1" data-flag="c">评分:80</li>
<li data-index="2" data-flag="c">级別:5</li>
</ul>
</body>
</html>

这个情况下在为其加1个伪类,做点款式上的调剂,便基础完成了,这里用到了伪类的专业知识点:


拷贝编码
编码以下:

cui-bubble-layer:before {
position: absolute; content: ""; width: 10px; height: 10px; -webkit-transform: rotate(45deg);
background: #f2f2f2;
border-top: #bcbcbc 1px solid;
border-left: #bcbcbc 1px solid;
top: ⑹px; left: 50%; margin-left: ⑸px; z-index: 1;
}

这里设定了1个肯定精准定位的矩形框框,为其两个边框设定了值,随后形变偏斜45度产生小3角,随后大伙儿都了解了


拷贝编码
编码以下:

<!doctype html>
<html>
<head>
<meta charset="utf⑻" />
<title>Blade Demo</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
body, button, input, select, textarea { font: 400 14px/1.5 Arial, "Lucida Grande" ,Verdana, "Microsoft YaHei" ,hei; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { margin: 0; padding: 0; }
body { background: #f5f5f5; }
ul, ol { list-style: none; }

.cui-bubble-layer { background: #f2f2f2; border: #bcbcbc 1px solid; border-radius: 3px; }
.cui-bubble-layer > li { padding: 5px 10px; }
.cui-bubble-layer:before { position: absolute; content: ""; width: 10px; height: 10px; -webkit-transform: rotate(45deg); background: #f2f2f2; border-top: #bcbcbc 1px solid; border-left: #bcbcbc 1px solid; top: ⑹px; left: 50%; margin-left: ⑸px; z-index: 1;</style>
</head>
<body>
<ul class="cui-bubble-layer" style="position: absolute; top: 110px; left: 220px;">
<li data-index="0" data-flag="c">价钱:¥35</li>
<li data-index="1" data-flag="c">评分:80</li>
<li data-index="2" data-flag="c">级別:5</li>
</ul>
</body>
</html>

http://sandbox.runjs.cn/show/9ywitfn8

不够与拓展

上面做为基础完成,沒有甚么难题,可是实际上际运用情景会有下列不够:

① 基础的ul等级必须1个包裹层,包裹层具备1个up或down的class,随后在决策那个箭头是向上還是向下

② 大家这里不可以应用伪类,其缘故是,大家的小3角标识其实不是1定在正中间,其具备1定拖动的特点,也便是说,这个小3角必须被js操纵其上下部位,他必须是1个标识

依据以上所述,大家的构造好像应当是这个模样滴:


拷贝编码
编码以下:

<section class="cui-bubble-layer up-or-down-class">
<i class="cui-icon-triangle"></i>
<ul>
<li data-index="0" data-flag="c">价钱:¥35</li>
<li data-index="1" data-flag="c">评分:80</li>
<li data-index="2" data-flag="c">级別:5</li>
</ul>
</section>

① 根元素上大家能够设定当今应当是up還是down的款式

② i标识依据根元素的up或down挑选是向上還是向下,而且该标识可被js实际操作

到此,好像全部组件便较为彻底了,可是真正的状况却并不是这般,如何说了,上面的构造太局限了

该组件必须1个器皿,这个器皿标识应当坐落于ul之上,这个情况下器皿內部所装载的dom构造即可以并不是ul而是别的甚么构造了

其次,在手机上上,大家可视性新项目在4S手机上上不容易超出5个,常常是4个,因此大家应当在其器皿上设定相近overflow之类的可翻转特性

组件重归·最后构造

由上所述,根据其是承继至Layer的客观事实,大家能够产生这样的构造:


拷贝编码
编码以下:

<section class="cui-pop cui-bubble-layer">
<i class="cui-pop-triangle"></i>
<div class="cui-pop-head">
</div>
<div class="cui-pop-body">
<ul>
<li data-index="0" data-flag="c">价钱:¥35</li>
<li data-index="1" data-flag="c">评分:80</li>
<li data-index="2" data-flag="c">级別:5</li>
</ul>
</div>
<div class="cui-pop-footer">
</div>
</section>

这个还可以是大家全部弹出层类的基础构造,大家能够在此上做许多拓展,可是这里大家不扯太多,单就气泡组件做阐述

就气泡组件,其构造是:


拷贝编码
编码以下:

<section class="cui-pop cui-bubble-layer">
<i class="cui-pop-triangle"></i>
<div class="cui-pop-body">
<ul>
<li data-index="0" data-flag="c">价钱:¥35</li>
<li data-index="1" data-flag="c">评分:80</li>
<li data-index="2" data-flag="c">级別:5</li>
</ul>
</div>
</section>

js层面的完成

这里依然是选用的blade中的那1套承继体制,假如有不搞清楚又有点兴趣爱好的同学请移步:【blade的UI设计方案】了解前端开发MVC与分层观念

有关模版

由于大家这1一部分的主题为重构有关,因此大家这里的关心点是CSS,大家最先转化成大家的模版:


拷贝编码
编码以下:

<section class="cui-pop <%=wrapperClass %> <%if(dir == 'up'){ %> <%=upClass %> <% } else { %> <%=downClass %> <% } %>">
<i class="cui-pop-triangle"></i>
<div class="cui-pop-body">
<ul class="cui-pop-list <%=itemStyleClass %>">
<% for(var i = 0, len = data.length; i < len; i++) { %>
<% var itemData = data[i]; %>
<li data-index="<%=i%>" data-flag="c" class="<% if(index == i){ %><%=curClass %><%} %>" >
<%if(typeof itemFn == 'function') { %><%=itemFn.call(itemData) %> <% } else { %><%=itemData.name%><%} %>
<% } %>
</ul>
</div>
</section>

这里得出了几个重要的订制化点:

① wrapperClass用以加上业务流程精英团队订制化的class以更改根元素的class,这般的益处是便于业务流程精英团队订制化气泡组件的款式

② 得出了新项目目录Ul的可订制化className,通用性单是只是便捷业务流程精英团队做款式更改

③ 默认设置状况下回到的是传入新项目的name字段,可是客户可传入1个itemFn的回调函数,订制化回到

以上模版基础可考虑标准,假如不考虑,即可把全部模版做为主要参数传入了

有关js完成

因为承继的完成,大家绝大多数工作中早已被做了,大家只必须在几个重要地区撰写编码便可


拷贝编码
编码以下:

define(['UILayer', getAppUITemplatePath('ui.bubble.layer')], function (UILayer, template) {
return _.inherit(UILayer, {
propertys: function ($super) {
$super();
//html模版
this.template = template;
this.needMask = false;</p> <p> this.datamodel = {
data: [],
wrapperClass: 'cui-bubble-layer',
upClass: 'cui-pop--triangle-up',
downClass: 'cui-pop--triangle-down',
curClass: 'active',
itemStyleClass: '',
needBorder: true,
index: ⑴,
dir: 'up' //箭头方位默认设置值
};</p> <p> this.events = {
'click .cui-pop-list>li': 'clickAction'
};</p> <p> this.onClick = function (data, index, el, e) {
console.log(arguments);
// this.setIndex(index);
};</p> <p> this.width = null;</p> <p> //3角标志偏位量
this.triangleLeft = null;
this.triangleRight = null;</p> <p> this.triggerEl = null;</p> <p> },</p> <p> initialize: function ($super, opts) {
$super(opts);
},</p> <p> createRoot: function (html) {
this.$el = $(html).hide().attr('id', this.id);
},</p> <p> clickAction: function (e) {
var el = $(e.currentTarget);
var i = el.attr('data-index');
var data = this.datamodel.data[i];
this.onClick.call(this, data, i, el, e);
},</p> <p> initElement: function () {
this.el = this.$el;
this.triangleEl = this.$('.cui-pop-triangle');
this.windowWidth = $(window).width();
},</p> <p> setIndex: function (i) {
var curClass = this.datamodel.curClass;
i = parseInt(i);
if (i < 0 || i > this.datamodel.data.length || i == this.datamodel.index) return;
this.datamodel.index = i;</p> <p> //这里不以datamodel更改引发全部dom转变了,不划得来
this.$('.cui-pop-list li').removeClass(curClass);
this.$('li[data-index="' + i + '"]').addClass(curClass);
},</p> <p> //部位精准定位
reposition: function () {
if (!this.triggerEl) return;
var offset = this.triggerEl.offset();
var step = 6, w = offset.width - step;
var top = 0, left = 0, right;
if (this.datamodel.dir == 'up') {
top = (offset.top + offset.height + 8) + 'px';
} else {
top = (offset.top - this.el.offset().height - 8) + 'px';
}</p> <p> left = (offset.left + 2) + 'px';</p> <p> if (offset.left + (parseInt(this.width) || w) > this.windowWidth) {
this.el.css({
width: this.width || w,
top: top,
right: '2px'
});
} else {
this.el.css({
width: this.width || w,
top: top,
left: left
});
}</p> <p> if (this.triangleLeft) {
this.triangleEl.css({ 'left': this.triangleLeft, 'right': 'auto' });
}
if (this.triangleRight) {
this.triangleEl.css({ 'right': this.triangleRight, 'left': 'auto' });
}
},</p> <p> addEvent: function ($super) {
$super();
this.on('onCreate', function () {
this.$el.removeClass('cui-layer');
this.$el.css({ position: 'absolute' });
});
this.on('onShow', function () {
this.setzIndexTop(this.el);
});
}</p> <p> });</p> <p>});


这里刚开始启用的,即可做简易完成:


拷贝编码
编码以下:

'click .demo1': function (e) {
if (!this.demo1) {
var data = [{ name: '<span class="center">一般会员</span>' },
{ name: '<span class="center">vip</span>' },
{ name: '<span class="center">高級vip</span>' },
{ name: '<span class="center">钻石vip</span>'}];
this.list = new UIBubbleLayer({
datamodel: {
data: data
},
triggerEl: $(e.currentTarget),
width: '150px',
triangleLeft: '20px'
});
}
this.list.show();
}

稍作改动即可产生另外一种模样:

只但是大家还得考虑到这个情景的产生,在新项目过量太长时大家仍必须做解决:

这里有许多方法能够解决,第1个是立即传入maxHeight,假如高宽比超过的话便出現翻转条,第2个是动态性在组件內部测算,查询组件与可视性地区的关联

大家这里還是选用可视性地区测算吧,因而对原组件做1些更新改造,加1个插口:


拷贝编码
编码以下:
this.checkHeightOverflow();

就这1简易插口实际上可分成几个段落的完成

第1个插口为检验可视性地区,这个能够被客户重新写过


拷贝编码
编码以下:
isSizeOverflow

第2个插口是假如可视性地区超过,也便是第1个插口回到true时的解决逻辑性


拷贝编码
编码以下:
handleSizeOverflow

考虑到到超过的不一定是高宽比,因此这里height改成了Size

自然,这里会存在資源消毁的工作中,因此会新增1个hide插口


拷贝编码
编码以下:

isSizeOverflow: function () {
if (!this.el) return false;
if (this.el.height() > this.windowHeight * 0.8) return true;
return false;
},</p> <p>handleSizeOverflow: function () {
if (!this.isSizeOverflow()) return;</p> <p> this.listWrapper.css({
height: (parseInt(this.windowHeight * 0.8) + 'px'),
overflow: 'hidden',
position: 'relative'
});</p> <p> this.listEl.css({ position: 'absolute', width: '100%' });</p> <p> //启用前必须重设部位
this.reposition();</p> <p> this.scroll = new UIScroll({
wrapper: this.listWrapper,
scroller: this.listEl
});
},</p> <p>checkSizeOverflow: function () {
this.handleSizeOverflow();
},</p> <p>addEvent: function ($super) {
$super();
this.on('onCreate', function () {
this.$el.removeClass('cui-layer');
this.$el.css({ position: 'absolute' });
});
this.on('onShow', function () {</p> <p> //查验可视性地区是不是超过;
this.checkSizeOverflow();
this.setzIndexTop(this.el);
});
this.on('onHide', function () {
if (this.scroll) this.scroll.destroy();
});
}

到此,大家的作用也基础完毕了,最终完成1个订制化1点的作用,将大家的气泡组件变为黑色:

结语

今日的学习培训到此为止,由于小钗css3也算是初学,若是文中有误,请提出

该组件的动漫以来我提前准备保证Layer基类上,而是会详细介绍css3的动漫技术性,这里便不详细介绍了