Building JQM App
Need to display a scrolling list of nearly 200 items with check boxes next to each one that will check/uncheck as the user makes their selection.
looking for a clean way of implementing said list using JQM if possible, but I don't see anything in their documentation/demos.
is there something useable in JQM or should I just roll my own?
Thanks.
Example:
http://jsfiddle.net/qvx85/14/
JS
// Add 200 list items
for( i=0; i < 200; i++){
createListItems(i, 'hello-'+i);
}
// add jQM markup
$('#theList').trigger('create');
// refresh the list
$('#theList').listview('refresh');
function createListItems(number, option) {
var item = '<li><h3>Question '+number+' using Checkbox Options</h3><p><strong>Do you '+option+'?</strong></p><p>Please select an option</p><p class="ui-li-aside"><fieldset data-role="controlgroup" data-type="horizontal"><input type="checkbox" name="q'+number+'" id="q'+number+'-'+option+'" class="custom" /><label for="q'+number+'-'+option+'">'+option+'</label></fieldset></p></li>';
$('#theList').append(item);
}
HTML
<div data-role="page" id="home">
<div data-role="content">
<h2>List of Questions</h2>
<ul data-role="listview" data-inset="true" id="theList">
<li>
<h3>Question 1 using Radio Options</h3>
<p><strong>Do you agree?</strong></p>
<p>Please select an option</p>
<p class="ui-li-aside">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="q1" id="q1-agree" value="agree" />
<label for="q1-agree">Agree</label>
<input type="radio" name="q1" id="q1-disagree" value="disagree" />
<label for="q1-disagree">Disagree</label>
</fieldset>
</p>
</li>
<li>
<h3>Question 2 using Radio Options</h3>
<p><strong>Another question</strong></p>
<p>Please select an answer</p>
<p class="ui-li-aside">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="radio" name="q2" id="q2-agree" value="agree" />
<label for="q2-agree">Agree</label>
<input type="radio" name="q2" id="q2-disagree" value="disagree" />
<label for="q2-disagree">Disagree</label>
</fieldset>
</p>
</li>
<li>
<h3>Question 3 using Checkbox Options</h3>
<p><strong>Do you agree?</strong></p>
<p>Please tap to select the option</p>
<p class="ui-li-aside">
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="q3" id="q3-agree" class="custom" />
<label for="q3-agree">Agree</label>
</fieldset>
</p>
</li>
</ul>
</div>
</div>
Related
Select Yes and hit the tab key - you go to the input text box - hit tab again and you can't select No - it directly jumps to the Go Back link. Why am I not able to select No on tab from the input text ?
<div>
<div>
<div class="radio">
<label>
<input type="radio" name="code" id="code-yes" />
<span>Yes</span>
</label>
</div>
<fieldset>
<legend>Enter your code (optional)</legend>
<div class="input-group">
<input type="text" class="form-control" placeholder="0000-0000-0000 " />
</div>
</fieldset>
<br/>
<div class="radio">
<label>
<input type="radio" name="code" id="code-no" />
<span>No, I don't have a code</span>
</label>
</div>
</div>
<div>
Go Back
</div>
</div>
I have this html which i want to target with css. The problem is that i can't find the right css selector.
The problem is that . entry-content doesn't work. Neither does.event-manager-form. The form itself is a Wordpress event manager form and want to style in with, amongst others,, border-radius
<div class="entry-content">
<form action="/post-an-event/" method="post" id="submit-event-form" class="event-manager-form" enctype="multipart/form-data">
<fieldset>
<label>Your account</label>
<div class="field
account-sign-in">
You are currently signed in as <strong>Bla bla</strong>. <a c class="button" href="...">Sign out</a>.
</div>
</fieldset>
<!-- Event
Information Fields -->
<h2 class="section-title">Event Details</h2>
<fieldset class="fieldset-event_title">
<label for="event_title">Event Title<span class="require-field">*.
</span></label>
<div class="field required-field">
<input type="text" class="input-text event_title" name="event_title" id="event_title" placeholder="Event title" attribute="" value="" maxlength="" required />
</div>
</fieldset>
<fieldset class="fieldset- event_online">
<label for="event_online">Online Event<span class="require-
field">*</span></label>
<div class="field
required-field">
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="yes" /> Yes</label>
<label><input
type="radio" name="event_online" id="event_online"
attribute="" value="no" /> No</label>
I want to mix radio and checked button like i design B here https://ux.stackexchange.com/questions/70531/using-mixed-radio-and-checkbox-buttons-is-there-any-efficiency-or-usability-ga
But i just could figure out how to do separately:
<input class="radio-input" type="radio" name="result" value="names" />
<label class="radio-label">Get names of people starting with..</label>
<input type="checkbox" id="A" name="name[]" value="n">
<label for="A">A</label>
<input type="checkbox" id="B" name="name[]" value="n">
<label for="B">B</label>
How can i do this like in design B?
You would have to put them into separate divs, and then align them to be next to each other with CSS styling.
.no-bullets {
list-style:none;
}
<h2>first row</h1>
<ul class = "no-bullets">
<li> <input type="radio" name="name"></li>
<li> <input type="radio" name="name"></li>
<ul class = "no-bullets">
<li><input type="checkbox" name="sex"></li>
<li><input type="checkbox" name="sex"></li>
<li><input type="checkbox" name="sex"></li>
</ul>
</ul>
</div>
When in a form I have several radio inputs that make a single control (example below), what's the most semantic way to group them together?
<form>
<!-- Single radio control made of 3 radio inputs -->
<input type="radio" name="X" value="A" />
<input type="radio" name="X" value="B" />
<input type="radio" name="X" value="C" />
<!-- Some other control -->
<input type="text" name="Y" value="D" />
</form>
I know I can enclose them in a paragraph (<p>..</p>), but I wonder if maybe list (<ul>..</ul>) would be more semantic approach?
You can group together by using fieldset
.radio_button{
list-style-type: none;
}
<form>
<h1>Testing Form Radio buttons</h1>
<fieldset>
<legend>Title</legend>
<ul>
<li class="radio_button">
<label for="title_1">
<input type="radio" id="title_1" name="title" value="M." />
Mister
</label>
</li>
<li class="radio_button">
<label for="title_2">
<input type="radio" id="title_2" name="title" value="Ms." />
Miss
</label>
</li>
</ul>
</fieldset>
</section>
</form>
Try this:
<form>
<!-- Single radio control made of 3 radio inputs -->
<ul>
<li>
<input type="radio" name="X" value="A" />A
</li>
<li>
<input type="radio" name="X" value="B" />B
</li>
<li>
<input type="radio" name="X" value="C" />C
</li>
</ul>
<input type="text" name="Y" value="D" />
</form>
A good way would be using the bootstrap lib and format your forms with bootstrap
: Bootstrap form inputs
You can use the name field same if you want to get only 1 value selected,
And only selected field's value (value = "A") will be submitted.
You can group them using css styles. W3.css is a nice library like bootstrap.
W3.css examples
Using jQuery Mobile and Horizontal radio field sets as show at:
http://demos.jquerymobile.com/1.4.3/checkboxradio-radio/#Horizontalgroup
What's the proper way to write two (or many) different radio groups into a single fieldset (if possible). Writing multiple horizontal radio groups into a single fieldset seems strange to me. I'm not sure if I'm using all the elements properly.
<div data-role="page" id="test">
<div data-role="content">
<div data-role="fieldcontain">
<div class="ui-body ui-body-a ui-corner-all">
<fieldset data-role="controlgroup" data-theme="a" data-type="horizontal">
<legend>FieldSet Name:</legend>
<div class="ui-field-contain">
<legend>Question 1:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1-no" value="1">
<label for="radio-choice-1-no">No</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1-yes" value="2">
<label for="radio-choice-1-yes">Yes</label>
</div>
<div class="ui-field-contain">
<legend>Question 2:</legend>
<input type="radio" name="radio-choice-2" id="radio-choice-2-no" value="1">
<label for="radio-choice-2-no">No</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2-yes" value="2">
<label for="radio-choice-2-yes">Yes</label>
</div>
</fieldset>
</div>
</div>
</div>