码迷,mamicode.com
首页 > 其他好文 > 详细

EasyUI内容页Tabs。

时间:2017-09-23 19:00:45      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:pre   log   div   region   padding   index   onclick   func   内容   

html:

 <div data-options="region:‘center‘">
      <div id="tabs" class="easyui-tabs" data-options="tools:‘#tab-tools‘">
            <div title="主页" data-options="iconCls:‘icon-house‘" style="padding: 10px; height: 100%;">主页</div>               
        </div>


        <div id="tab-tools">
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-add‘" onclick="addPanel()"></a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:‘icon-remove‘" onclick="removePanel()"></a>                      
       </div>
</div>

JS:

      <script type="text/javascript">
        var index = 0;
        function addPanel() {
            index++;
            $(‘#tabs‘).tabs(‘add‘, {
                title: ‘Tab‘ + index,
                content: ‘<div style="padding:10px">Content‘ + index + ‘</div>‘,
                closable: true
            });
        }
        function removePanel() {
            var tab = $(‘#tabs‘).tabs(‘getSelected‘);
            if (tab) {
                var index = $(‘#tabs‘).tabs(‘getTabIndex‘, tab);
                $(‘#tabs‘).tabs(‘close‘, index);
            }
        }
</script>

效果图:

技术分享

 

EasyUI内容页Tabs。

标签:pre   log   div   region   padding   index   onclick   func   内容   

原文地址:http://www.cnblogs.com/longdb/p/7581727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!