jQuery滑动条插件

所属分类：输入-拖和放

71996 310 查看评论 (6)

分享到微信朋友圈

查看演示立即下载

插件描述：jQuery的滑块插件源码

实现代码

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script type="text/javascript" src="jquery-1.2.6.js"></script>
        <script type="text/javascript" src="jquery.jslider.js"></script>
		
        <style type="text/css">
			 .defaultbar {
                margin-top: 10px;
                height: 5px;
                background-color: #FFFFE0;
                border: 1px solid #A9C9E2;
                position: relative;
            } .defaultbar .jquery-completed {
                height: 3px;
                background-color: #7d9edb;
                top: 1px;
                left: 1px;
                position: absolute;
            } .defaultbar .jquery-jslider {
                height: 15px;
                background-color: #E6E6FA;
                border: 1px solid #A5B6C8;
                top: -6px;
                display: block;
                cursor: pointer;
                position: absolute;
            } .defaultbar .jquery-jslider-hover {
                background-color: #000080;
            }
            
            fieldset {
                border: solid 1px #dedede;
                padding: 0 10px;
            }
            
            fieldset legend {
                background-color: #FFF5FA;
                border: 1px solid #F8B3D0;
                padding: 5px 10px;
            }
        </style>
        <script type="text/javascript">
            $().ready(function(){
                var maxFont = 30;
                var mf = $('#myFont').css('font-size', 30);
                $.fn.jSlider({
                    renderTo: '#slidercontainer1',
                    size: {
                        barWidth: 400,
                        sliderWidth: 5
                    },
                    onChanging: function(percentage, e){
                        mf.css('font-size', maxFont * percentage);
						//在控制台输出信息
                        window.console && console.log('percentage: %s', percentage);
                    }
                });
            });
        </script>
    </head>
    <body>
        <fieldset>
            <dl>
                <div id="myFont">
                    Hello, world!
                </div>
                <div id="slidercontainer1">
                </div>
            </dl>
        </fieldset>
    </body>
</html>

(function($){
    $.extend($.fn, {
        /*实现一个jquery滑动条插件*/
        jSlider: function(setting){
		    var ps = $.extend({
                renderTo: $(document.body),
                enable: true,
                initPosition: 'max',
                size: {barWidth: 200,sliderWidth: 5},
                barCssName: 'defaultbar',
                completedCssName: 'jquery-completed',
                sliderCssName: 'jquery-jslider',
                sliderHover: 'jquery-jslider-hover',
                onChanging: function(){
                },
                onChanged: function(){
                }
            }, setting);
            
			
            //强制将renderTo强制转换成jQuery对象
            ps.renderTo = (typeof ps.renderTo == 'string' ? $(ps.renderTo) : ps.renderTo);
            
            //渲染UI
            var sliderbar = $('<div><div>&nbsp;</div><div>&nbsp;</div></div>')
							.attr('class', ps.barCssName)
								.css('width', ps.size.barWidth)
									.appendTo(ps.renderTo);
            
            var completedbar = sliderbar.find('div:eq(0)')
									.attr('class', ps.completedCssName);
            
            var slider = sliderbar.find('div:eq(1)')
						.attr('class', ps.sliderCssName)
							.css('width', ps.size.sliderWidth);
            
			
            var bw = sliderbar.width(), sw = slider.width();
            
            ps.limited = {min: 0, max: bw - sw};
            
			//定位completedbar的填充长度以及slider左侧距离
            if (typeof window.$sliderProcess == 'undefined') {
                window.$sliderProcess = new Function('obj1', 'obj2', 'left', 
												'obj1.css('left',left);obj2.css('width',left);');
            }
            

			//eval('ps.limited.' + ps.initPosition)来获取，从而避免switch操作
			//此处相当于调用 sliderProcess(xx,xx,xxx)   执行slider.css('left',value);completedbar.css('left',value)
            $sliderProcess(slider, completedbar, eval('ps.limited.' + ps.initPosition));
            
            /*jQuery拖拽功能*/
            var slide = {
                drag: function(e){
                    var d = e.data;
					
                    var l=Math.min(Math.max(e.pageX - d.pageX + d.left, ps.limited.min), ps.limited.max);
					
					$sliderProcess(slider,completedbar,l);
					
					ps.onChanging(l/ps.limited.max,e);
                },
				
				drop:function(e){
					slider.removeClass(ps.sliderHover);
					
					ps.onChanged(parseInt(slider.css('left'))/ps.limited.max,e);
					//去除绑定
					$().unbind('mousemove',slide.drag).unbind('mouseup',slide.drop);
				}
            };
			
//			jSlider enable属性为true时，在end-user按下鼠标时绑定mousemove事件，在鼠标弹起时移除，我们只需要同步更新slider的left 属性和completedbar的width即可，同时在drag中绑定onChanging方法，在drop中绑定onChanged方法，向这两个方法推送的参数相同，1>百分比，即value值，介于0~1，2>event。
			if(ps.enable){
				slider.bind('mousedown',function(e){
					var d={
						left:parseInt(slider.css('left')),
						pageX:e.pageX
					}
					$(this).addClass(ps.sliderHover);
					$().bind('mousemove',d,slide.drag).bind('mouseup',d,slide.drop);
				});
			}
			
			slider.data = { bar: sliderbar, completed: completedbar };
            return slider;
        }
    });
})(jQuery);

jQuery超平滑的CSS3转换和过渡插件jquery.transit

jQuery旋转插件jqueryrotate