使用Bootstrap的popover标签中嵌入插件，并且为插件注册事件实现Ajax与后台交互
下午研究了一下bootstrap的popover写了个例子。如果项目很多地方都需要用到可以考虑封装成插件。
javascript代码：
1 <script type="text/javascript"> 2 var _types = '0'; 3 var _status = '0'; 4 5 $(function () { 6 LoadFilter(); 7 }); 8 9 function search() { 10 $.ajax({ 11 .... 12 }); 13 } 14 15 function LoadFilter() { 16 var _content = ''; 17 _content += '<div class="menu-item" _t="types"><span class="title">类型</span>' 18 _content += '<div class="btn-group">' 19 _content += '<button id="types_0" _v="0" type="button" class="btn btn-default btn-xs">全部</button>' 20 _content += '<button id="types_1" _v="1" type="button" class="btn btn-default btn-xs">收入</button>' 21 _content += '<button id="types_2" _v="2" type="button" class="btn btn-default btn-xs">支出</button>' 22 _content += '</div>' 23 _content += '</div>' 24 _content += '<div class="menu-item" _t="status"><span class="title">状态</span>' 25 _content += '<div class="btn-group">' 26 _content += '<button id="status_0" _v="0" type="button" class="btn btn-default btn-xs">全部</button>' 27 _content += '<button id="status_1" _v="1" type="button" class="btn btn-default btn-xs">编辑中</button>' 28 _content += '<button id="status_2" _v="2" type="button" class="btn btn-default btn-xs">编辑完成</button>' 29 _content += '<button id="status_3" _v="3" type="button" class="btn btn-default btn-xs">复核完成</button>' 30 _content += '</div>' 31 _content += '</div>' 32 33 $('#btnFilter').popover({ 34 placement: 'bottom', 35 trigger: 'manual', 36 html: true, 37 content: _content 38 }).on('click', function () { 39 var _this = this; 40 $(this).popover('show'); 41 $(this).on('shown.bs.popover', function () { 42 $(document).bind("click", function (e) { 43 var target = $(e.target); 44 if (target.closest(".popover").length == 0) { 45 $(_this).popover('hide'); 46 } 47 }); 48 49 $("div[_t='types']").find("button[_v='" + _types + "']").addClass('active'); 50 $("div[_t='status']").find("button[_v='" + _status + "']").addClass('active'); 51 52 $("div[_t='types']").find('button').unbind('click'); 53 $("div[_t='types']").find('button').bind('click', function () { 54 $("div[_t='types']").find('button').removeClass('active'); 55 $(this).addClass('active'); 56 _types = $(this).attr("_v"); 57 search(); 58 }); 59 60 $("div[_t='status']").find('button').unbind('click'); 61 $("div[_t='status']").find('button').bind('click', function () { 62 $("div[_t='status']").find('button').removeClass('active'); 63 $(this).addClass('active'); 64 _status = $(this).attr("_v"); 65 search(); 66 }); 67 }); 68 $(this).on('hidden.bs.popover', function () { 69 $(document).unbind(); 70 }); 71 }); 72 } 73 </script>
