I have a client that is asking for radio buttons with choices of green, yellow, red, and blue(N/A). I have jQueryUI working fine, but obviously it only shows the base color, and a different color when clicked.
I want each radio button to load as gray by default, then change to green if you pick the first radio button, yellow if you pick the second, and so on.
To further complicate this a little bit, I'm applying it to a .NET radiobuttonlist.
Here's generated code:
<div id="radio" class="ui-buttonset">
<table border="0" id="ctl00_ContentPlaceHolder1_rdoGreet1">
<tbody>
<tr>
<td><input type="radio" value="2" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_0" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_0" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-left" role="button" aria-disabled="false"><span class="ui-button-text">GREEN</span></label></td>
<td><input type="radio" value="1" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_1" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_1" aria-pressed="false" class="ui-button ui-widget ui-state-default ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">YELLOW</span></label></td>
<td><input type="radio" value="0" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_2" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_2" aria-pressed="true" class="ui-button ui-widget ui-state-default ui-button-text-only ui-state-active" role="button" aria-disabled="false"><span class="ui-button-text">RED</span></label></td><td><input type="radio" value="-1" name="ctl00$ContentPlaceHolder1$rdoGreet1" id="ctl00_ContentPlaceHolder1_rdoGreet1_3" class="ui-helper-hidden-accessible"><label for="ctl00_ContentPlaceHolder1_rdoGreet1_3" class="ui-button ui-widget ui-state-default ui-button-text-only ui-corner-right" aria-pressed="false" role="button" aria-disabled="false"><span class="ui-button-text">N/A</span></label></td>
</tr>
</tbody></table>
</div>
Why not just overriding the appropriate css? For example, http://jsfiddle.net/william/VBGUt/.
Related
I try to use in my project only flex-layout and avoid vanilla css. I cannot figure out how to center hohorizontally angular material stepper and get good view. I check margin: 0 auto; and it works properly. Here is my code:
<mat-vertical-stepper [linear]="true" #stepper fxLayoutAlign="center center" fxLayout="column">
<mat-step>
<form>
<ng-template matStepLabel>
Fill out ballot name
</ng-template>
<mat-form-field>
<input matInput placeholder="Ballot name">
</mat-form-field>
<div>
<button mat-flat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form fxLayout="column">
<ng-template matStepLabel>
Select start and end time
</ng-template>
<mat-form-field>
<input matInput [matDatepicker]="pickerStart" placeholder="Choose a start date">
<mat-datepicker-toggle matSuffix [for]="pickerStart"></mat-datepicker-toggle>
<mat-datepicker #pickerStart></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="pickerEnd" placeholder="Choose a end date">
<mat-datepicker-toggle matSuffix [for]="pickerEnd"></mat-datepicker-toggle>
<mat-datepicker #pickerEnd></mat-datepicker>
</mat-form-field>
<div fxLayoutGap="5px">
<button mat-flat-button matStepperPrevious>Back</button>
<button mat-flat-button matStepperNext>Next</button>
</div>
</form>
</mat-step>
<mat-step>
<form>
<ng-template matStepLabel>
Enter a description of ballot
</ng-template>
<mat-form-field>
<textarea matInput placeholder="Description"></textarea>
</mat-form-field>
<div fxLayoutGap="5px">
<button mat-flat-button matStepperPrevious>Back</button>
<button mat-flat-button (click)="stepper.reset()">Reset</button>
<button mat-flat-button>Confirm</button>
</div>
</form>
</mat-step>
</mat-vertical-stepper>
Screenshot of the problem:
Each step is a different width, so the result you see is expected. When you horizontally center vertically stacked elements, wider elements will appear outside narrower elements. What you want is to center the whole stepper, and leave the steps left aligned:
<div fxLayoutAlign="center center" fxLayout="column">
<mat-vertical-stepper [linear]="true" #stepper>
...
</mat-vertical-stepper>
</div>
StackBlitz
I'm implementing jquerymobile themes via themeroller shared. I have applied two swatches a and b buttons are blue but flip switch is orange.
How can I apply both themes in one page?
I have tried this:
<fieldset data-role="controlgroup">
<div class="ui-field-contain">
<label for="txtEmail" class="ui-hidden-accessible"></label>
<input name="txtEmail" id="txtEmail" placeholder="Email" value="" type="text" data-clear-btn="true" data-theme="a" />
</div>
<div class="ui-field-contain">
<label for="txtPassword" class="ui-hidden-accessible"></label>
<input name="txtPassword" id="txtPassword" placeholder="Password" value="" type="password" data-clear-btn="true" data-theme="a" />
</div>
<div class="containing-element" >
<label class="fliplabel" for="flipRemember">Remember me:</label>
<select id="flipRemember" name="flipRemember" data-role="slider" data-theme="b" >
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div class="ui-field-contain" class="fieldbutton">
<a id="btnSignin" data-theme="a" data-role="button" data-theme="a" href="javascript:void(0);">Sign In</a>
</div>
</fieldset>
What you've got there should work. You'll need to include the jquerymobile.js and jquerymobile.css, as well as your theme's css file. Aside from that, you can apply theme directly to parts of a page (either jquerymobile controls, or general page elements) by using the theme related css classes such as ui-body-b (shown here at the bottom of the page). I've put together a jsfiddle as well to give an example
HTML:
<input id="1" type="checkbox" checked="checked" />
<label for="1">Online</label>
jQuery:
$(function () {
$('input[type=checkbox]').button();
});
When rendered in the browser it is showing both a traditional checkbox and a button underneath. I can click on either one and they will toggle the checkbox. This is the HTML in the browser:
<input id="1" type="checkbox" checked="checked" class="ui-helper-hidden-accessible">
<label for="1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Online</span></label>
When I enter the same into jsfiddle it works perfectly, get just the toggle button. So I'm at a loss what is causing this?
Your jQuery selector is wrong. You need to add " to the type, like this:
$('input[type="checkbox"]').button();
This code:
<td>
<label>
<input type="checkbox">
</label>
</td>
yields this: , which is wide. I want only the check-box square part, like the check-boxes in this demo. Writing only <td><input type="checkbox"></td> creates simple check-box (not JQM style), since it's inside a table.
Does somebody has simple solution ?
first of all you will not be able to customize the by default developed HTML control. what I meant is just taking out the square portion from check box.
The link you share is doing it with the help of css classes and images.
Initially.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-on
ui-btn-up-c" data-theme="c" for="selectRow-2">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on">
</span>
</span>
</label>
Later on when you click the square with help of java-script they have just swapped classes.
<label class="ui-btn ui-btn-icon-left ui-btn-corner-all ui-checkbox-off ui-btn-up-d"
data-theme="d" for="selectRow-1">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">
</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">
</span>
</span>
</label>
The easiest way would be using some thing similar in your layout and swapping the classes with JS.
Putting radio buttons in a fieldset with data-role="controlgroup", jquery-mobile renders them like an inset list, but the legend is simply text. I would like the legend to look like the list dividers of a list view.
So instead of this:
I would like something like that:
You could put the radiogroup inside of a listview, and use the listdivider style for the title. To get to a result which is similar to what you demonstrated, you need to remove some padding, margins and borders.
See this example: http://jsfiddle.net/zdMhF/
The code:
<div data-role="page">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Choose a pet:</li>
<li style="padding:0;border:0;">
<div data-role="fieldcontain" style="margin:0;">
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
</div>
</li>
</ul>
</div>
</div>