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
Related
I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.
can you please tell me how to make different label with different colour ?
It will change all label with red colour.
http://jsfiddle.net/GZaqz/4/
<div data-role="page" id="FirstPage" data-position="fixed" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<label class="labelClass" id="openSubmenu">Move to Second Page:</label>
</div>
<div data-role="content">
<div >
<a data-role="button" class="custom-btn" data-corners="false" id="test">Level 5</a>
<a data-role="button" class="custom-btn">Level 5</a>
</div>
<div >
<label class="caseName_h">user name</label>
</div>
<div data-role="fieldcontain" class="">
<label data-role="none" for="name" class="test1">Phoneyy</label>
<input style="width: 280px;" data-role="none" type="text" name="basic" value="" />
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="basic">Phone</label>
<input style="width: 280px;" data-role="none" type="text" name="name" id="basic" value="" />
</div>
</div>
</div>
Usually JQM use the attribute data-theme to assign a color to a form or whatever..
Actually I don't remember if there is same attribute for labels.
you probably want to have a look here: Theme JQM and here: Content Theme JQM
I have a control group of buttons that looks like this:
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
I'd like for the label to look like the rest of the labels in my form. As you can see, the label is not inline with the control group as it is with other controls:
How do I wrap a control group in a field container and have the label appear inline? Is it possible? I didn't see any examples of this on the jqmobile site.
The entire markup for the form is:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-native-1">Metric</label>
<select name="select-native-1" id="select-native-1">
<asp:Repeater ID="ui_metrics" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
<div data-role="fieldcontain">
<label for="select-native-1">Interval</label>
<select name="select-native-1" id="select1">
<asp:Repeater ID="ui_interval" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
</div>
<div data-role="fieldcontain">
<label for="datetime-4">Start Date</label>
<input type="datetime-local" name="datetime-4" id="datetime-4" value="" />
</div>
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="range-7a">Index:</label>
<input type="range" name="range-7a" id="range-7a" min="0" max="100" value="0" />
<label for="range-7b">Index:</label>
<input type="range" name="range-7b" id="range-7b" min="0" max="100" value="100" />
</div>
</div>
</div>
</div>
Solution
Working example: http://jsfiddle.net/Gajotres/PMrDn/64/
HTML:
<div data-role="fieldcontain" id="custom-fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
CSS:
#media all and (min-width: 28em){
#custom-fieldcontain label {
width: 22% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] {
width: 78% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls {
width: 100% !important;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls a {
width: 24.5% !important;
}
}
Info
Working example was made using your HTML. Media queries are used directly from jQuery Mobile css file. Rest of CSS is a label fix / content fix.
Here an example without customizing the fieldcontainer...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Ahead</legend>
<input type="radio" name="radio1" id="hour" checked="checked">
<label for="hour">Hour</label>
<input type="radio" name="radio1" id="day">
<label for="day">Day</label>
<input type="radio" name="radio1" id="week">
<label for="week">Week</label>
<input type="radio" name="radio1" id="month">
<label for="month">Month</label>
</fieldset>
</div>
They dont stand in the same line because div with controlgroup is a block element. You could use one of the two solutions which I've used before :
Solution 1 : Using CSS to achieve the inline look
Solution
Just add a display: inline property to the control group, you're good to go.
[data-role=controlgroup] {
padding-left : 2em;
display: inline;
}
Note
The CSS selector I've used is just an indicator. Try using ID for the control group you want to change. Also, make sure that the custom style you are adding is loaded after jQM's style. To adjust the seperation between label and buttons, change the padding-left to your hearts' content.
Solution 2: Using grids to set up the layout
Grids provide a good way to arrange elements in jQM. A typical grid layoud would look like this :
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->
This is a typical 2-column layout, which we'd use here as well. So here's how your layout must look like :
<div data-role="fieldcontain">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:20%">
<label>Ahead</label>
</div>
<div class="ui-block-b" style="width:70%">
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
</div>
</div>
Note
You could adjust the width of the ui-block-* elements to any size you need by changing the width property in the HTML tag.
A consolidated Demo
http://jsfiddle.net/bGjZ8/2/
I am developing a mobile application with jQuery mobile and backbone. I have backbone model change event function, if any changes in the model, I simply destroy the whole page and recreate with template binding. i use $('#pageId').page('destroy').page(); which works fine.
I want to do the samething for dialog (just destory the dialog and recreate the dialog and display it). Can you anyone tell me the right method to call.... I just tried with .dialog() but i didn't work.. thanks in advance.
my dialog code.
<div data-role="dialog" id="myDialog" data-close-btn="right">
<div data-role="header" class="ui-corner-top">
<h1>dialog</h1>
</div>
<div data-role="content">
<form id="myForm">
<fieldset>
<label for="fromDate">Date From</label>
<input id="fromDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<fieldset>
<label for="toDate">Date To</label>
<input id="toDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<input type="submit" value="submit" id="btnSubmit" data-inline="true" />
</form>
</div>
</div>
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.