自定义 jQuery UI 滑块高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20150447/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Customizing jQuery UI Slider height & width
提问by lhan
When customizing the height/width of the jQuery UI Slider (and handle), the handle will now slide too far left (off of slider). Is there a recommended way of going about doing this?
自定义 jQuery UI 滑块（和手柄）的高度/宽度时，手柄现在将向左滑动太远（滑出滑块）。是否有推荐的方法来执行此操作？
Here's a fiddle to show you what I mean: http://jsfiddle.net/w7A4k/
这是一个向您展示我的意思的小提琴：http: //jsfiddle.net/w7A4k/
I didn't see anything in the API Documentationfor this, and I'm using a very basic setup:
我在API 文档中没有看到任何内容，而且我使用的是非常基本的设置：
$("#slider").slider({
orientation: "horizontal",
max: 100,
min: 0
});
回答by Tushar Gupta - curioustushar
Try
尝试
.ui-slider .ui-slider-handle {
height: 15px;
width: 5px;
padding-left: 5px; //add this
}
要将滑块放在栏内添加
padding-left: 5px;padding-left: 5px;回答by Rashid
Unit size of JQuery UI Slider is in em. Therefore slider size is relative to its font size.
JQuery UI Slider 的单位大小为em. 因此滑块大小与其字体大小有关。
- Change the font size of slider div to handle slider HEIGHT.
- Change the container width of slider to handle slider WIDTH.
- 更改滑块 div 的字体大小以处理滑块高度。
- 更改滑块的容器宽度以处理滑块宽度。
回答by Ahsan
$(document).ready(function() {
function home_page_banner_height(selector) {
var wind_widht = $( window ).width();
var req_height = ( (banner_height / banner_width) * 100 );
//banner_height is height of item div of carousel and banner_width is width of item div of caousel
var calculate_height = (wind_widht / 100) * req_height;
$('.v_center_con .v_center_inner').height(calculate_height);
$(selector).height(calculate_height);
}
home_page_banner_height('.banner_con .item');
$(window).resize(function() {
home_page_banner_height('.banner_con .item');
//this function will make your slider responsive for all screen sizes
});
});
