stock2
stock2
  • 发布:2015-04-08 10:46
  • 更新:2015-04-08 18:18
  • 阅读:1422

tab-with-segmented-control.html 根据item激活问题

分类:MUI

<div id="item1" class="mui-control-content">
<div id="item2" class="mui-control-content">
<div id="item3" class="mui-control-content">
默认是item1, 我通过参数,可能1,也可能2,或3.如果做到?
我通过?id=123#item2 让该页面默认高亮(选择效果),传递没有效果
请问应该如何传递参数 能默认 item2 ,谢谢.

2015-04-08 10:46 负责人:无 分享
已邀请:
DCloud_UNI_FXY

DCloud_UNI_FXY

内容区域也同样加上mui-active样式

豆豆xiao宽

豆豆xiao宽 - 静静的看着这个世界,最后终于疯了

根据id取到div 赋css 应该是那个mui-active的样式

stock2

stock2 (作者)

井号item2 这种方式不行啊. 不是根据锚点实现的吗?
感谢楼上的

stock2

stock2 (作者)

暂时用豆豆的方法实现了.每个加id,然后根据参数赋值.激活
document.getElementById("itm"+item).className="mui-control-item mui-active";
有更好的方法吗? 呵呵

stock2

stock2 (作者)

晕,还是问题啊.
激活选中一回事(通过class 能够激活了). 问题下面显示的内容还是默认第一个的.
请问,如何真正激活,让显示的内容也是item2的项. 谢谢啊.
就是说
1.通过参数 ,直接能定位到item2.显示内容也是item2相当于,点击了.
2.加载后,再点击了item ,如果判断点击了2或3或1 ? 这里需要对应初始化内容.
谢谢 啊 大神.

stock2

stock2 (作者)

谢谢楼上 . 对的. 晕,没仔细看 .对应item是有 mui-active
最后一个问题.
加载后,再点击了item ,如果判断点击了2或3或1 ? 这里需要对应初始化内容.

DCloud_UNI_FXY

DCloud_UNI_FXY

目前你可以先这么用。事件名后续可能会调整:

//segmentedControlContents为内容区的父容器id  
document.getElementById("segmentedControlContents").addEventListener('shown.mui.tab', function(e) {  
                    console.log(e.detail.tabNumber);  
                });
stock2

stock2 (作者)

Cannot call method 'addEventListener'
和位置无关哦
现在通过js 赋值classname= 现在有个bug了.
就是item2 传值进来了, 页面默认 item2, 菜单也是item2 ,再选择其他1,3时, item2会再次出现.
测试下来,发现 是mui-active 导致, 但默认的 为何没有问题?
请问 是用classname 来赋值吗?

DCloud_UNI_FXY

DCloud_UNI_FXY

1.我贴的代码是演示代码。注释里边说了。监听该事件的元素是你内容区的父DIV,你给该DIV加上那个id就行了。

2.如果className。那就是className="mui-control-content mui-active";同时需要确保其他item和content不包含mui-active。也就是说,同时只能允许一个是mui-active

stock2

stock2 (作者)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<header id="header" class="mui-bar mui-bar-nav">
<span id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted">
<a id="itm1" class="mui-control-item" href="#item1">待办</a>
<a id="itm2" class="mui-control-item" href="#item2">已办</a>
<a id="itm3" class="mui-control-item" href="#item3">全部</a>
</span>
</header>

<div style="margin: 45px 0px 0px 0px;">

<div id="item1" class="mui-control-content">1111</div>
<div id="item2" class="mui-control-content">222</div>
<div id="item3" class="mui-control-content">3333</div>
</div>

<script src="js/mui.min.js"></script>

<script type="text/javascript">
if(window.plus){plusReady();}else{document.addEventListener('plusready',plusReady,false);}

function plusReady(){
item=2;
console.log("a:"+item);
document.getElementById("segmentedControlContents").addEventListener('shown.mui.tab', function(e) {console.log(e.detail.tabNumber);});
document.getElementById("itm"+item).className="mui-control-item mui-active";
document.getElementById("item"+item).className="mui-control-item mui-active";

</script>

stock2

stock2 (作者)

以上代码 导致 222会跟随出现.

是不是 点击后,再轮回去除一遍 mui-active?

监控不到事件: Cannot call method 'addEventListene' of null

DCloud_UNI_FXY

DCloud_UNI_FXY

请仔细看我的回复:
1.我贴的代码是演示代码。注释里边说了。监听该事件的元素是你内容区的父DIV,你给该DIV加上那个id就行了。

2.如果className。那就是className="mui-control-content mui-active";同时需要确保其他item和content不包含mui-active。也就是说,同时只能允许一个是mui-active

stock2

stock2 (作者)

看了一遍又一遍了. //segmentedControl 我知道了 是span的id .

  1. document.getElementById("segmentedControl").addEventListener('shown.mui.tab', function(e) {console.log("b"+e.detail.tabNumber);}); //没有得到任何信息 'shown.mui.tab', function(e) {console.log("b"+e.detail.tabNumber);}); 能照抄吧?

2.我代码贴出来了,默认我全部去除了 mui-active
获得参数后我,指定了 菜单和内容为 mui-active,就是说 就一个激活了, 都很正常.

但再次点击菜单就乱了.

DCloud_UNI_FXY

DCloud_UNI_FXY

1.我说的是内容区的父容器的id。也就是你的<div style="margin: 45px 0px 0px 0px;">这个div加上个id。然后监听它的事件

  1. 我在hello-mui中的tab-with-segmented-control.html测试指定mui-active。没有问题。
stock2

stock2 (作者)

谢谢楼上的DCloud_MUI_FXY 老师.
麻烦老师 看看,我贴出来的 .为什么 222跟随啊?
再次感谢.
监听的我去试试.

stock2

stock2 (作者)

监听的出来了. 呵呵. 对应值为0,1,2 . 谢谢.

stock2

stock2 (作者)

但混乱的还是没有办法解决.
我贴的代码 基本最精简了. 烦请帮忙看看.
老师能看下问题在哪里吗?
如果初始化item=2 ,再 选择1,或3 后,就乱了.

stock2

stock2 (作者)

第一个 为 mui-control-item

第二个为 mui-control-content
好像这里,我再测试下.

stock2

stock2 (作者)

就是这个问题,结贴了. 菜单对应的和下面显示 是2个区域 class 名.

该问题目前已经被锁定, 无法添加新回复