扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >html5+css3气泡组件的实现方法
  • 952

0
分享到

html5+css3气泡组件的实现方法

2024-04-02 19:04:59 952人浏览 独家记忆
摘要

本篇内容主要讲解“HTML5+css3气泡组件的实现方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5+CSS3气泡组件的实现方法”吧!

本篇内容主要讲解“HTML5+css3气泡组件的实现方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5+CSS3气泡组件的实现方法”吧!

前言

气泡组件在实际工作中非常普遍，无论是网页中还是app中，比如：

html5+css3气泡组件的实现方法

html5+css3气泡组件的实现方法

html5+css3气泡组件的实现方法

html5+css3气泡组件的实现方法

html5+css3气泡组件的实现方法

我们这里所谓气泡组件是指列表型气泡组件，这里就其dom实现，css实现，js实现做一个讨论，最后对一些细节点做一些说明，希望对各位有用

小钗最近初学CSS，这里做一个专题，便于自身CSS提升，文章有不少问题与可优化点，请各位指导

组件分类

单由气泡组件来说，他仍然属于“弹出层”类组件，也就是说其会具有这些特性：

① 布局为脱离文档流

② 可以具有mask蒙版，并且可配置点击蒙版是否关闭的特性

③ 可选的特性有点击浏览器回退关闭组件以及动画的显示与隐藏动画特性

其中比较不同的是：

① 不是居中定位

② 具有一个箭头标识，并且可以设置再上或者在下

③ 因为具有箭头，而且这个箭头是相对于一个元素的，一般意义上我们任务是相对某个按钮，所以说具有一个triggerEL

所以单从这里论述来说，我们的组件名为BubbleLayer，其应该继承与一个通用的Layer

但是，就由Layer来说，其最少会具有以下通用特性：

① 创建——create

② 显示——show

③ 隐藏——hide

④ 摧毁——destroy

而以上特性并不是Layer组件所特有的，而是所有组件所特有，所以在Layer之上还应该存在一个AbstractView的抽象组件

至此继承关系便出来了，抛开多余的接口不看，简单来说是这样的：

html5+css3气泡组件的实现方法

组件dom层面实现最简单实现

单从dom实现来说，其实一个简单的ul便可以完成任务

代码如下:


<ul class="cui-bubble-layer" >
 <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
}

至此形成的效果是酱紫滴：

html5+css3气泡组件的实现方法

代码如下:


<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <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, h2, h3, h4, h5, h6, h7, 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" >
   <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>

这个时候在为其加一个伪类，做点样式上的调整，便基本实现了，这里用到了伪类的知识点：

代码如下:


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: -6px; left: 50%; margin-left: -5px; z-index: 1;
}

这里设置了一个绝对定位的矩形框，为其两个边框设置了值，然后变形偏斜45度形成小三角，然后大家都知道了

代码如下:


<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <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, h2, h3, h4, h5, h6, h7, 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: -6px; left: 50%; margin-left: -5px; z-index: 1;</style>
</head>
<body>
 <ul class="cui-bubble-layer" >
   <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>

html5+css3气泡组件的实现方法

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

不足与扩展

上面作为基本实现，没有什么问题，但是其实际应用场景会有以下不足：

① 基本的ul层级需要一个包裹层，包裹层具有一个up或者down的class，然后在决定那个箭头是向上还是向下

② 我们这里不能使用伪类，其原因是，我们的小三角标签并不是一定在中间，其具有一定滑动的特性，也就是说，这个小三角需要被js控制其左右位置，他需要是一个标签

根据以上所述，我们的结构似乎应该是这个样子滴：

代码如下:


<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操作

到此，似乎整个组件便比较完全了，但是真实的情况却不是如此，怎么说了，上面的结构太局限了

该组件需要一个容器，这个容器标签应该位于ul之上，这个时候容器内部所装载的dom结构便可以不是ul而是其他什么结构了

其次，在手机上，我们可视项目在4S手机上不会超过5个，往往是4个，所以我们应该在其容器上设置类似overflow之类的可滚动属性

组件回归&middot;最终结构

由上所述，基于其是继承至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中的那一套继承机制，如果有不明白又有点兴趣的同学请移步：【blade的UI设计】理解前端mvc与分层思想

关于模板

因为我们这一部分的主题为重构相关，所以我们这里的关注点是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字段，但是用户可传入一个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: -1,
       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>      //三角图标偏移量
     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();
}

稍作修改便可形成另一种样子：

html5+css3气泡组件的实现方法

只不过我们还得考虑这个场景的发生，在项目过多过长时我们仍需要做处理：

html5+css3气泡组件的实现方法

这里有很多办法可以处理，第一个是直接传入maxHeight，如果高度超出的话便出现滚动条，第二个是动态在组件内部计算，查看组件与可视区域的关系

我们这里还是采用可视区域计算吧，于是对原组件做一些改造，加一个接口：

代码如下:

this.checkHeightOverflow();

就这一简单接口其实可分为几个段落的实现

第一个接口为检测可视区域，这个可以被用户重写

代码如下:

isSizeOverflow

第二个接口是如果可视区域超出，也就是第一个接口返回true时的处理逻辑

代码如下:

handleSizeOverflow

考虑到超出的未必是高度，所以这里height改为了Size

当然，这里会存在资源销毁的工作，所以会新增一个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();
 });
}

html5+css3气泡组件的实现方法

到此，我们的功能也基本结束了，最后实现一个定制化一点的功能，将我们的气泡组件变成黑色：

html5+css3气泡组件的实现方法

到此，相信大家对“html5+css3气泡组件的实现方法”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

--结束END--

本文标题: html5+css3气泡组件的实现方法

本文链接: https://lsjlt.com/news/77291.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html5+css3气泡组件的实现方法
    本篇内容主要讲解“html5+css3气泡组件的实现方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5+css3气泡组件的实现方法”吧! ...
    99+
    2024-04-02
  • html5+css3气泡组件的实现方式
    本篇内容主要讲解“html5+css3气泡组件的实现方式”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“html5+css3气泡组件的实现方式”吧! ...
    99+
    2024-04-02
  • 怎样进行HTML5及CSS3气泡组件的实现
    怎样进行HTML5及CSS3气泡组件的实现，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。气泡组件在实际工作中非常普遍，无论是网...
    99+
    2024-04-02
  • CSS3怎么实现气泡提示框
    本篇内容主要讲解“CSS3怎么实现气泡提示框”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“CSS3怎么实现气泡提示框”吧!一款基于纯CSS的气泡提示框，整个提示...
    99+
    2024-04-02
  • Android气泡效果实现方法
    本文实例讲述了Android气泡效果实现方法。分享给大家供大家参考，具体如下： 最近在看以前在eoe上收藏的一些源代码，准备将这些代码加上一些自己的注释，然后贴出来，方便自己日...
    99+
    2022-06-06
    方法 Android
  • 如何利用CSS3实现气泡效果
    这篇文章主要讲解了“如何利用CSS3实现气泡效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何利用CSS3实现气泡效果”吧！首先定义一个CSS Code...
    99+
    2024-04-02
  • 怎么用CSS3实现聊天气泡效果
    小编给大家分享一下怎么用CSS3实现聊天气泡效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　<pclass=&q...
    99+
    2024-04-02
  • HTML5如何实现QQ聊天气泡效果
    小编给大家分享一下HTML5如何实现QQ聊天气泡效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！今天自己用 HTML/CSS ...
    99+
    2024-04-02
  • CSS3如何仿微信实现聊天小气泡
    这篇文章主要介绍了CSS3如何仿微信实现聊天小气泡，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。首先给大家看看页面的样子吧，如下图所示：页面...
    99+
    2024-04-02
  • CSS3怎么实现超酷炫的粘性气泡效果
    今天小编给大家分享一下CSS3怎么实现超酷炫的粘性气泡效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起...
    99+
    2024-04-02
  • vue+echars封装气泡图的方法
    本文实例为大家分享了vue+echars封装气泡图的具体代码，供大家参考，具体内容如下 前端可视化封装气泡图 1. html <template>   <div c...
    99+
    2024-04-02
  • 利用CSS实现图片气泡特效的技巧和方法
    在网页设计中，给图片添加特效是提升用户体验的重要手段之一。其中，图片气泡特效可以为图片增添趣味性和互动性，使网页内容更加吸引人。本文将分享一些利用CSS实现图片气泡特效的技巧和方法，并附带具体的代码示例。使用伪类元素创建气泡效果通过使用CS...
    99+
    2023-10-21
    CSS动画 鼠标悬停 图片缩放
  • Android实现气泡布局/弹窗效果 气泡尖角方向及偏移量可控
    Android 自定义布局实现气泡弹窗，可控制气泡尖角方向及偏移量。 效果图 实现 首先自定义一个气泡布局。 public class BubbleRelativeLay...
    99+
    2022-06-06
    弹窗 布局 偏移量 Android
  • css实现气泡的小尖角效果
    小编给大家分享一下css实现气泡的小尖角效果，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！效果图（边框颜色太淡，放在{}里面）：{  }参考链接 纯CSS气泡效果需要用到的知识点：当div的宽度和高度都是0时，整...
    99+
    2023-06-08
  • Java实现带GUI的气泡诗词效果
    之前已经为大家介绍过利用Java实现带GUI的气泡诗词特效，本文将为大家介绍另一种方法同样也可以实现气泡诗词的效果。下面是示例代码 import java.awt.*; import...
    99+
    2022-12-21
    Java气泡诗词特效 Java气泡特效
  • 纯html5+css3下拉导航菜单的实现方法
    这篇文章主要介绍“纯html5+css3下拉导航菜单的实现方法”，在日常操作中，相信很多人在纯html5+css3下拉导航菜单的实现方法问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • Matlab实现绘制有气泡感的网络图
    目录教程部分0 数据准备1 基础绘图2 气泡大小3 气泡颜色4 气泡其他属性5 连线配色6 添加节点及类标签7 标签距离8 设置字体工具函数完整代码今天给大家带来一款用来绘制有气泡感...
    99+
    2023-02-22
    Matlab绘制网络图 Matlab 网络图
  • Android 实现仿QQ拖拽气泡效果的示例
    目录效果图：一、实现思路二、功能实现三、全屏拖拽效果实现源码地址：效果图： 一、实现思路 在列表中默认使用自定义的TextView控件来展示消息气泡，在自定义的TextView控件...
    99+
    2024-04-02
  • Android实现好看的微信聊天气泡效果
    目录前言代码实现踩坑记录总结前言 在聊天类应用中，通常用气泡作为聊天内容的背景色，比如微信的聊天背景，别人发过来的是白色的气泡，自己发的是绿色的气泡。 上面这种是比较普通的，这篇我...
    99+
    2024-04-02
  • Matlab如何实现绘制有气泡感的网络图
    这篇文章主要介绍“Matlab如何实现绘制有气泡感的网络图”，在日常操作中，相信很多人在Matlab如何实现绘制有气泡感的网络图问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Matlab如何实现绘制有气泡感的...
    99+
    2023-07-05
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作