仿网易效果的导航条插件-20150312修改篇

提醒 2015-3-12 14：19

今天自己在使用的时候发现导航条动态添加的时候有问题，会出现效果无法实现。主要是因为有个计算的一页显示的地方出现问题。
现在给出一个临时的解决方案。使用css rem单位进行控制。
css代码 这里是一页显示4个样例

.mui-segmented-control .mui-control-item{  
    width: 5rem;  
}  

添加js代码段

var handlerOrientationChange = function() {  
                var width = window.innerWidth;  
                var fontSize = 16 * (width / 320);  
                document.documentElement.style.fontSize = fontSize + "px";  
            };  
            window.onresize = handlerOrientationChange;  
            setTimeout(function() {  
                handlerOrientationChange();  
            }, 0)

以上如果有问题可以加我QQ：75811329.共同研究。

update time:2015-3-10 20:55

附件已经是最新项目包，解决了到scrollIIndex=-1或者大于0时的bug。请大家及时更新

最近看到大家都在找网易客户端的导航条，今天花了一天时间给大家在mui.js的基础上进行了封装一下，规范完全按照mui进行封装的。可以直接用我mui.js替换你项目目录下的mui.js就可以使用了此功能。
由于我的机型不是太多，所以没有做太多的适配。

参数解释

   var scroll = mui('.mui-slider');  
        scroll.slider({  
        isScroll:true, //是否可滑动  
        pageSize:6, //导航条可显示几条数据 默认为4  
            scrollIndex:-1//最小为-1 最大不能大于pageSize-3  也就是当滑倒第几个项时会出现隐藏的项默认为最后一项  
   });

注意这里

<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-2"></div>

mui-col-xs-2 这个css样式还是需要大家自己去设置的。

具体实现的效果大家自己去运行demo吧。我把demo的源码放上来了

效果类似与