我正在使用 jQuery Knob 来显示进度（只读模式）。 我希望圆圈大小能够根据我的应用动态使用的布局/设备的大小进行调整。
我已经尝试使用data-width="75%"，但圆圈消失了。
我的第二次尝试是在脚本中定义大小：
$(".knob").knob({
height: 75%;
但这也没有奏效。
你们能帮我解决这个问题吗？ :)
谢谢！
【问题讨论】：
标签： jquery mobile resize jquery-knob
<html>
<head id="Head1" runat="server">
<title></title>
<style>
body {height:100%; width:100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.knob.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var knobWidthHeight,
windowObj;
// store reference to div obj
windowObj = $(window);
// if the window is higher than it is wider
if(windowObj.height() > windowObj.width()){
// use 75% width
knobWidthHeight = Math.round(windowObj.width()*0.75);
} else {
// else if the window is wider than it is higher
// use 75% height
knobWidthHeight = Math.round(windowObj.height()*0.75);
}
// change the data-width and data-height attributes of the input to either 75%
// of the width or 75% of the height
$('#knob').attr('data-width',knobWidthHeight).attr('data-height',knobWidthHeight);
// draw the nob NOTE: must be called after the attributes are set.
$(function() {
$("#knob").knob({
draw : function () {}
});
});
});
</script>
</head>
<body>
<!-- knob has to be an input | set default data-width and height, the jquery above will reset them before the knob is loaded
knob width and height must always be the same as each other -->
<input id="knob" data-width="500" data-height="500" data-displayInput=false value="35">
</body>
</html>
有关如何使用旋钮库的更多示例，请转到their demo page 并查看源代码。它将向您展示改变旋钮的各种不同方法。
【讨论】：
#knobdiv 的css，并在knobdiv div 中放置了一个id 为knob 的输入？只需检查所有代码，它可能是缺少选择器。您是否还尝试在 Chrome 或 Firefox 中进行控制台以查看是否有任何 javascript 错误？
我不认为 jQuery Knob 接受百分比作为值。尝试获取窗口的宽度和高度并计算其中的 75%，然后设置该像素值。比如：
var windowObj = $(window);
var newHeight = Math.round((windowObj.height() / 4) * 3);
var newWidth = Math.round((windowObj.width() / 4) * 3);
现在只需将百分比值替换为newHeight 和newWidth 像素值。
【讨论】：
$(window) 替换为$('#divName') 并将div 容器的高度和宽度设置为css 中的75%。只要您正在谈论的 div 没有包含在另一个 div 中，这应该可以工作。
$(document).ready(function() { $(window).resize(function() { var mydiv = document.getElementById("knobdiv"); var curr_width = mydiv.style.width; var knobwidth = curr_width * 0.75; knob.trigger('configure', { 'width': 500, 'height': 500 }); knob.draw(); }); });
我也遇到了这个问题，我用一些 javascript 代码提供了一个更简单的解决方案。
首先，要针对某些分辨率（作为响应式设计），您必须将此代码添加到 js 文件中，例如 custom.js：
$(window).bind("resize", widthFunctions);
function widthFunctions( e ) {
var winHeight = $(window).height();
var winWidth = $(window).width();
if (winWidth < 980 && winWidth > 750) {
$(".pinkCircle").knob({
'min':0,
'max':10000,
'readOnly': true,
'width': ... ,
'height': ... ,
'fgColor': '#e42b75',
'dynamicDraw': true,
'thickness': 0.2,
'tickColorizeValues': true,
'skin':'tron'
})
}
}
winWidth 是您想要定位的宽度，就像您对媒体查询所做的那样。然后你可以添加你想要的设置。请注意，此类 (.pinkCircle) 已添加到 <input>。
然后，您必须添加与使用 js 添加相同的宽度的媒体查询，例如：
@media only screen and (max-width: 768px) {
.divStats > div[onTablet="span4"] {
width: ... ; // Here you could add a width for 3 circles display inline for example
}
}
我使用的是引导程序，所以我在这里添加了 span4 的宽度，即 '31.914893617021278%'，注意这只是一个示例，所有宽度和代码都可能与你的不同，但这都是从宽度而来的。
您好。
【讨论】：
您可以在输入上使用数据宽度。 Here 是响应式实现的第一次提交。
【讨论】：