I wanna add flip switch at right side of header using jquery mobile. I tried this but it goes to next line.
<div data-role="header" >
<a href="#main-panel" class="ui-btn ui-btn-c ui-btn-corner-all ui-alt-icon ui-nodisc-icon ui-btn-icon-notext ui-icon-bars" ></a>
<h1>Flowers</h1>
<fieldset>
<div data-role="fieldcontain" class="">
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch" data-on-text="True" data-off-text="False">
</div>
</fieldset>
</div>
All you need to do is to place your flipswitch inside of a "control-group" element.
<fieldset data-role="controlgroup" data-type="horizontal" class="ui-btn-right">
<input type="checkbox" id="checkbox-based-flipswitch" data-role="flipswitch" data-on-text="True" data-off-text="False">
</fieldset>
Related
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 am working in Listview in jQuery Mobile dynamically. I can't make this design.
Code:
<li data-role="list-divider" role="heading">Category</li>
<li id="305"> <a href="#" class="achk">
<fieldset data-role="controlgroup" style="width:53px;">
<input type="checkbox" name="checkbox_attribute_0" id="checkbox_attribute_0" data-iconpos="notext" /> <label for="checkbox_attribute_0" action="selectAttribute" data="test"></label>
</fieldset>
<label onclick="viewMessage(305, 0);" class="lblImage" data-corners="false">
<fieldset data-role="controlgroup" style="height:0px !important">
<img alt="" src="img/letter.png" />
</fieldset>
</label>
<div onclick="viewMessage(305, 0);" >
<h4>Advanced-customization-Jquery-Mobile-Buttons </h4>
<p>Advanced-customization-Jquery-Mobile-Buttons</p><p>Date : November 15, 2013</p>
</div>
Delete
</a>
</li>
Here is the jsfiddle of the code I have done so far.
Add these lines in your function.
$("#inbox_list").trigger("create");
$("#inbox_list").listview("refresh");
Update Code
$('#dvCount').html(data.count);
//$('input[type=checkbox]').checkboxradio().trigger('create');
$('[data-role="listview"]').html( list ).trigger('create');
$('[data-role="listview"]').listview('refresh');
Hi can you please tell me how to hide and show a div in query mobile.
May be i have two solution use hide and show function.
Or use toggle class ?
here is my fiddle.
http://jsfiddle.net/ravi1989/3LEdJ/2/
I need to show or hide on click of "openclosebutton" .This div
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
<div class="ui-block-e">
close
</div>
</div>
The probem you have is the width of the text field. I suggest you to use a grid layout to achieve the desired effect:
<div class="ui-grid-c">
<div class="ui-block-a">
<input name="text-12" id="text-12" value="" type="text" class="textSearchvalue_h">
</div>
<div class="ui-block-b">
<a href="#" data-role="button" data-corners="false" data-inline="true" class="searchButtonClickText_h" >Search</a>
</div>
<div class="ui-block-c">
Next
</div>
<div class="ui-block-d">
Previous
</div>
</div>
See the documentation here.
I have one page and one pop up page i want to show pop up screen on clicking a button .I have header on both pop up screen and page but when i click the button the pop up is display but it css is not well as actual .
I am using jquery mobile .
Here is my fiddle
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
<a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" >Add</a>
Edit
</div>
</div>
</div>
</div-->
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
</div>
</div>
<!-- Page two Case Information Screen-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
<div data-role="header" data-theme="d" data-position="fixed">
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
Here's a demo : http://jsfiddle.net/hungerpain/HesVd/3/
What I've changed in your demo
I changed your HTML structure a lil bit :
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content"></div>
</div>
<div data-role="popup" id="CaseInformationScreen"></div>
| |
| |
\ /
\ /
\ /
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content">
<div data-role="popup" id="CaseInformationScreen"></div>
</div>
</div>
The reason is because popup has to lie inside page. Only then will the styling remain.
I removed the code you'd put for popup to fire and added it inline in the HTML like this:
Add
Note that I've added only the changed attributes. The rest of the attributes are in demo.
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.