发布一个纯CSS的网页泡泡组件zuipop

2014/12/8 各类技术 0 Comment 15,756 Views

因为经常用到，于是自己动手做了个比较通用的泡泡组件。
发布到GitHub上了，有兴趣的朋友可以下载下来看看。
https://github.com/cnzui/zuipop/

演示图：

简介：

一个纯CSS打造、兼容各个浏览器的网页泡泡组件

使用需知：

1.该泡泡组件支持的浏览器有IE6+，Chrome，Firefox, Safari, 360等。

2.标题和尾巴可以根据需要自由去留

3.IE6浏览器，三角不能空心（因为不支持透明边框的CSS）

4.IE6,IE7浏览器不支持圆角（因为border-radius属性不支持）

5.泡泡高度支持自适应

6.当需要设置泡泡的最小高度时，IE6中要通过修改panel-content的高度来实现

7.当需要修改皮肤时，请用附加样式的方式实现，最好不要在组件的CSS中直接修改。

8.修改颜色时，注意三角的样式要同步修改。

9.组件自带的zuipop前缀，可以防止CSS冲突

附例：

一个完整的泡泡使用示例：pop.html

<pre class="prettyprint lang-html">&lt;div class="zuipop-container"&gt;
      &lt;div class="zuipopgroup"&gt;
            &lt;div class="zuipop"&gt;
              &lt;div class="zuipop-panel"&gt;
          &lt;div class="zuipop-panel-heading"&gt;&lt;p&gt;标题&lt;/p&gt;&lt;/div&gt;
          &lt;div class="zuipop-panel-content"&gt;这是泡泡内容&lt;br /&gt;&lt;h1&gt;我可以无限增高的哦！！&lt;/h1&gt;
                    &lt;h2&gt;我可以无限增高的哦！！&lt;/h2&gt;
                    &lt;h3&gt;我可以无限增高的哦！！&lt;/h3&gt;
                    &lt;h4&gt;我可以无限增高的哦！！&lt;/h4&gt;&lt;/div&gt;
          &lt;div class="zuipop-panel-footering"&gt;&lt;p&gt;尾巴&lt;/p&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="zuipop-arrowleft"&gt;&lt;/div&gt;
              &lt;div class="zuipop-arrowleft zuipop-arrowleft-hacker"&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
&lt;/div&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<div class="zuipop-panel-content">这是泡泡内容<br /><h1>我可以无限增高的哦！！</h1>

<h2>我可以无限增高的哦！！</h2>

<h3>我可以无限增高的哦！！</h3>

<h4>我可以无限增高的哦！！</h4></div>

</div>

</div>

修改皮肤颜色：skinsample.html

<pre class="prettyprint lang-html">&lt;style&gt;
.blueborder{
border-color:blue !important;
}
.blueborder-leftarrow{
border-right-color:blue !important; /* 三角边框的颜色 */
top:50px !important;
}
.blueborder-leftarrow::after{
border-right-color:white !important; /* 三角空心里的颜色 */
}
.blueheader{
background:blue !important;
color:white;
}
&lt;/style&gt;
&lt;div class="zuipop-container"&gt;
  &lt;div class="zuipopgroup"&gt;
    &lt;div class="zuipop"&gt;
     &lt;div class="zuipop-panel blueborder"&gt;
            &lt;div class="zuipop-panel-heading blueheader"&gt;&lt;p&gt;标题&lt;/p&gt;&lt;/div&gt;
            &lt;div class="zuipop-panel-content"&gt;这是泡泡内容&lt;br /&gt;
                &lt;h1&gt;我可以无限增高的哦！！&lt;/h1&gt;
                &lt;h2&gt;我可以无限增高的哦！！&lt;/h2&gt;
                &lt;h3&gt;我可以无限增高的哦！！&lt;/h3&gt;
                &lt;h4&gt;我可以无限增高的哦！！&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="zuipop-panel-footering"&gt;&lt;p&gt;尾巴&lt;/p&gt;&lt;/div&gt;
     &lt;/div&gt;
     &lt;div class="zuipop-arrowleft blueborder-leftarrow"&gt;&lt;/div&gt;
     &lt;div class="zuipop-arrowleft zuipop-arrowleft-hacker"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

.blueborder{

border-color:blue !important;

}

.blueborder-leftarrow{

border-right-color:blue !important; /* 三角边框的颜色 */

top:50px !important;

}

.blueborder-leftarrow::after{

border-right-color:white !important; /* 三角空心里的颜色 */

}

.blueheader{

background:blue !important;

color:white;

}

</style>

<div class="zuipop-panel-content">这是泡泡内容<br />

<h1>我可以无限增高的哦！！</h1>

<h2>我可以无限增高的哦！！</h2>

<h3>我可以无限增高的哦！！</h3>

<h4>我可以无限增高的哦！！</h4>

</div>

</div>

</div>

郑重声明：
除特别声明为转载内容外，本站所有内容均为作者原创，谢绝任何单位和个人不经许可的复制和转播！
对于确有转载需要的，请先与作者联系，在获得允许后烦请在转载时保留文章出处。
本文出自Lupin's Blog：http://www.cnzui.com/archives/1183

你是否也喜欢以下相关日志？

新的博客系统-ZuiBook 用了很多的系统，虽然功能有强有弱，扩展也很多，但是，一直都找不到自 […]
转：2011年程序员薪资调查最近才看到的，虽然有一点老了，不过供从业人员参考还是很不错的，就转过来了 […]
通过介绍进入wxWidgets－《跟我学wxWidgets开发》系列教程《跟我学wxWidgets开发》系列教程第一章 wx […]
wxWidgets开发简单扫雷游戏程序－《跟我学wxWidgets开发》系列教程第五章简单扫雷游戏程序本章我们学习的是一个简单的扫雷游戏程 […]
wxWidgets的安装与编译 -《跟我学wxWidgets开发》系列教程第二章 wxWidgets的安装与编译要顺利使用wxWidg […]

你是否也喜欢以下相关日志？

获取我的最新消息？