<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: -6px; left: 50%; margin-left: -5px; 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层级需要一个包裹层，包裹层具有一个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操作
到此，似乎整个组件便比较完全了，但是真实的情况却不是如此，怎么说了，上面的结构太局限了
