<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script src="jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
mui.ready(function() {
var add = document.getElementById("add-tab")
var wrapper = document.getElementById("scroll-wrapper");
var width = $(document.body).width();
add.addEventListener("tap", function() {
})
$(wrapper).css("width", width - 60);
wrapper.classList.add("mui-scroll-wrapper");
mui(wrapper).scroll({
bounce: false
})
scrollWrapper();
var slider = document.getElementById("slider");
slider.classList.add("mui-slider");
mui(slider).slider({
bounce: false
})
mui(".mui-scroll").on("tap", ".mui-control-item", function() {
var target = $(event.target);
mui('.mui-slider').slider().gotoItem(target.index()); //核心代碼www.bcty365.com
})
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
var index = event.detail.slideNumber
var defaultTab = $(".mui-scroll").children().get(index); //獲取當前元素
var mtap = $(".mui-scroll").children();
var len = $(".mui-scroll").children().length //總共的個數
var width = $(wrapper).width(); //顯示的長度
var Child = $(".mui-scroll").children().get(index);
var widthChild = $(Child).outerWidth(); //每個節點的長度
var num = width / widthChild;
var numfamt = Math.floor(num); //顯示的個數
var maxscrollx = $(".mui-scroll").width()
var hindnum = len - numfamt; //隱藏的個數
mui.toast(maxscrollx + "長度");
if(index <= 3) {
mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0, 100)
} else if(index > numfamt - 2) {
mui('.mui-scroll-wrapper').scroll().scrollTo(-50 * hindnum, 0, 100)
}
for(var i = 0; i < len; i++) {
if(i == index) {
defaultTab.classList.add("mui-active")
} else {
mtap.get(i).classList.remove("mui-active")
}
}
})
})
function scrollWrapper() {
var scroll = mui(".mui-scroll-wrapper").scroll();
document.querySelector(".mui-scroll-wrapper").addEventListener("scroll", function() {
//mui.toast(scroll.x);
})
}
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
#add-tab {
position: absolute;
margin: 5px;
float: right;
margin: 0pxs;
padding: 0px;
color: cadetblue;
display: block;
font-size: 30px;
z-index: 20;
right: 0;
color: #000000;
}
#add-tab:active {
color: #007AFF;
}
.mui-segmented-control.mui-scroll-wrapper {
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item {
padding: 0 5px;
height: 38px;
border-bottom-style: solid;
border-bottom-width: 0px;
border-bottom-color: black;
border-bottom-width: 2px;
}
.mui-segmented-control.mui-scroll-wrapper .mui-control-item.mui-active {
border-bottom-color: blue;
border-bottom-width: 2px;
}
</style>
</head>
<body>
<div class="mui-content">
<a id="add-tab" class=" mui-icon mui-icon-plusempty">
</a>
<div id="scroll-wrapper" class="mui-slider-indicator mui-segmented-control mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<a class="mui-control-item mui-active" value="zhaodong1">
推薦
</a>
<a id="item2" class="mui-control-item">
熱點
</a>
<a class="mui-control-item">
北京
</a>
<a class="mui-control-item">
社會
</a>
<a class="mui-control-item">
娛樂
</a>
<a class="mui-control-item">
科技
</a>
<a class="mui-control-item">
你好
</a>
<a class="mui-control-item">
你好
</a>
</div>
</div>
<div id="slider">
<div class="mui-slider-group">
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第1個選項卡子項</li>
<li class="mui-table-view-cell">第1個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<ul class="mui-table-view">
<li class="mui-table-view-cell">第2個選項卡子項</li>
<li class="mui-table-view-cell">第2個選項卡子項</li>
</ul>
</div>
</div>
</div>
</div>
</body>
