Easyui-tabs tab Tabs

Basic effects:

：

HTML code:

<div id="tab">    <div title="tab1" >        < p>tab1</p>    </div>    <div title="tab2">        <p >tab2</p>    </div>    <div title="tab3">        <p >tab3</p>    </div></div>

JS Code:

$ (function () {    $ ('#tab'). Tabs ({        width:$,// ( width        ,// height     })})

Swap tabs around:

Effect:

HTML code:

<div id="tab">    <div title="tab1" >        < p>tab1</p>    </div>    <div title="tab2">        <p >tab2</p>    </div>    <div title="tab3">        <p >tab3</p>    </div></div>

JS Code:

$ (function () {    $ ('#tab'). Tabs ({        width:$,//  width        ,/ / height        ,// Set Tab button         /// Set Tab button High     })})

Top right-hand corner icon:

Effect:

HTML code:

<div id="tab">    <div title="tab1" >        < p>tab1</p>    </div>    <div title="tab2">        <p >tab2</p>    </div>    <div title="tab3">        <p >tab3</p>    </div></div>

JS Code:

$ (function () {$ ('#tab'). Tabs ({width: -,//WideHeight $,//HighSelected1,//Initialize which tab to selecttools: [{iconcls:'Icon-add', Handler:function () {alert ("Add"); }}, {iconcls:'Icon-search', Handler:function () {alert ("Search"); }        }]    })})

To add a new tab:

Effect:

HTML code:

<div id="tab">    <div title="tab1" >        < p>tab1</p>    </div>    <div title="tab2">        <p >tab2</p>    </div>    <div title="tab3">        <p >tab3</p>    </div></div>

JS Code:

$ (function () {$ ('#tab'). Tabs ({width: -,//WideHeight $,//HighSelected0,//Initialize which tab to selecttools: [{iconcls:'Icon-add', Handler:function () {$ ('#tab'). Tabs ('Add', {title:'New Additions', Content:'New Content', closable:true,//whether to display the Delete button                })            }        }]    })})

When the tab is canceled, the prompt is closed:

Effect:

------------------------------------------------------------

-------------------------------------------------------------

HTML code:

• To have the close button data-options ="closable:true"

<div id="tab">    <div title="tab1" >        < p>tab1</p>    </div>    <div title="tab2" data-options = " closable:true ">        <p>tab2</p>    </div>    <div title="tab3 ">        <p>tab3</p>    </div></div>

JS Code:

$ (function () {$ ('#tab'). Tabs ({width: -,//WideHeight $,//HighSelected0,//Initialize which tab to selecttools: [{iconcls:'Icon-add', Handler:function () {$ ('#tab'). Tabs ('Add', {title:'New Additions', Content:'New Content', closable:true,//whether to display the Delete button})}], Onbeforeclose:function (title, index) {//decide whether to close            vartarget = This; $.messager.confirm ('Confirm','Are you sure you want to close'+title, function (r) {if(r) {varOPTs = $ (target). Tabs ('Options'); varBC =Opts.onbeforeclose; Opts.onbeforeclose= function () {};//allow now to close$ (target). Tabs ('Close', index); Opts.onbeforeclose= BC;//Restore Event Functions                }            }); return false;//Block shutdown        }    })})

Easyui-tabs tab Tabs