jQuery MiniUI

标题: 请问在MenuBar 框架中如何打开新标签页 [打印本页]

作者: aqiang566971 时间: 2014-1-21 15:08:10 标题: 请问在MenuBar 框架中如何打开新标签页

请问在MenuBar 框架中如何通过连接或者按钮的方式打开一个新标签页，如下图，
[attach]3810[/attach]

作者: felt 时间: 2014-1-21 15:20:36

我们这个demo就是通过点击菜单项实现打开新页面
http://www.miniui.com/demo/#src=menu/menubar.html
你要的效果是在什么地方放置链接或者按钮？

作者: aqiang566971 时间: 2014-1-21 15:55:21

felt 发表于 2014-1-21 15:20
我们这个demo就是通过点击菜单项实现打开新页面
http://www.miniui.com/demo/#src=menu/menubar.html
你要 ...

我是想在一个页面中点击一个 <a href="#">回访</a> 的连接然后跳出新的标签页和内容

作者: factory 时间: 2014-1-21 16:04:32

aqiang566971 发表于 2014-1-21 15:55
我是想在一个页面中点击一个回访的连接然后跳出新的标签页和内容

http://www.miniui.com/demo/#src=tabs/tabs2.html

看这个例子,如何给tabs增加新项

作者: aqiang566971 时间: 2014-1-21 16:38:15

factory 发表于 2014-1-21 16:04
http://www.miniui.com/demo/#src=tabs/tabs2.html

看这个例子,如何给tabs增加新项

这个例子无法增加主框架的标签啊

作者: felt 时间: 2014-1-21 16:41:52

aqiang566971 发表于 2014-1-21 16:38
这个例子无法增加主框架的标签啊

你是指base,lists这列父节点吗？
我们这个demo的代码可以判断去掉了父节点
if (isLeaf) {
showTab(item);
}
你要有用就把判断去掉好了

作者: aqiang566971 时间: 2014-1-21 16:47:56

felt 发表于 2014-1-21 16:41
你是指base,lists这列父节点吗？
我们这个demo的代码可以判断去掉了父节点
if (isLeaf) {

[attach]3813[/attach]

作者: felt 时间: 2014-1-21 16:58:12

aqiang566971 发表于 2014-1-21 16:47

tabs.addTab(tab)
如果跨页面的话，请参考这个帖子
http://miniui.com/bbs/forum.php? ... 6%E9%A1%B5%E9%9D%A2

作者: aqiang566971 时间: 2014-1-21 17:04:38

felt 发表于 2014-1-21 16:58
tabs.addTab(tab)
如果跨页面的话，请参考这个帖子
http://miniui.com/bbs/forum.php?mod=viewthread&tid ...

看不太明白，能写个简单的例子吗！？

作者: felt 时间: 2014-1-21 17:06:46

aqiang566971 发表于 2014-1-21 17:04
看不太明白，能写个简单的例子吗！？

你按钮所在的tab页面是url加载的子页面吗？

作者: aqiang566971 时间: 2014-1-21 17:08:53

felt 发表于 2014-1-21 17:06
你按钮所在的tab页面是url加载的子页面吗？

是的属于子页面

作者: felt 时间: 2014-1-21 17:15:14

aqiang566971 发表于 2014-1-21 17:08
是的属于子页面

父页面定义
top["win"]=window
方法AddTab(tab){
   var tabs=mini.get("id");
   tabs.addTab(tab)；
}
子页面按钮触发
top["win"].AddTab(tab)    //子页面直接调用父页面的方法，传入需要增加的tab的参数

作者: aqiang566971 时间: 2014-1-22 09:20:15

本帖最后由 aqiang566971 于 2014-1-22 09:21 编辑

felt 发表于 2014-1-21 17:15
父页面定义
top["win"]=window
方法AddTab(tab){

父页代码 <script type="text/javascript">
      mini.parse();
top["win"]=window;
      function addTab() {
var tabs = mini.get("mainTabs");
var id = "tab$" + node.id;
      var tab = tabs.getTab(id);
      tabs.addTab(tab)；
         }
</script>

子页面代码
<input type="button" value="addTab"/>

作者: factory 时间: 2014-1-22 09:24:43

aqiang566971 发表于 2014-1-22 09:20
父页代码
mini.parse();
top["win"]=window;

就是跨页面调用方法

把你的一个页面放到top中,在另一个页面top获取页面对象,直接调用该页面对象的方法
就这样,具体看上面的代码

作者: aqiang566971 时间: 2014-1-22 09:28:29

factory 发表于 2014-1-22 09:24
就是跨页面调用方法

把你的一个页面放到top中,在另一个页面top获取页面对象,直接调用该页面对象的方法

能帮忙修改下代码吗我对JS 不太懂

多谢了

作者: felt 时间: 2014-1-22 09:58:49

aqiang566971 发表于 2014-1-22 09:28
能帮忙修改下代码吗我对JS 不太懂多谢了

<input type="button" value="addTab" onclick="addT()"/>
function addT(参数){
top["win"].addTab(参数) //不知道你打开的tab是不是固定的，如果不是固定的要传参数过去
}

作者: factory 时间: 2014-1-22 10:00:00

aqiang566971 发表于 2014-1-22 09:28
能帮忙修改下代码吗我对JS 不太懂多谢了

上面felt已经写了很清楚了,子页面如何调用父页面的AddTab()方法

作者: aqiang566971 时间: 2014-1-22 11:15:05

felt 发表于 2014-1-22 09:58
function addT(参数){
top["win"].addTab(参数) //不知道你打开的tab是不是固定的，如果不是固定 ...

function addT(参数){
top["win"].addTab(参数) //不知道你打开的tab是不是固定的，如果不是固定的要传参数过去
}

这个代码是放在父页面还是子页面

作者: felt 时间: 2014-1-22 11:17:43

aqiang566971 发表于 2014-1-22 11:15
function addT(参数){
top["win"].addTab(参数) //不知道你打开的tab是不是固定的，如果不是固定的 ...

你button所在页面，这就是button clcik触发的事件

作者: aqiang566971 时间: 2014-1-22 11:22:02

felt 发表于 2014-1-22 11:17
你button所在页面，这就是button clcik触发的事件

现在父页代码
  <script type="text/javascript">
      mini.parse();
      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;

            //这里拼接了url，实际项目，应该从后台直接获得完整的url地址
            tab.url = node.path  + node.id + ".jsp";
            tabs.addTab(tab);
         }
         tabs.activeTab(tab);

      }
      function onItemClick(e) {
         var item = e.item;
         var isLeaf = e.isLeaf;
         if (isLeaf) {
            showTab(item);
         }
      }
</script>
现在子页面代码

<script language="JavaScript">
function addT(){
top["win"].addTab() //不知道你打开的tab是不是固定的，如果不是固定的要传参数过去
}
</script>
<input type="button" value="addTab" onclick="addT();"/>

有什么问题吗！

作者: felt 时间: 2014-1-22 11:28:41

aqiang566971 发表于 2014-1-22 11:22
现在父页代码

mini.parse();

你父页面没有addTab()方法，也没有定义top["win"]=window

作者: aqiang566971 时间: 2014-1-22 11:33:25

felt 发表于 2014-1-22 11:28
你父页面没有addTab()方法，也没有定义top["win"]=window

为什么不在 demo 上面增加个这样的例子呢！这样大家用起来不久方便多啦！

作者: aqiang566971 时间: 2014-1-22 12:26:30

本帖最后由 aqiang566971 于 2014-1-22 12:38 编辑

felt 发表于 2014-1-22 11:28
你父页面没有addTab()方法，也没有定义top["win"]=window

父页代码
<script type="text/javascript">
            var index = 2;
            top["win"]=window
            function AddTab(tab){
         var tabs=mini.get("mainTabs");
            var tab = {title: "tab"+index++};
         tab = tabs.addTab(tab);
            }
</script>

<input type="button" value="addTab"/> 现在在本页面已经好使了这个按钮在父页如何让这个按钮在子页也好使呢
<input type="button" value="addTab"/>
自己解决啦！哈哈

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)