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 の簡単な例は、この fiddleです。私が構築したコンポーネントには、ウィジェットの高さを設定する setHeight 関数があります。jQuery で高さを設定する 2 行だけです。高さを動的に変更できるように、css をセットアップする (または必要に応じて jquery を追加する) 方法が必要です。

4

2 に答える 2

1

コンテナの高さを計算し、「a」要素の高さに挿入できます。

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/

入力の高さを削除したことに注意してください。設定したフォントによっては、元に戻す必要がある場合があります。マージンの上限値は、予想される値の範囲に従って最適化できます。この場合、10 による除算は特定のポイントまで機能すると思います

CSS によってこれを行うことができます (ただし、実際には、どれだけ動的に行こうとするかによって異なります)。

.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 に答える