JQuery EasyUI learning record (2)

1. jquery easyUI dynamically add tabs (see jquery easyUI manual)

1.1 For dynamically adding a tab

1.1.1 Select the specified tab and determine whether a tab exists

 

Test code:

<a id="but1" class="easyui-linkbutton" > Add a tab </a> < script type = " text/javascript" > $ 
                    ( function (){
                         // After the page is loaded , bind the button above Fixed event                         $( " #but1 " ).click( function (){
                             // Determine whether the tab exists var e = $( " #mytabs " ).tabs( " exists " ,"
                

                            System management " ); // Return boolean type 
                            if (e){
                                 // Already exists, you can select it 
                                $( " #mytabs " ).tabs( " select " , " System management " );
                            } else {
                                 // Call the add method of the tabs object to dynamically add a tab 
                                $( " #mytabs " ).tabs( " add " ,{
                                    title: ' System Management ' ,
                                    iconCls:'icon-edit',
                                    closable:true,
                                    content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
                                });
                            }
                            
                        })
                    })
                </script>

<!-- tab panel --> 
        < div id ="mytabs" class ="easyui-tabs" data-options ="fit:true" > 
            <!-- use child div to represent each panel
                fit:true---- adaptive (fill the parent container)
            -->
            <div data-options="iconCls:'icon-save'" title="面板一">111</div>
            <div data-options="closable:true" title="面板二">222</div>
            <div title="面板三">333</div>
        </div>