如题
Kody
- 发布:2015-06-11 21:44
- 更新:2015-06-12 11:23
- 阅读:4154
如何代码触发a标签的href?
分类:MUI
Kody (作者)
Html
<style>
.mui-control-content, .mui-slider-group {
background-color: white;
min-height: 400px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
#topPopover {
position: fixed;
top: 16px;
right: 6px;
}
#topPopover .mui-popover-arrow {
left: auto;
right: 6px;
}
.mui-popover {
height: 350px;
width: 150px;
}
</style>
<header class="mui-bar mui-bar-nav">
<a class="nnj-icon-back mui-action-back mui-pull-left"></a>
<a id="menu" href="#topPopover" class="mui-action-menu mui-icon mui-icon-bars mui-pull-right"></a>
<h1 class="mui-title nnj-title"><strong>音乐盒</strong></h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a id="prev-cate" class="mui-control-item mui-pull-left" style="width:40px"><div style="display:inline-block; color: #FFFFFF; width: 40px; height: 30px; "><</div></a>
<a id="a-cate-title" href="#" class="mui-control-item"><div id="cate-title" class="mui-title" style="width: auto;margin: 0 0; right: 40px; left: 40px;"></div></a>
<a id="next-cate" class="mui-control-item mui-pull-right" style="width:40px"><div style="display:inline-block;color: #FFFFFF; width: 40px; height: 30px; ">></div></a>
<div id="topPopover" class="mui-popover">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul id="menuPopover" class="mui-table-view">
</ul>
</div>
</div>
</div>
</div>
<div class="mui-slider-group">
</div>
</div>
<div class="player">
<div class="music-box-title"></div>
<a class="music-box-next" id="play-next"></a>
<a class="music-box-play" id="play-pause"></a>
<a class="music-box-prev" id="play-prev"></a>
</div>
</div>
<div id="myAudio">
<audio id="audio">
</audio>
</div>
<script src="../js/mui.min.js"></script>
<script>
var cateList = new Array();
var currentCate, currentCollect, collectObject;
var playerTitle = document.getElementsByClassName("music-box-title")[0];
var play = document.getElementById("play-pause");
var cateTitle = document.getElementById("cate-title");
var prevCate = document.getElementById("prev-cate");
var nextCate = document.getElementById("next-cate");
var aTitle = document.getElementById("a-cate-title");
var currentSlideNumber = 0;
(function($) {
$.init();
//成功响应的回调函数
var successForCate = function(response) {
if (response.ret_code == "0") {
var cate = '';
var content = '';
var menu = '';
mui.each(response.result_list, function(i, c) {
//cate += '<a class="mui-control-item" href="#item' + c.type_code + '">' + c.type_name + '</a>';
cateList[i] = c;
if (i == 0) {
prevCate.href = "#item"+ c.type_code;
content += '<div id="item' + c.type_code + '" class="mui-slider-item mui-control-content mui-active"><div id="scroll' + c.type_code + '" class="mui-scroll-wrapper"><div class="mui-scroll"><div class="mui-loading"><div class="mui-spinner"></div></div></div></div></div>';
} else {
if(i == 1) nextCate.href = "#item"+ c.type_code;
content += '<div id="item' + c.type_code + '" class="mui-slider-item mui-control-content"><div id="scroll' + c.type_code + '" class="mui-scroll-wrapper"><div class="mui-scroll"><div class="mui-loading"><div class="mui-spinner"></div></div></div></div></div>';
}
menu += '<li class="mui-table-view-cell"><a href="#" id="#item'+c.type_code+'">'+c.type_name+'</a></li>';
});
document.getElementById("menuPopover").innerHTML = menu;
mui("#menuPopover").on("tap", "li", function(e){
var item = this.firstChild.getAttribute("id");
aTitle.href = item;
mui.trigger(aTitle,'tap',e);
mui('.mui-popover').popover('toggle');
});
//document.getElementById("sliderSegmentedControl").innerHTML = cate;
document.getElementsByClassName("mui-slider-group")[0].innerHTML = content;
currentCate = cateList[0];
cateTitle.innerHTML = cateList[0].type_name;
getMusicList(plus.device.uuid, currentCate.type_code);
mui('#slider').slider();
}
};
aTitle.addEventListener("tap", function(e){
document.location.href = this.href;
});
// //成功响应的回调函数
var successForMusic = function(response) {
if (response.ret_code == "0") {
var item = document.getElementById("item" + currentCate.type_code);
var music = '<ul id="musicList" class="mui-table-view">';
var source = '';
mui.each(response.result_list, function(i, c) {
//if(c.collect_flag) var claName = 'music-box-favorites-on';
//else claName = 'music-box-favorites';
// 歌曲列表
//music += '<li class="mui-table-view-cell" id="' + i + '" songId="'+c.id+'">' + c.song_name + '<a class="'+claName+'"></a></li>';
music += '<li class="mui-table-view-cell" id="' + i + '" songId="'+c.id+'">' + c.song_name + '</li>';
// 歌曲播放源
source += '<source title="' + c.song_name + '" src="' + c.song_url + '"></source>';
});
music += '</ul>';
// 显示数据
item.querySelector('.mui-scroll').innerHTML = music;
audio.innerHTML = source;
sourceList = mui("#myAudio source");
// 设置收藏事件
// mui('.mui-table-view-cell').on('tap', 'a', function(e) {
// var id = this.parentNode.getAttribute("songId");
// if(this.className == "music-box-favorites mui-active") currentCollect = 1;
// else currentCollect = 0;
// collectObject = this;
// updateCollect(plus.device.uuid, id, currentCollect);
// });
// 设置点击播放歌曲事件
mui('#musicList').on('tap', 'li', function(e) {
var index = this.getAttribute("id");
currentSrcIndex = index;
audio.PrevNext();
play.className = "music-box-pause";
});
mui('.mui-scroll-wrapper').scroll();
}
};
var successForCollect = function(response){
if (response.ret_code == "0") {
console.log(currentCollect);
if(currentCollect == 1)
collectObject.className = "music-box-favorites-on";
else
collectObject.className = "music-box-favorites";
}
};
// 获取分类数据
var getMusicCate = function() {
var url = 'http://120.24.166.135:8080/nnj-openapi-server/rest/music/list_music_type';
$.getJSON(url, null, successForCate);
};
// 获取音乐数据
var getMusicList = function(uuid, cate_code) {
//发送数据
var data = {
client_id: uuid,
type_code: cate_code
};
var url = 'http://120.24.166.135:8080/nnj-openapi-server/rest/music/list_misic';
$.getJSON(url, data, successForMusic);
};
// 分类翻页事件
document.getElementById('slider').addEventListener('slide', function(e) {
currentSlideNumber = e.detail.slideNumber;
currentCate = cateList[e.detail.slideNumber];
cateTitle.innerHTML = cateList[e.detail.slideNumber].type_name;
getMusicList(plus.device.uuid, currentCate.type_code);
nextCate.href = "#item"+cateList[currentSlideNumber + 1 > cateList.length - 1 ? cateList.length -1 : currentSlideNumber + 1 ].type_code;
prevCate.href = "#item"+cateList[(currentSlideNumber - 1) < 0 ? 0 : currentSlideNumber - 1].type_code;
console.log("#item"+cateList[currentSlideNumber + 1 > cateList.length - 1 ? cateList.length -1 : currentSlideNumber + 1].type_code);
console.log("#item"+cateList[(currentSlideNumber - 1) < 0 ? 0 : currentSlideNumber - 1].type_code);
});
// 播放按钮事件
play.addEventListener("tap", function(e) {
if (audio.paused || audio.ended) {
this.className = "music-box-pause";
audio.play();
} else {
this.className = "music-box-play";
audio.pause();
}
});
// 下一首
document.getElementById("play-next").addEventListener("tap", function(){
++currentSrcIndex > sourceList.length - 1 && (currentSrcIndex = 0);
audio.PrevNext();
});
// 上一首
document.getElementById("play-prev").addEventListener("tap", function(){
--currentSrcIndex < 0 && (currentSrcIndex = 0);
audio.PrevNext();
});
prevCate.addEventListener("tap",function(){
// var nextSlideNumber = currentSlideNumber;
currentSlideNumber--;
if(currentSlideNumber < 0){
mui.toast("已经是第一页啦!");
}
// nextCate.href = "#item"+cateList[nextSlideNumber].type_code;
// prevCate.href = "#item"+cateList[currentSlideNumber].type_code;
// console.log("prevCate.href"+"#item"+cateList[currentSlideNumber].type_code);
// console.log("nextCate.href"+"#item"+cateList[nextSlideNumber].type_code);
});
nextCate.addEventListener("tap",function(){
// var prevSlideNumber = currentSlideNumber - 1;
// if(prevSlideNumber < 0) prevSlideNumber = 0;
currentSlideNumber++;
if(currentSlideNumber > cateList.length - 1){
mui.toast("没有啦!亲。");
}
// prevCate.href = "#item"+cateList[prevSlideNumber].type_code;
// nextCate.href = "#item" + cateList[currentSlideNumber+1].type_code;
// console.log("prevCate.href"+"#item"+cateList[prevSlideNumber].type_code);
// console.log("nextCate.href"+"#item" + cateList[currentSlideNumber+1].type_code);
});
mui('.mui-scroll-wrapper').scroll();
$.plusReady(function() {
if ($.os.android) {
plus.screen.lockOrientation("portrait-primary");
}
getMusicCate();
});
})(mui);
</script>
<script src="../js/common.js"></script>
Kody (作者)
直接导致slider重新加载,而且空白一片了,我是想在外部menu触发mui-control-item,来切换不同的mui-slider-item,有没有方法解决?
2015-06-11 23:20
DCloud_UNI_FXY
回复 Kody:贴完整代码
2015-06-11 23:25
Kody (作者)
请看下面代码,主要是想实现topPopover里面选择分类后,定位slider具体分类页面,
2015-06-12 11:26
DCloud_UNI_FXY
监听topPopover的a的tap事件,然后调用mui('#slider').slider().gotoItem(index);
2015-06-12 15:12