更改默认滑块JQ UI [英] Changing the default slider JQ UI
本文介绍了更改默认滑块JQ UI的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
使用JQ UI创建标准滑块。无论在哪里发现如何改变它的一些参数：size，min.size，最大...
但是从来没有找到一个地方作为JQ UI滑块的标准来制作你的：放一张图片。那就是：改变滑块。
< pre lang = HTML > < ！doctype html >
< html lang = zh > ;
< head >
< meta charset = utf-8 / >
< title > jQuery UI Slider - 默认功能< / title > ;
< link rel = stylesheet href = http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css / >
< script src = http://code.jquery.com/jquery-1.9.1.js > < / script >
< script src = http://code.jquery.com/ui/1.10.3/jquery-ui.js > < / script >
< link rel = 样式表 < span class =code-attribute> href = / resources / demos / style.css / >
< 风格 >
＃slider-vertical {height：600px; background-color：＃0F3;}
< / style >
< script >
$（function（）{
$（＃slider-vertical）.slider（{
orientation：vertical，
范围：min，
min：0，
max：100，
value：60，
slide：function（event，ui）{
$ （#amount）。val（ui.value）;
}
}）;
}）;
< / script >
< / head >
< body > ;
< div id = slider-vertical > < / div >
< / body >
< / HTML >
解决方案
（function（）{
（＃slider-vertical）.slider（{
orientation：vertical，
range：min，
min：0，
max：100，
value：60，
slide：function（event，ui）{
（#amount）。val（ui.value ）;
}
}）;
}）;
< / script >
< / head >
< body > ;
< div id = slider-vertical > < / div >
< / body >
< / HTML >
With JQ UI create a standard slider. Wherever found written how to change some of its parameters: size, min.size, the maximum ...
But never found a place as a standard for JQ UI slider to make your: put a picture. That is: change the slider.
<pre lang="HTML"><!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#slider-vertical{height: 600px; background-color: #0F3;}
</style>
<script>
$(function() {
$( "#slider-vertical" ).slider({
orientation: "vertical",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
});
</script>
</head>
<body>
<div id="slider-vertical"></div>
</body>
</html> 解决方案
(function() {
( "#slider-vertical" ).slider({ orientation: "vertical", range: "min", min: 0, max: 100, value: 60, slide: function( event, ui ) {
( "#amount" ).val( ui.value ); } }); }); </script> </head> <body> <div id="slider-vertical"></div> </body> </html>
这篇关于更改默认滑块JQ UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
