jQuery EasyUI API 中文文档 – Tabs标签页/选项卡

  1. <html>
  2.     <head>
  3.         <script src=”jquery-easyui/jquery.min.js”></script>
  4.         <script src=”jquery-easyui/jquery.easyui.min.js”></script>
  5.         <script src=”jquery-easyui/easyloader.js”></script>
  6.         <script src=”jquery-easyui/locale/easyui-lang-zh_CN.js”></script>
  7.         <link rel=”stylesheet” type=”text/css” href=”jquery-easyui/themes/default/easyui.css”>
  8.     </head>
  9.     <body>
  10.         <!–
  11.         tabs的属性
  12.         width:选项卡所在容器(控制面板)的宽度。
  13.         <div id=”tt” class=”easyui-tabs” data-options=”width:100″>
  14.             <div title=”Tab1″ >
  15.                 tab1
  16.             </div>
  17.         </div>
  18.         height:选项卡所在容器(控制面板)的宽度。
  19.         <div id=”tt” class=”easyui-tabs” data-options=”height:500″>
  20.             <div title=”Tab1″ >
  21.                 tab1
  22.             </div>
  23.         </div>
  24.         plain:为true时,将不显示控制面板背景,相反则显示,默认是false
  25.         <div id=”tt” class=”easyui-tabs” data-options=”plain:true”>
  26.             <div title=”Tab1″>
  27.                 tab1
  28.             </div>
  29.         </div>
  30.         fit:为true时,选项卡的大小将铺满它所在的容器。相反要按照设置的大小,默认是false
  31.         <div id=”tt” class=”easyui-tabs” data-options=”fit:true”>
  32.             <div title=”Tab1″ >
  33.                 tab1
  34.             </div>
  35.         </div>
  36.         border:为false时,不显示边框,相反则显示边框,默认是true
  37.         <div id=”tt” class=”easyui-tabs” data-options=”border:true”>
  38.             <div title=”Tab1″ >
  39.                 tab1
  40.             </div>
  41.         </div>
  42.         scrollIncrement:选项卡滚动条每次滚动的像素值。默认是100
  43.         <div id=”tt” class=”easyui-tabs” data-options=”scrollIncrement:10000>
  44.             <div title=”Tab1″ >
  45.                 tab1
  46.             </div>
  47.         </div>
  48.         scrollDuration:每次滚动持续的时间,单位为毫秒。默认是400
  49.         <div id=”tt” class=”easyui-tabs” data-options=”scrollDuration:1000″>
  50.             <div title=”Tab1″ >
  51.                 tab1
  52.             </div>
  53.         </div>
  54.         tools:控制面板右侧的工具栏,每个工具选项都跟链接按钮一样。
  55.         tabs的方法
  56.         onLoad:当一个选项卡完成ajax远程载入对象时触发。
  57.         onSelect:当用户选择一个选项卡时触发。
  58.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500, onSelect:aa”>
  59.             <div title=”Tab1″>
  60.                 tab1
  61.             </div>
  62.         </div>
  63.         onBeforeClose:在一个选项卡被关闭之前触发,返回false将取消关闭。
  64.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500, onBeforeClose:aa”>
  65.             <div title=”Tab1″ closable=”true”>
  66.                 tab1
  67.             </div>
  68.         </div>
  69.         onClose:在用户关闭一个选项卡面板后触发。
  70.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500, onClose:aa”>
  71.             <div title=”Tab1″ closable=”true”>
  72.                 tab1
  73.             </div>
  74.         </div>
  75.         onAdd:在一个选项卡面板被添加后触发。
  76.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500, onAdd:aa”>
  77.             <div title=”Tab1″ closable=”true”>
  78.                 tab1
  79.             </div>
  80.         </div>
  81.         onUpdate:在一个选项卡面板被更新后触发。
  82.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500, onUpdate:aa”>
  83.             <div title=”Tab1″ closable=”true”>
  84.                 tab1
  85.             </div>
  86.         </div>
  87.         onContextMenu:在一个选项卡面板被鼠标右键单击后触发。
  88.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500, onContextMenu:aa”>
  89.             <div title=”Tab1″ closable=”true”>
  90.                 tab1
  91.             </div>
  92.         </div>
  93.         tabs的方法
  94.         options:返回选项卡属性对象。
  95.         tabs:返回所有的选项卡面板。
  96.         resize:重置选项卡容器(控制面板)大小并且自动布局。
  97.         add:添加一个新的选项卡面板,options参数是一个可以配置的对象,查看选项卡控制面板属性获取更多信息。
  98.         close:关闭一个选项卡面板,title参数表示哪个选项卡将被关闭。
  99.         getTab:获取特定的选项卡面板名称。
  100.         getSelected:获取被选择的选项卡面板名称。
  101.         select:选择一个选项卡面板。
  102.         exists:验证一个特定的选项卡面板是否存在。
  103.         update:更新特定的选项卡面板,param参数包含2个属性:
  104.             tab: 将被更新的选项卡。
  105.             options: 选项卡相关配置项。
  106.         tabs的选项卡面板
  107.         title:选项卡面板的标题。
  108.         content:选项卡面板的内容。
  109.         href:从超链接载入远程内容到选项卡 面板。
  110.         cache:设置为true将缓存选项卡面板,当href(超链接)属性被设置时有效。
  111.         iconCls:一个显示选项卡面板标题图标的CSS类。
  112.         width:选项卡面板的宽度。
  113.         height:选项卡面板的高度。
  114.         closable:为true时,选项卡面板将会显示一个关闭按钮,点击该按钮将关闭选项卡。默认是false
  115.         selected:为true时,将会默认显示该选项卡下的内容。默认是false
  116.         –>
  117.         <div id=”tt” class=”easyui-tabs” data-options=”width:500, height:500″>
  118.             <div title=”Tab1″ closable=”true”>
  119.                 tab1
  120.             </div>
  121.         </div>
  122.         <input type=”button” id=”tian” value=”添加”>
  123.         <input type=”button” id=”guan” value=”关闭”>
  124.     </body>
  125.     <script>
  126.         //tabs方法的用法
  127.         $(function(){
  128.             $(“#tian”).click(function(){
  129.                 $(“#tt”).tabs(‘add’,{
  130.                     title:’table123′,
  131.                     closable:true,
  132.                     content:’asdfsadfsg’,
  133.                     href:’1.html’
  134.                 })
  135.             });
  136.             $(“#guan”).click(function(){
  137.                 $(“#tt”).tabs(‘close’,’table123′)
  138.             })
  139.         });
  140.     </script>
  141. </html>

标签