1 <div class="tab-item popover-outer">
2 <a href="#" class="popover-toggle">
3 <span class="icon icon-grid"></span>
4 <span class="tab-label">商品分类</span>
5 </a>
6 <!-- Popver -->
7 <div id="popover" class="popover">
8 <ul class="table-view">
9 <li class="table-view-cell"><a href="#">全部商品</a></li>
10 <li class="table-view-cell"><a href="#">水晶</a></li>
11 <li class="table-view-cell"><a href="#">玛瑙</a></li>
12 <li class="table-view-cell"><a href="#">砗磲</a></li>
13 </ul>
14 </div>
15 <!-- // Popver -->
16 </div>
1 //
2 // Popovers (to be used with popovers.js)
3 // --------------------------------------------------
4 .popover-outer {
5 position: relative;
6 &.open {
7 .popover-toggle {
8 color: #fe7115;
9 .icon {
10 background-position-y: -24px;
11 }
12 }
13 .popover {
14 opacity: 1;
15 visibility: visible;
16 @include transform(translate3d(0, 0, 0));
17 }
18 }
19 }
20 .popover {
21 position: absolute;
22 bottom: 55px;
23 left: 50%;
24 z-index: 20;
25 width: 100px;
26 margin-left: -50px;
27 background-color: #fafafa;
28 border-radius: $border-radius;
29 opacity: 0;
30 visibility: hidden;
31 @include box-shadow(0 0 15px rgba(0, 0, 0, .1));
32 @include transform(translate3d(0, 15px, 0));
33 @include transition(all .25s linear);
34
35 // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
36 &:after {
37 position: absolute;
38 bottom: -8px;
39 left: 50%;
40 width: 0;
41 height: 0;
42 margin-left: -8px;
43 content: '';
44 border-right: 8px solid transparent;
45 border-top: 8px solid #ffffff;
46 border-left: 8px solid transparent;
47 }
48
49 // Popover transition
50 // --------------------------------------------------
51
52
53
54 // Give correct spacing to the content if there is a bar inside the popover.
55 .bar ~ .table-view {
56 padding-top: $bar-base-height;
57 }
58 }
1 popover: function(){
2 var eventName;
3 /Android|webOS|iphone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)?eventName = 'touchstart': eventName = 'click' ;
4 $('.popover-toggle').on(eventName,function(e){
5 e.stopPropagation();
6 e.preventDefault();
7 var $this = $(this)
8 ,$parent = $this.parent();
9 if ($parent.hasClass('open')) {
10 $parent.removeClass('open');
11 } else {
12 $parent.addClass('open').siblings('.tab-item').removeClass('open');
13 }
14 });
15 $('.popover').on(eventName,function(e){
16 e.stopPropagation();
17 });
18 $('body,html').on(eventName,function(e){
19 e.stopPropagation();
20 $('.popover-outer').removeClass('open');
21 });
22 }
