jQuery divide a buttonset into a certain number of rows

Question

I was looking for a jQuery plugin that let me create an array of buttons and I found jQuery UI buttonset Now this widget is very close to what I need, since only one button can be checked at the time, but now comes the question: does this widget provide a way to display the list of options(radios) in certain number of rows?? I ask because I want to have a result like the one in the image below :

enter image description here

Here's a fiddle

And the Html code:

<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>

and the js:

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

Any advise or guidance would be greatly appreciated.

Kiran · Accepted Answer · 2013-09-22 13:27:23Z

If I understood your problem correct, you would like to change apply css to change your html as mentioned in the image. Try to update you html code with:

<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

Collectives™ on Stack Overflow

jQuery divide a buttonset into a certain number of rows

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related