<!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