0

我知道这对你们中的一些人来说真的很基础，但我不知道足够的 css 来实现这一点。

我正在尝试制作我自己的微调器版本，它将挂钩到 jqueryui 主题，因此必须至少最初使用它们的类。我还需要使小部件能够动态更改其高度（和宽度）。

我的问题是我不知道如何调整按钮的大小以适应其容器的高度。如果我主动设置 div 的高度.ui-spinner，则容器太小而无法容纳文本。如果我不这样做，那么 div 就更大了，所以锚点也需要很大，但我不知道有多大。使用开发人员工具查看它，我没有看到任何边距或填充来解释额外的大小。

我看到了如何设置锚标记的样式，使其看起来像一个与按钮高度相同的按钮？不断弹出类似的问题，但我已经将样式设置为内联块。

这是我目前拥有的。我在http://jsfiddle.net/37za8/上为它做了一个小提琴

HTML

<div class="ui-corner-all ui-widget ui-widget-content ui-spinner">
    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
    <span class="ui-icon ui-icon-minusthick"></span>
</a>

    <input class="ui-spinner-input" style="margin: 0;" value="0" />

    <a class="ui-corner-all ui-widget ui-button ui-button-text-only ui-state-default" tabindex="-1" style="vertical-align: middle; margin: 0; display: inline-block;">
        <span class="ui-icon ui-icon-plusthick"></span>
    </a>
</div>

jQuery

var _selector = ".ui-spinner"

$(_selector + " .ui-spinner-input").css("height", "18px");
$(_selector + " a").css("height", "18px");

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", "24px");
$(_selector + " span").css("margin-left", "4px");

只要结果是可动态调整的，我可以更改您所说的任何内容。我相信这对你们大多数人来说很容易。提前致谢！

编辑

为了澄清起见，我试图最终模仿 jqueryui 微调器。我正在尝试制作一个可以在显示之前设置高度的小部件/组件。jqueryui 处理它的一个简单示例是this fiddle。我构建的组件有一个 setHeight 函数，它将设置小部件的高度。就是在 jQuery 中设置高度的那两行。必须有某种方法来设置 css（或在必要时添加更多 jquery），以便我可以动态更改高度。

4

2 回答 2

1

you can calculate the height of the container and insert it in the height of the "a" element:

var _selector = ".ui-spinner"

var _inputvar = 25;

$(_selector).css("height", _inputvar);
$(_selector).css("line-height", "1");

console.log($(_selector).height());

$(_selector + " a").css("height", $(_selector).height());

$(_selector + " .ui-spinner-input").css("width", "52px");
$(_selector + " a").css("width", _inputvar);
$(_selector + " span").css({display:"inline-block",position:"static",marginTop:(_inputvar/10)+"px"});

http://jsfiddle.net/37za8/13/

Notice I removed the input height, depends on your set fonts you might need to put it back. The margin top value can be optomized according to the expected range of values, I think in this case division by 10 works up to a certain point

By CSS you can do this (but it really comes down to how dynamic do you intend to go)

.ui-spinner {
    height: 25px;
}
.ui-spinner .ui-icon {
    left:4px;
}
.ui-spinner  .ui-state-default {
    padding: 12px;
}
ui-spinner-input {
    width: 50px;
}

http://jsfiddle.net/37za8/9/

于 2013-06-06T15:23:40.703 回答
1

如果您使用 css 和 jquery 的混合，您应该能够实现您想要的：

css

.ui-spinner,
.ui-spinner > a,
.ui-spinner-input {box-sizing:border-box;}
.ui-spinner > a {width:24px; text-align:center;}
.ui-spinner span.ui-icon {left:50%; margin-left:-8px;}
.ui-spinner-input {width:52px;}

jQuery

var spinner = $(".ui-spinner"),
    children = spinner.children();

 spinner.height(48); //added for test purposes (if you change the height it should change the inner object heights)

children.height(spinner.height() - 2);  //minus 2 is because the box-sizing hasn't taken into account the borders for some reason

例子

于 2013-06-07T14:30:27.743 回答