1

ボタンの配列を作成できる jQuery プラグインを探していたところ、jQuery UIボタン​​セットが見つかりました 。このウィジェットは、一度に 1 つのボタンしかチェックできないため、必要なものに非常に近いものですが、次の質問が来ます。このウィジェットは、オプション (ラジオ) のリストを特定の行数で表示する方法を提供します?? 下の画像のような結果が欲しいのでお願いします：

ここに画像の説明を入力

ここにフィドルがあります

そしてHtmlコード： 

<fieldset>
    <legend>Operators</legend>
    <div id="pare">
        <input type="radio" id="pareA" name="pare" value="(" />
        <label for="pareA">(</label>
        <input type="radio" id="pareC" name="pare" value=")" />
        <label for="pareC">)</label>
    </div>
    <div id="arit">
        <input type="radio" id="arit1" name="arit" value="+" />
        <label for="arit1">+</label>
        <input type="radio" id="arit2" name="arit" value="-" />
        <label for="arit2">-</label>
        <input type="radio" id="arit3" name="arit" value="*" />
        <label for="arit3">*</label>
        <input type="radio" id="arit4" name="arit" value="/ " />
        <label for="arit4">/</label>
    </div>
    <div id="rela">
        <input type="radio" id="rela2" name="rela" value=">" />
        <label for="rela2">></label>
        <input type="radio" id="rela5" name="rela" value="<" />
        <label for="rela5">&lt;</label>
        <input type="radio" id="rela3" name="rela" value="&gt;=" />
        <label for="rela3">>=</label>
        <input type="radio" id="rela6" name="rela" value="&lt;=" />
        <label for="rela6">&lt;=</label>
        <input type="radio" id="rela1" name="rela" value="=" />
        <label for="rela1">&nbsp;=&nbsp;</label>
        <input type="radio" id="rela4" name="rela" value="<>" />
        <label for="rela4">&lt;&gt;</label>
    </div>
    <div id="logi">
        <input type="radio" id="logi1" name="logi" value="And" />
        <label for="logi1">And</label>
        <input type="radio" id="logi2" name="op" value="Or" />
        <label for="logi2">&nbsp;Or</label>
    </div>
</fieldset>

そしてjs：

$("#pare").buttonset();
$("#arit").buttonset();
$("#rela").buttonset();
$("#logi").buttonset();

アドバイスやガイダンスをいただければ幸いです。

4

1 に答える 1

1

あなたの問題が正しいと理解した場合は、画像に記載されているように、apply css を変更して html を変更してください。次のように HTML コードを更新してみてください。

<fieldset>
    <legend>Operators</legend>
    <div class="left">
    <div id="pare">
        <input type="radio" id="pareA" name="pare" value="(" />
        <label for="pareA">(</label>
        <input type="radio" id="pareC" name="pare" value=")" />
        <label for="pareC">)</label>
    </div>
    <div id="arit">
        <input type="radio" id="arit1" name="arit" value="+" />
        <label for="arit1">+</label>
        <input type="radio" id="arit2" name="arit" value="-" />
        <label for="arit2">-</label>
        <input type="radio" id="arit3" name="arit" value="*" />
        <label for="arit3">*</label>
        <input type="radio" id="arit4" name="arit" value="/ " />
        <label for="arit4">/</label>
    </div>
        </div>
    <div class="right">
    <div id="rela">
        <input type="radio" id="rela2" name="rela" value=">" />
        <label for="rela2">></label>
        <input type="radio" id="rela5" name="rela" value="<" />
        <label for="rela5">&lt;</label>
        <input type="radio" id="rela3" name="rela" value="&gt;=" />
        <label for="rela3">>=</label>
        <input type="radio" id="rela6" name="rela" value="&lt;=" />
        <label for="rela6">&lt;=</label>
        <input type="radio" id="rela1" name="rela" value="=" />
        <label for="rela1">&nbsp;=&nbsp;</label>
        <input type="radio" id="rela4" name="rela" value="<>" />
        <label for="rela4">&lt;&gt;</label>
    </div>
    <div id="logi">
        <input type="radio" id="logi1" name="logi" value="And" />
        <label for="logi1">And</label>
        <input type="radio" id="logi2" name="op" value="Or" />
        <label for="logi2">&nbsp;Or</label>
    </div>
    </div>
</fieldset>

CSS:

.left{
    float:left;
}
.right{
    float:left;
}

#arit{
    width:100px;
}

#rela{
    width:140px;
}

DEMO FIDDLE

于 2013-09-22T13:27:23.553 に答える