I've used the solution here http://jsfiddle.net/KADqA/23/ to add an image to a jquery mobile checkbox, and it works fine, but now the label text is out of alignment with the checkbox images (too high) and I can't figure out how to center it with css.
Here's a portion of the code to generate the html
<input type=checkbox id=chk" + ingindex + " class='chk chk" + ingindex + "' name=chk" + ingindex + "><label for=chk" + ingindex + ">" + item + "<a href='#' data-rel='dialog' ><img class=recimg src='http://webrecipemanager.com/images/recipe/" + image + "' alt='" + name + "'></a></label>
This is the generated html from firebug
<div id="div0" class="drag inaisle ui-draggable" name="div0">draggable=Object {
element={...}, options={...}, started=
false
, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}
<div class="ui-checkbox">
<input id="chk0" class="chk chk0" type="checkbox" name="chk0">checkboxradio=Object { element={...}, options={...}, label={...}, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmousedown=
true
, vclick=
true
}
<label class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-btn-up-i" for="chk0" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="i">corners=
true
shadow=
false
iconshadow=
true
wrapperEls=
"span"
icon=
"checkbox-off"
theme=
"i"
buttonElements=Object { bcls=
"ui-btn ui-btn-up-i ui-b...er-all ui-btn-icon-left"
, outer=label.ui-btn, inner=span.ui-btn-inner, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmouseover=
true
, vclick=
true
}
</div>
<input id="item0" type="hidden" value="1/2 c Baking Cocoa" name="item0">
<input id="ing0" type="hidden" value="Baking Cocoa" name="ing0">
</div>
you can use Firebug or another developer tool to examine the CSS to manipulate...
see the docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.
In your case add the following
<style>
.ui-mobile a img, .ui-mobile fieldset {
vertical-align: middle;
}
</style>
see modified jsfiddle and the complete code of the working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style>
.ui-mobile a img, .ui-mobile fieldset {
vertical-align: middle;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" ><img src="http://dummyimages.com/25x25" /></a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
<script>
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
</script>
</body>
</html>
screenshot:
Related
I am trying to add javascript from partial view to layout.cshtml head section by calling
#RenderSection("scripts", required: false) but failing. Please view my partialview page code.
#{
Layout = null;
}
<div id="modal-login" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-dialog-buttons ui-draggable ui-resizable" title="Insert Student">
#using (Html.BeginForm("Login", "Home", FormMethod.Post, new { id = "form-login" }))
{
<div style="width:320px; height:320px; padding:0px 15px 15px 15px; border:solid 1px silver">
<div style="width:310px; height:30px; padding-bottom:0px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<div id="loading" style="height:15px; width:120px">
</div>
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbEmailAddress" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:310px; height:30px; padding-bottom:35px; border:solid 0px red">
<div style="width:320px; height:30px; float:left;">
<input type="text" class="textbox" id="tbPassword" typeof="password" name="tbFirstName" size="50" placeholder="First Name" />
</div>
</div>
<div style="width:320px; height:20px; padding-top:5px; padding-bottom:15px; border:solid 0px red; font-size:9px;">
<div style="width:310px; height:30px; float:left;">
<input id="btnLogin" class="submit ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="submit" value="Submit" style="border:1px solid gray; width:80px; height:25px ">
</div>
<div style="width:140px; height:30px; float:left;">
</div>
</div>
</div>
}
</div>
#section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#modal-login").dialog({
show: "slide",
modal: true,
autoOpen: false,
});
$("#btnLogin").click(function () {
$("#modal-login").dialog("open");
return false;
});
});
</script>
}
And below is layout.chtml head section where iam calling #RenderSection("scripts", required: false) in the second last line of code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/jquery")
#*#Scripts.Render("~/bundles/jqueryui")*#
<link href="~/Content/themes/base/jquery-ui-1.10.4.custom.css" rel="stylesheet" />
#*<script src="~/Scripts/jquery-1.10.2.js"></script>*#
<script src="~/Scripts/jquery-ui-1.10.4.custom.js"></script>
#RenderSection("scripts", required: false)
</head>
Please view my code and suggest if i missed anything? thanks.
the order #section scripts don't work in partialView, erase that and your script work.
but why you try to put the script in the head??
You call JQuery in the head the Script in the partial view works isn't necesary up in the head.
But if I understand your code you make a login form in a partial View for insert in the layout for use in entire web site?
well is more easy if you write the script directly in the head in layout, but better is create a script file with all custom script, mix this with the others scripts in one bundle and finally call this bundle in the head, with this way your site will more faster.
Iam having code with two dialogs one from another, while going back from second dialog to first i have given data-transition as slide but it is not working. Can someone help me please thanks.
Here is the code
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale="1"">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://dev.jtsage.com/cdn/simpledialog/latest/jquery.mobile.simpledialog2.min.js"></script>
<style>
.ui-simpledialog-screen-modal{
opacity: 0.4;
}
.ui-simpledialog-container {
border: 1px solid rgb(221, 221, 221) !important;
}
.ui-grid-a > div {
padding: 2px;
}
</style>
<script>
$(document).on("pagecreate", "#page1", function () {
$(document).on('click', '#openPopup', function() {
$('#inlinecontent').simpledialog2({
mode: "blank",
headerText: "Select Item(s)",
headerClose: false,
blankContent: true,
themeDialog: 'a',
width: '75%',
zindex: 1000
});
});
$(document).on('click', '#dialogSubmit', function() {
var numChecked = $('#cBoxes').find('[type=checkbox]:checked').length;
if (numChecked > 0){
$(document).trigger('simpledialog', {'method':'close'});
} else {
$('<div>').simpledialog2({
mode: 'blank',
headerText: 'Warning',
headerClose: true,
transition: 'flip',
themeDialog: 'b',
zindex: 2000,
blankContent :
"<div style='padding: 15px;'><p>Please select at least one checkbox first.</p>"+
// NOTE: the use of rel="close" causes this button to close the dialog.
"<a rel='close' data-role='button' href='#'>OK</a></div>"
});
}
});
});
</script>
</head>
<body>
<!-- the page markup -->
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
<h1>SimpleDialog2 Chained Popup</h1>
</div>
<div class="ui-content" role="main">
<!-- button that opens the popup -->
<button id="openPopup">Select One or More Item(s)...</button>
</div>
</div>
<!-- the popup markup -->
<div id="inlinecontent" style="display:none" >
<div style="padding: 15px;">
<fieldset id="cBoxes" data-role="controlgroup" >
<legend>Favorite Fruit:</legend>
<input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a" />
<label for="checkbox-v-2a">Apple</label>
<input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b" />
<label for="checkbox-v-2b">Banana</label>
<input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c" />
<label for="checkbox-v-2c">Orange</label>
</fieldset>
<div class="ui-grid-a">
<div class="ui-block-a"><button id="dialogSubmit" data-theme="b">OK</button></div>
<div class="ui-block-b"><button id="dialogCancel" rel='close'>Cancel</button></div>
</div>
</div>
</div>
</body>
</html>
I have the following code snippet for a login home page. I want it to be responsive. how do I make it responsive using jQuery mobile?
Does jqm provide any default css for it?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<link rel="stylesheet" href="./css/custom.css">
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="content">
<img src="./imgs/abc.jpg">
<div class="ui-grid-a">
<div class="ui-block-a"><img src="./imgs/home.jpg">
</div>
<div class="ui-block-b">
<form id="HLogin" method="POST">
<div data-role="fieldcontain">
<label for="url">Username:*</label>
<input class="required" id="Lusername" name="uid_r" type="text" value="">
</div>
<div data-role="fieldcontain">
<label for="url">Password:*</label>
<input id="Lpassword" name="pwd_r" type="password" value="">
</div>
<button data-theme="b" type="submit">Login</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
custom.css:
.ui-block-a {
width:70% !important;
}
.ui-block-b {
width:30% !important;
}
Here you can add your css according screen and add min-width, which you want.
#media screen and (min-width: 320px) {
.ui-block-a {
width:0% !important;
}
.ui-block-b {
width:100% !important;
}
}
#media screen and (min-width: 620px) {
.ui-block-a {
width:70% !important;
}
.ui-block-b {
width:30% !important;
}
}
I am building a phonegap app for Android using jquery mobile and having some
trouble with fixed footers.
Please see the HTML code below.
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js">
</script>
<script type="text/javascript" src="js/jquery-1.7.min.js">
</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<script src="js/jquery.mobile-1.1.1.min.js"> </script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Test</h1>
</div><!-- /header -->
<div data-role="content">
<form id="searchform" action="" method="post" onsubmit="return false;"
data-ajax="false">
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
<label for="city" class="select">City</label>
<select name="city" class="city"></select>
</form>
<script type="text/javascript">
$('.city').each(function() {
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
$(this).append("<option>Nagpur</option>");
});
</script>
</div><!-- /content -->
<div data-role="footer" data-position="fixed"
data-tap-toggle="false">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#help" data-icon="info"
data-transition="none">Help</a></li>
<li><a href="#help" data-icon="star"
data-transition="none" >Favorites</a></li>
<li><a href="#help" data-icon="arrow-r"
data-transition="none" >Results</a></li>
</ul>
</div>
</div>
</div><!-- /page -->
<div data-role="page" id="help">
<div data-role="header" data-position="fixed"
data-tap-toggle="false">
<h1>Help</h1>
</div><!-- /header -->
</div>
</div>
</body>
</html>
There is a long form containing several fields including checkboxes, radio buttons, select lists etc. (using repeated select lists here to simulate). There is a fixed footer at the bottom. Things work fine on desktop browsers. But when I test on my phone having Android 2.3 I observe strange behaviour. Assuming the footer is hiding the select list underneath , if I click on any of the tabs on the navbar, the select list pops up whereas I would expect a transition to a new page. This is as if the select list is getting the click event instead of the footer. This is very annoying to the user. I have searched google but haven't seen this problem reported elsewhere.
Updated the solution yet again.
/* HACK: when clicked on navbar the select list underneath pops up
for some reason. So we just hide all content as soon as
we click on navbar and then show it whenever we load new page*/
$(document).bind('pagechange', function(e, data) {
$('[data-role="content"]').show();
});
$(document).bind('tap', function(e) {
if($("body").data("hold-flag") == true) {
$("body").data('hold-flag', false);
return;
}
if($(e.target).closest("[class='ui-btn-inner']").length > 0 ||
$(e.target).closest("[class~='ui-btn-right']").length > 0 ||
$(e.target).closest("[class~='ui-btn-left']").length > 0) {
$('[data-role="content"]').hide();
}
});
$(document).bind('taphold', function(e) {
/* set a flag to mark this as a taphold event */
/* BIG assumption: a 'tap' event is always fired after a
taphold event */
$("body").data('hold-flag', true);
e.preventDefault();
return false;
});
I found a workaround. I added following code. Essentially I am testing whether there has been click in the footer area. If yes then I simply hide the contents of the page. This seems to stop the annoying pop-up select list. Of course the hidden page contents must be restored after page transition is complete. I am not sure how portable and/or robust this code is. Would appreciate comments from experienced developers.
$(document).bind('pagechange', function(e, data) {
$('[data-role="content"]').show();
});
$(document).bind('tap', function(e) {
/* find the footer for this page*/
var footer = $(e.target).
closest('[data-role="page"]').
find('[data-role="footer"]');
var offset = footer.offset();
var scroll = e.pageY - e.clientY;
var pos = offset.top - scroll;
if(e.clientY > pos) {
//click in footer area
$('[data-role="content"]').hide();
}
});
Simplified 'tap' event handler. This also handles clicks in header area now.
$(document).bind('tap', function(e) {
if($(e.target).closest("[data-role='footer']").length > 0 ||
$(e.target).closest("[data-role='header']").length > 0) {
$('[data-role="content"]').hide();
}
});
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>