Implementation of html5 css3 bubble component_css3_CSS_webpage production

Preface

Bubble components are very common in actual work, whether in web pages or apps, such as:

The so-called bubble component here refers to the list bubble component. Here we will discuss its dom implementation, css implementation, and js implementation. Finally, we will explain some details. I hope it will be useful to everyone

Xiaochai is new to CSS recently. Here is a special topic to help improve her own CSS. The article has many problems and optimization points. Please give me your guidance

Component classification

As far as the bubble component is concerned, it still belongs to the "pop-up layer" type component, which means that it will have these characteristics:

① Layout is out of document flow

② You can have a mask, and you can configure whether the click mask is turned off

③ Optional features include clicking the browser back to close the component and the animation display and hide animation features

The more different ones are:

① Not centered

② has an arrow mark and can be set up or down

③ Because there is an arrow, and this arrow is relative to an element, in a general sense our task is relative to a button, so it is said to have a triggerEL

So based on the discussion here, our component is called BubbleLayer, which should inherit from a general Layer

However, as far as Layer is concerned, it will at least have the following general characteristics:

① Create——create

② Show——show

③ Hide——hide

④ Destroy——destroy

The above features are not unique to the Layer component, but are unique to all components, so there should be an abstract component of AbstractView on top of the Layer

The inheritance relationship is now revealed. Putting aside the redundant interfaces, it is simply as follows:

The simplest implementation at the component DOM level

From the perspective of DOM implementation, a simple ul can actually complete the task

Copy the code

The code is as follows :

• Price: ￥35


• Rating: 80


• Level: 5

Of course there must be something relevant here The css

copy code

The code is as follows:

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

The effect formed so far is purple drops:

Copy code

The code is as follows:

• 价格：￥35


• 评分：80


• 级别：5

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

复制代码

代码如下:

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度形成小三角，然后大家都知道了

复制代码

代码如下:

• 价格：￥35


• 评分：80


• 级别：5

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

Defects and Extensions

As a basic implementation, there is no problem with the above, but its actual application scenarios will have the following shortcomings:

① The basic ul level requires a wrapping layer. The wrapping layer has an up or down class, and then determines whether the arrow is up or down

② We cannot use pseudo-classes here. The reason is that our small triangle label is not necessarily in the middle. It has certain sliding characteristics. In other words, this small triangle needs to be controlled by js to its left and right positions. He needs is a tag

Based on the above, our structure seems to be like this:

Copy the code

The code is as follows:

• Price: ￥35


• Rating: 80


• Level: 5

① On the root element, we can set the current style of up or down

② The i tag selects whether to go up or down based on the up or down of the root element, and the tag can be operated by js

At this point, it seems that the entire component is relatively complete, but the real situation is not like this. What can I say, the above structure is too limited

This component needs a container, and the container label should be located above ul. At this time, the DOM structure loaded inside the container can be not ul but some other structure

Secondly, on mobile phones, our visible items will not exceed 5 on 4S phones, often 4, so we should set scrollable attributes like overflow on its container

Component return·Final structure

From the above, based on the fact that it is inherited from Layer, we can form such a structure:

Copy code

The code is as follows:

< ;/i>

< ;ul>

Price: ￥35

Rating: 80

Level: 5

This It can also be the basic structure of our entire pop-up layer class. We can make many extensions on this, but we won’t go into too much detail here and will only discuss the bubble component

As for the bubble component, its structure is:

Copy code

The code is as follows:

• Price: ￥35


• Rating: 80


• Level: 5

JS level implementation

This is still the inheritance mechanism used in blade. If there are students who don’t understand and are interested, please go to: [Blade’s UI Design] Understand front-end MVC and layering ideas

About templates

Because the topic of our section is related to refactoring, our focus here is CSS. We first generate our template:

Copy code

The code is as follows:

< ;div class="cui-pop-body">

<% for(var i = 0 , len = data.length; i < len; i ) { %>
<% var itemData = data[i]; %>

• 
  <%if(typeof itemFn == 'function') { %><%=itemFn.call(itemData) %> <% } else { %><%=itemData.name%>< ;%} %>
  <% } %>