cari

Rumah >hujung hadapan web >tutorial js >Julat berangka yang dilaksanakan oleh jQuery range2dslider pilih plug-in kesan khas berbilang kod sharing_jquery

Julat berangka yang dilaksanakan oleh jQuery range2dslider pilih plug-in kesan khas berbilang kod sharing_jquery

WBOY
WBOYasal
2016-05-16 15:42:251470semak imbas

Contoh dalam artikel ini menerangkan kesan pemalam pemilihan julat2dslider berangka yang dilaksanakan oleh jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah pemalam jquery yang mudah Selepas menggunakan pemalam ini, tetikus boleh meluncur (seret) untuk mengawal kod kesan khas pemilihan julat berangka.
运行效果图：                             -------------------查看效果 下载源码----->-- --------

Petua: Jika penyemak imbas tidak berfungsi dengan betul, anda boleh cuba menukar mod penyemakan imbas.

Kod kesan khas untuk memilih julat berangka yang dilaksanakan oleh jQuery adalah seperti berikut 

<!doctype html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>jQuery数值范围选取插件range2dslider </title>
<script type="text/javascript" src="jquery.js"></script>
<link rel="stylesheet" href="jquery.range2dslider.css">
<script type="text/javascript" src="jquery.range2dslider.js"></script>
<style>
 body,html{
 margin:0px;
 padding:0px;
 }
 ul{
 margin:0px 0px;
 padding:10px 25px;
 }
 body>div{
 margin:0px 20px;
 padding:20px;
 background:rgba(184, 184, 184, 0.1);
 }
</style>
</head>
<body>
<div>
<h2>简单的二维滑块</h2>
<input id="slider">
<script>
window.onerror = function(msg, url, linenumber) {
 alert('Error message: '+msg+'\nURL: '+url+'\nLine Number: '+linenumber);
 return true;
}
$('#slider').range2DSlider({
 grid:true,
 axis:[[1,2,5,7,10],[2,5,10]],
 projections:true,
 showLegend:[1,1],
 allowAxisMove:['both'],
 printLabel:function( val ){
 this.projections&&this.projections[0].find('.xdsoft_projection_value_x').text(val[1].toFixed(5));
 return val[0].toFixed(5);
 }
})
 .range2DSlider('value',[[0,1],[3,0],[6,6]]);

$('#slider')
 .range2DSlider();
</script>
<h2>水平滑块</h2>
<input id="slider1">
<script>
$('#slider1').range2DSlider({
 template:'horizontal',
 value:[[5,0],[7,0]],
 onlyGridPoint:true,
 round:true,
 axis:[[-3,-2,-1,0,1,2,3,4,5,6,7,8,9,10]]
});
</script>
<h2>垂直滑块</h2>
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<input class="slider2">
<div style="clear:both;float:none;"></div>
<script>
$('.slider2').range2DSlider({
 template:'vertical',
 value:[[0,5]],
 showRanges:[[0,1]],
 style:'float:left;margin-left:25px;',
 axis:[[0,1],[0,10]],
 round:true,
 printLabel:function( val ){
 return val[1]+' yo';
 }
});
</script>
<h2>平滑滑块(x)</h2>
<input class="slider3">
<script>
 var values = [];
 var ranges = [];
 var cities = [
 'Abuja',
 'Accra',
 'Adamstown',
 'Addis',
 'Algiers',
 'Alofi',
 'Amman',
 'Amsterdam', 
 'Andorra',
 'Ankara',
 'Antananarivo', 
 'Apia',
 'Ashgabat', 
 'Asmara',
 'Astana',
 'Asuncion', 
 'Athens',
 'Avarua',
 'Baghdad', 
 'Baku',
 'Bamako', 
 'Bandar',
 'Bangkok', 
 'Bangui',
 'Banjul',
 'Basseterre', 
 'Beijing',
 'Beirut',
 'Belgrade', 
 'Belmopan'
 ];
 for(var i = -10,k=0;i<=10;i++,k++ ){
 values.push([i,Math.sin(i),cities[i+10]]);
 if( i<10 )
 ranges.push([k,k+1]);
 } 
 $('.slider3').range2DSlider({
 x:'right',
 y:'top',
 showLegend:[0,0],
 showRanges:ranges,
 axis:[[-10,10],[-1.5,1.5]],
 allowAxisMove:['y'],
 printLabel:function( val ){
 return val[1].toFixed(2)+'<br>'+val[2];
 }
 }).range2DSlider('value',values);
</script>
<h2>自定义风格滑块</h2>
<input id="slider4">
<style>
 .xdsoft_custom .xdsoft_range2dslider_runner{
 border-radius:1px;
 margin:0px 0px -4px -8px !important;
 background:rgba(0,0,127,0.5);
 border:1px outset #ddd;
 }
 .xdsoft_custom .xdsoft_range2dslider_box{
 min-height:8px;
 background:rgba(127,127,127,0.5);
 border-radius:1px;
 border-style:solid;
 }
 .xdsoft_custom .xdsoft_slider_label{
 background: red;
 color: #fff;
 bottom: 22px !important;
 }
 .xdsoft_custom .xdsoft_slider_label.xdsoft_slider_label_top:after{
 border-top-color:red;
 }
</style>
<script>
$('#slider4').range2DSlider({
 grid:false,
 height:0,
 className:'xdsoft_custom',
 showLegend:[1,0],
 axis:[[0,0.1]],
 tooltip:['top'],
 alwShowTooltip:[true],
 allowAxisMove:['x'],
 printLabel:function( val ){
 return val[0].toFixed(3);
 }
}).range2DSlider('value',[[0.05,0]]);
</script>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>
Di atas ialah kod kesan khas untuk memilih julat berangka yang dilaksanakan oleh jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery tab web plug-in contoh penggunaan rTabs analysis_jqueryArtikel seterusnya：jQuery tab web plug-in contoh penggunaan rTabs analysis_jquery

Artikel berkaitan

Lihat lagi