左侧导航控制右侧tab选项卡,求助

提问 未结
21 234
Mistyss
Mistyss 2017-10-9
悬赏:20飞吻
版本:layui 2.1 浏览器:
页面结构是 顶部导航
接下来就是
左侧导航和右侧tab选项卡

左侧的导航的外层有个iframe,
我用顶部导航控制左侧导航,
左侧导航再控制右侧的tab选项卡。


我主要是用layui文档中的这个tabAdd()方法来实现的
element.tabAdd('demo', {
title: '选项卡的标题'
,content: '选项卡的内容' //支持传入html
,id: '选项卡标题的lay-id属性值'
});


代码如图:
左侧导航的外层iframe:


左侧导航实际页面的js方法:


右侧tab选项卡:


现在遇到的问题是 左侧导航的点击事件之后,个人推测无法获取右侧的tab选项卡,
也就是我代码中的test1 这个tab选项卡无法获取到,从而无法调用tabAdd()方法。

另外再说下:如果左侧不用iframe套在外层的话,直接写左侧导航的代码一切都OK。功能正常,就是在左侧导航外面套一层iframe就无法获取了

回帖
  • 你这存在问题啊,首先左侧导航有什么必要单独弄一个iframe?给自己添加负担?如果是你这种情况肯定取不到,因为他们根本不在同一个页面中,这样你元素都找不到肯定不行。这样的模版一般都是右侧的内容以iframe的方式插入,其他的都是在同一个页面中,这样页面元素的获取,传值等问题就非常好解决了。你这明显是把自己坑了,有简单的方法不用非要这么费事。。。
    0 回复
  • Mistyss
    2017-10-9
    @驊驊龔頾
    我想用顶部导航来控制左边导航的。这样好做分类管理,
    也就是顶部是一级菜单,然后左侧是二级和三级。
    右边的选项卡只做显示。再用选项卡来做关闭控制的,

    右边用iframe的话,不是我想要的效果,我就是从右边iframe改过来的。

    我那个问题是本来就取不到dom元素么?
    不是我写错了?
    0 回复
  • Mistyss
    2017-10-9
    @贤心 大哥
    0 回复
  • 铁血总督
    2017-10-10
    @Mistyss
    页面布局有问题。内容为1个iframe。其余的是一个html即可
    0 回复
  • Mistyss
    2017-10-10
    @铁血总督 只有左侧导航一个iframe。顶部和右侧都是html
    0 回复
  • @Mistyss 根本没在同一个页面,你直接写肯定找不到元素,而且他这个lay-filter的获取应该也不支持iframe之间的传值吧,就算你想做顶部切换左侧那又跟iframe有什么关系,又不是一定要用iframe
    0 回复
  • Mistyss
    2017-10-10
    @驊驊龔頾 我是想着iframe直接放html页面在里面好管理。要替换新内容直接把页面引用一改就好了。现在感觉还是实现不了。知识还是太薄弱了,。准备换成隐藏和显示的方式来实现左侧导航的切换。
    0 回复
  • @Mistyss 你这思路就错了,导航是后台返回的json构建的,想要替换直接在后台修改生成json直接前台解析就行了,按照你的说法难道想添加一个模块就得修改一次html代码?那还要后台干嘛,直接写成静态页面不就行了[衰] 你可以参考一下我的这个模版,希望能给你一点启发 http://fly.layui.com/case/u/3198216
    0 回复
  • Mistyss
    2017-10-10
    @驊驊龔頾 哥。你的模版里面好像没找到左侧和顶部导航栏呀
    0 回复
  • @Mistyss 亲 我说的是让你参考一下 并没有说我的这个就包含你说的功能,我是让你看这个导航数据的加载方式,在后面推出的2.0会有顶部导航
    0 回复
  • Mistyss
    2017-10-10
    @驊驊龔頾 好的,2.0期待中。我现在顶部导航控制左侧导航已经实现了,点击顶部导航然后对应左侧导航显示其他导航隐藏,这样感觉不太好,想看下你怎么实现的。
    0 回复
  • Mistyss
    2017-10-10
    @驊驊龔頾 右侧部分加了一个iframe,之前是一个纯tab选项卡,现在是tab选项卡+iframe
    0 回复
  • @Mistyss 同样是请求数据展示,不过不同的是需要对接口进行传参,通过不同的参数控制显示的数据就好了
    0 回复
  • 铁血总督
    2017-10-10
    @Mistyss 怎么反着来呢,应该左侧菜单用html,内容用iframe啊
    0 回复
  • Mistyss
    2017-10-11
    @铁血总督 之前想着是 右侧直接用tab选项卡控制就OK了。 而左侧想做切换的效果,所以就想左侧iframe
    0 回复
  • Mistyss
    2017-10-11
    @驊驊龔頾 大哥还问个问题。

    文档中有个全局配置。代码如下:

    layui.config({
    dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
    ,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
    ,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
    ,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
    });


    我的困惑就是我现在写的东西都没有这个全局配置但是layui功能可以用,而看你的那个模板里面有写这个东西。
    所以我不知道这个东西到底有什么用,能告知一下不。
    0 回复
  • @Mistyss 主要作用是指定模块相对html文件的位置,简单来说就是html文件应该是和layui文件夹同级的,但是如果你给html外面套上文件夹增加文件的深度,那就要用到这个功能去重新指定模块的位置了
    0 回复
  • Mistyss
    2017-10-11
    @驊驊龔頾

    我理解一下
    如果我的js引用是 <script src="./layui.js" charset="utf-8"></script> 这个是同级目录,就不用配置这个全局的
    如果我的js引用是 <script src="../../static/js/layui.js" charset="utf-8"></script> 这个比较深的目录结构就要配置全局的么?
    0 回复

  • 比如这个,index.html就不用config,但是page文件夹里面的html文件就需要根据实际情况去设置了,光说你理解不了,自己去试试就行了
    0 回复
  • Mistyss
    2017-10-11
    @驊驊龔頾 嗯,我在试,这个配置到底是影响的什么呀?js?还是CSS?
    我现在都没配置这个
    layui.config({
    dir: '/res/layui/' //layui.js 所在路径(注意,如果是script单独引入layui.js,无需设定该参数。),一般情况下可以无视
    ,version: false //一般用于更新模块缓存,默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值,如:201610
    ,debug: false //用于开启调试模式,默认false,如果设为true,则JS模块的节点会保留在页面
    ,base: '' //设定扩展的Layui模块的所在目录,一般用于外部模块扩展
    });

    但是我的JS和CSS都可以用呀。没有什么影响呀
    0 回复
  • Mistyss
    2017-10-11
    @驊驊龔頾 大哥问下
    关于数据表格的

    这是官方接口,
    http://www.layui.com/demo/table/user/?page=5&limit=15
    说默认的传参page和limit

    但是我在后台用
    request.getParameter("page");
    request.getParameter("limit");
    都取不到呀。

    所以我的分页无法控制表格内容
    0 回复