现在的位置: 首页 > 综合 > 正文

横向的silder,支持ff,ie,chrome,safari,以及移动设备的触摸屏浏览,支持点击和滑动

2013年09月18日 ⁄ 综合 ⁄ 共 5242字 ⁄ 字号 评论关闭
<!DOCTYPE html> 
<html> 
	<head> 
	<title>My Page</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
</head> 
<style>
div .ui-slider {
    display: inline-block;
    height: 14px;
    margin: 0 12px 0 12px;
    overflow: visible;
    padding: 0;
    position: relative;
    top: 4px;
    width: 70%;
	border-radius: 1em 1em 1em 1em;
	background-clip: padding-box;
    color: #222222;
    font-weight: bold;
    text-shadow: 0 1px 0 #FFFFFF;
	
	border:1px solid #bbb;background:#d6d6d6;
	background-image:-webkit-gradient(linear,left top,left bottom,from(#d0d0d0),to(#dfdfdf));
	background-image:-webkit-linear-gradient(#d0d0d0,#dfdfdf);
	background-image:-moz-linear-gradient(#d0d0d0,#dfdfdf);
	background-image:-ms-linear-gradient(#d0d0d0,#dfdfdf);
	background-image:-o-linear-gradient(#d0d0d0,#dfdfdf);
	background-image:linear-gradient(#d0d0d0,#dfdfdf)
}
.ui-slider a{
    height: 28px;
	padding:0px;
	margin: 0px;
    margin-left: -15px;
    margin-top: -16px;
    outline: 0 none;
    position: absolute;
    top: 50%;
    width: 28px;
    z-index: 1;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	border-radius: 1em 1em 1em 1em;
	border: 1px solid #CCCCCC;
	color: #222222;
	
	background:#eee;
	background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f1f1f1));
	background-image:-webkit-linear-gradient(#fff,#f1f1f1);
	background-image:-moz-linear-gradient(#fff,#f1f1f1);
	background-image:-ms-linear-gradient(#fff,#f1f1f1);
	background-image:-o-linear-gradient(#fff,#f1f1f1);
	background-image:linear-gradient(#fff,#f1f1f1)
}
.ui-slider-input {
    display: inline-block;
    margin-bottom: 8px;
    margin-left: 6px;
    width: 37px;
}
label.ui-input-text {
	position: relative;
    display: block;
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 0 6px;
	color: #333333;
    text-shadow: 0 1px 0 #FFFFFF;
	width: 100%;
}
.ui-slider span{
	display: inline-block;
    height: 10px;
    margin: 0 12px 0 12px;
    overflow: visible;
    padding: 0;
    position: relative;
    top: 0px;
	margin:0 2px 0px 2px;
    width: 0%;
	border-radius: 0.5em;
	top: -3px;
	background-clip: padding-box;
	border: 0px;
    font-weight: bold;
	background-image:-webkit-gradient(linear,left top,left bottom,from(#aaa),to(silver));
	background-image:-webkit-linear-gradient(#aaa,silver);
	background-image:-moz-linear-gradient(#aaa,silver);
	background-image:-ms-linear-gradient(#aaa,silver);
	background-image:-o-linear-gradient(#aaa,silver);
	background-image:linear-gradient(#aaa,silver);
	filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#a0a0a0, endColorstr=silver);
}
</style>
<script type="text/javascript">
function getxy(e)
{
    var a=new Array()
    var t=e.offsetTop;
    var l=e.offsetLeft;
    var w=e.offsetWidth;
    var h=e.offsetHeight;
    while(e=e.offsetParent){
        t+=e.offsetTop;
        l+=e.offsetLeft;
    }
    a[0]=t;a[1]=l;a[2]=w;a[3]=h
	return a;
}
function g(id)
{
	return document.getElementById(id);
}
function slide(_id, _txt)
{
	var id = _id;
	var ipt_id = 'ipt_' + _id;
	var tra_id = 'trac_' + id;
	var a_id   = 'a_' + _id;
	var per_id = 'per_' + _id;
	var swither= false;
	var rate = arguments.length>2 ? (arguments[2]<0?1:arguments[2]) : 1;
	
	var html = '<label id="label_'+_id+'" class="ui-input-text" for="slider-0">'+_txt+'</label>\
	<input id="'+ipt_id+'" class="ui-slider-input" type="number" max="100" min="0" value="0" readonly="readonly">\
	<div class="ui-slider" id="'+tra_id+'"><span id="'+per_id+'"></span><a id="'+a_id+'"></a></div>';
	var value = 0;

	function swon(e)
	{
		swither = true;
		e.preventDefault();
	}
	function swoff(e)
	{
		e.preventDefault();
		swither = false;
	}
	function pd(e)
	{
		/*jQuery('#dbg1').html('pd...');
		var tmp = '';
		for(var x in e['originalEvent']['touches'][0])
			tmp += x +'='+e['originalEvent']['touches'][0][x]+'<br/>';
		jQuery('#dbg').html(tmp);*/
		e.preventDefault();
	}
	var first = true;
	function mv(e){
		try{
			if(!swither&&e.type.indexOf('move')!=-1) return;
			jQuery('#dbg').html('type='+e.type+',pageX='+e['originalEvent'].pageX+',layerX='+e['originalEvent'].layerX+','+e['originalEvent'].timeStamp);
        

			var xy = getxy(g(tra_id));
			var w  = xy[2];
			try{
				var o = e['originalEvent']['touches'][0];
			}catch(err){
				if(typeof(e.pageX)=='undefined')
					return;
			}
			if(typeof(e.pageX)=='undefined')
				var x  = o.pageX - xy[1];
			else
				var x  = e.pageX - xy[1];
			
			var per = Math.round(x/w*100);
			if(per>100) per = 100;
			if(per<0) per = 0;
			
			jQuery('#'+ipt_id).val(per*rate);
			jQuery('#'+a_id).css('left',per+'%');
			jQuery('#'+per_id).css('width',per+'%');
			value = per*rate;
			e.preventDefault();
		}catch(e){
			jQuery('#dbg').html(e.toString());
		}
		//alert(tmp)
	}

	jQuery('#'+id).html(html);
	//vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel
	//touchstart touchmove touchend orientationchange throttledresize tap taphold swipe swipeleft swiperight scrollstart scrollstop
	jQuery('#'+id).unbind('mousemove').bind('mousemove' ,[id] , mv);
	jQuery('#'+id).unbind('touchmove').bind('touchmove' ,[id] , mv);

	jQuery('#'+id).unbind('touchstart').bind('touchstart' ,[id], mv);
	jQuery('#'+id).unbind('click').bind('click' ,[id], mv);

	jQuery('#'+id).find('a').unbind('mousedown').bind('mousedown',swon);
	jQuery('#'+id).find('a').unbind('touchstart').bind('touchstart',swon);

	jQuery('#'+id).find('a').unbind('mouseup').bind('mouseup',swoff);
	jQuery('#'+id).find('a').unbind('mouseout').bind('mouseup',swoff);
	jQuery('#'+id).find('a').unbind('touchend').bind('touchend',swoff);
	
	this.val = function(){return value;};
}
jQuery(document).ready(function(e) {
    new slide('honeycombs_div2','Test');
});
</script>
<body>
<div id="honeycombs_div2"></div>
<div id="dbg"></div>
</body>
</html>

 

个人感觉在移动设备(我测试用的ipod 4)上比jQuery Mobile的silder更灵活,没有jQuery Mobile那种一顿一顿的感觉。

 

我的QQ群:

PHPer&Webgame&移动开发,群号:95303036

 

抱歉!评论已关闭.