Embed plug-ins using Bootstrap's PopOver tag and implement Ajax and background interaction for plug-in registration events

In the afternoon a study of Bootstrap's PopOver wrote an example. If the project needs to be used in many places can consider encapsulation into plug-ins.

JavaScript code:

1<script type= "Text/javascript" >2         var_types = ' 0 ';3         var_status = ' 0 ';4        5$(function () {6 Loadfilter ();7         });8 9         functionsearch () {Ten $.ajax ({ One                 .... A             }); -         } -  the         functionLoadfilter () { -             var_content = ' '; -_content + = ' <div class= "Menu-item" _t= "Types" ><span class= "title" > Type </span> ' -_content + = ' <div class= ' btn-group ' > ' +_content + = ' <button id= "types_0" _v= "0" type= "button" class= "btn btn-default btn-xs" > All </button> ' -_content + = ' <button id= "Types_1" _v= "1" type= "button" class= "btn btn-default btn-xs" > Revenue </button> ' +_content + = ' <button id= "types_2" _v= "2" type= "button" class= "btn btn-default btn-xs" > Expenses </button> ' A_content + = ' </div> ' at_content + = ' </div> ' -_content + = ' <div class= ' menu-item ' _t= ' status ' ><span class= ' title ' > Status </span> ' -_content + = ' <div class= ' btn-group ' > ' -_content + = ' <button id= "status_0" _v= "0" type= "button" class= "btn btn-default btn-xs" > All </button> ' -_content + = ' <button id= "Status_1" _v= "1" type= "button" class= "btn btn-default btn-xs" > Edit </button> ' -_content + = ' <button id= "status_2" _v= "2" type= "button" class= "btn btn-default btn-xs" > Edit complete </button> ' in_content + = ' <button id= "Status_3" _v= "3" type= "button" class= "btn btn-default Btn-xs" > Review complete </button> ' -_content + = ' </div> ' to_content + = ' </div> ' +  -$ (' #btnFilter '). PopOver ({ thePlacement: ' Bottom ', *Trigger: ' Manual ', $Html:true,Panax Notoginseng content: _content -}). On (' click ',function () { the                 var_this = This; +$( This). PopOver (' Show '); A$( This). On (' Shown.bs.popover ',function () { the$ (document). Bind ("click",function(e) { +                         vartarget =$ (e.target); -                         if(Target.closest (". PopOver"). Length = = 0) { $$ (_this). PopOver (' Hide '); $                         } -                     }); -  the$ ("div[_t= ' types ')"). Find ("button[_v=" + _types + "']"). AddClass (' active '); -$ ("div[_t= ' status ']"). Find ("button[_v=" + _status + "']"). AddClass (' active ');Wuyi  the$ ("div[_t= ' types ')"). Find (' button '). Unbind (' click ')); -$ ("div[_t= ' types ')"). Find (' button '). Bind (' click ',function () { Wu$ ("div[_t= ' types ')"). Find (' button '). Removeclass (' active '); -$( This). addclass (' active '); About_types = $ ( This). attr ("_v"); $ search (); -                     }); -  -$ ("div[_t= ' status ']"). Find (' button '). Unbind (' click ')); A$ ("div[_t= ' status ']"). Find (' button '). Bind (' click ',function () { +$ ("div[_t= ' status ']"). Find (' button '). Removeclass (' active '); the$( This). addclass (' active '); -_status = $ ( This). attr ("_v"); $ search (); the                     }); the                 }); the$( This). On (' Hidden.bs.popover ',function () { the $ (document). Unbind (); -                 }); in             }); the         } the</script>

Embed plug-ins using Bootstrap's PopOver tag and implement Ajax and background interaction for plug-in registration events