jQuery MiniUI

 找回密码
 立即注册
查看: 2024|回复: 8
打印 上一主题 下一主题

求大神指点点击添加TAB [复制链接]

Rank: 2

跳转到指定楼层
楼主
发表于 2016-11-10 14:54:50 |只看该作者 |倒序浏览
   <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/scripts/miniui/miniui.js"></script>
    <script type="text/javascript">
        function showTab(node) {
            var tabs = mini.get("mainTabs");
            var id = "tab$" + node.id;
            var tab = tabs.getTab(id);
            if (!tab) {
                tab = {};
                tab.name = id;
                tab.title = node.text;
                tab.showCloseButton = true;
                tab.url = node.url;
                tabs.addTab(tab);
            }
            tabs.activeTab(tab);
        }
        function onItemClick(e) {
            var item = e.item;
            var isLeaf = e.isLeaf;
            if (isLeaf) {
                showTab(item);
            }
        }
    </script>

</head>
<body>
    <div id="mainTabs" class="mini-tabs bg-toolbar" activeindex="0" style="width: 100%; height: 100%;"
        bodystyle="border:0;background:white;">
        <a id="a" href="WebForm2.aspx">嘿嘿</a>
        <a id="b" href="WebForm2.aspx">嘿嘿</a>

        <a id="c" href="WebForm2.aspx">嘿嘿</a>
    </ul>
</body>
</html>
效果图

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

沙发
发表于 2016-11-10 15:05:52 |只看该作者
这堆代码是什么
首先,请不要改变我们控件的结构
比如tabs是这样的结构
  <div class="mini-tabs">
     <div ></div>
</div>

Rank: 2

板凳
发表于 2016-11-10 16:23:18 |只看该作者
felt 发表于 2016-11-10 15:05
这堆代码是什么
首先,请不要改变我们控件的结构
比如tabs是这样的结构

    <script src="Scripts/jquery-1.7.1.min.js"></script>
    <script src="Scripts/scripts/miniui/miniui.js"></script>
    <link href="Scripts/scripts/miniui/themes/icons.css" rel="stylesheet" />
    <link href="Scripts/scripts/miniui/themes/pure/skin.css" rel="stylesheet" />
    <script type="text/javascript">
        function showTab(node) {
            alert(1);
            debugger
            var tabs = mini.get("mainTabs");
            var id = "tab$" + node.id;
            var tab = tabs.getTab(id);
            if (!tab) {
                tab = {};
                tab.name = id;
                tab.title = node.text;
                tab.showCloseButton = true;
                tab.url = node.url;
                tabs.addTab(tab);
            }
            tabs.activeTab(tab);
        }
        function onItemClick(e) {
            alert(1);
            debugger
                showTab(e);
        }
    </script>

</head>
<body>
    <div id="mainTabs" class="mini-tabs"  style="width: 300px; height: 300px;"
        bodystyle="border:0;background:white;" showCloseButton ="true";>
        </div>
        <a id="a" href="#">嘿嘿</a>
        <a id="b" href="#">嘿嘿</a>
        <a id="c" href="#">嘿嘿</a>
</body>
</html>
现在的问题是为什么没有叉叉= =

附件: 你需要登录才可以下载或查看附件。没有帐号?立即注册

Rank: 8Rank: 8

地板
发表于 2016-11-10 16:31:03 |只看该作者
七豆腐 发表于 2016-11-10 16:23
function showTab(node) {
            alert(1);
            debugg ...

你写的都是什么,没联系的html和js,我看不明白你想表达什么

Rank: 2

5#
发表于 2016-11-10 17:48:10 |只看该作者
felt 发表于 2016-11-10 16:31
你写的都是什么,没联系的html和js,我看不明白你想表达什么

戳一下出来一个选项卡,

Rank: 8Rank: 8

6#
发表于 2016-11-11 09:34:49 |只看该作者
七豆腐 发表于 2016-11-10 17:48
戳一下出来一个选项卡,

http://www.miniui.com/demo/outlooktree/outlooktree.html
那和我们示例差不多,showCloseButton=true就是显示关闭图标

Rank: 2

7#
发表于 2016-11-11 10:01:30 |只看该作者
dforce 发表于 2016-11-11 09:34
http://www.miniui.com/demo/outlooktree/outlooktree.html
那和我们示例差不多,showCloseButton=true就 ...

我拷贝的http://www.miniui.com/docs/tutorial/layout_menu.html,并做不出来= =

Rank: 2

8#
发表于 2016-11-11 10:04:45 |只看该作者
七豆腐 发表于 2016-11-11 10:01
我拷贝的http://www.miniui.com/docs/tutorial/layout_menu.html,并做不出来= =

onclick我改了,忘了拷贝过来- -,和我想要的效果有点不一样点击出现了选项卡,然后就跳转到其他页面了,没有选项卡

Rank: 8Rank: 8

9#
发表于 2016-11-11 10:13:16 |只看该作者
七豆腐 发表于 2016-11-11 10:01
我拷贝的http://www.miniui.com/docs/tutorial/layout_menu.html,并做不出来= =

http://www.miniui.com/demo/#src=menu/menubar.html
就是这个示例

Archiver|普加软件

GMT+8, 2024-9-29 06:07 , Processed in 1.054406 second(s), 11 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部