I'm developing a mobile app using PhoneGap & jQuery Mobile. I'd like to keep my view files DRY. How do I achieve this in jQuery Mobile? Should I just put every page element in one HTML file?
Exactly, jQuery mobile is designed for that and I is the best approach to be followed.
you can have something like that:
<html>
<head>
<script src="jquerymobilelibrary.js"/>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput2">Title</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<a data-role="button" href="#page2">Button</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<!-- Content is empty -->
</div>
</div>
</body>
</html>
To switch between pages programmatically in JS you can use
<script>
$.mobile.changePage('#page2')
</script>
In jquery mobile site there is a simple but cool drag-and-drop UI builder to explore what the JQM library can do.
Hope it helps!
Related
I'm using jQuery Mobile and no matter how much content is on the page there is always a scrollbar that appears to the right. Even turning on overflow-hidden doesn't make it go away. The page has nothing but a header, a link, and a panel. How can it be removed?
The HTML is roughly as follows:
<body>
<!-- Document framework -->
<div data-role="page">
<div data-role="panel" id="toolmenu" data-theme="a">
<form>
<fieldset data-role="controlgroup">
<legend>Select Tool:</legend>
<input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
<label for="radio-choice-v-2a">One</label>
<input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
<label for="radio-choice-v-2b">Two</label>
<input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
<label for="radio-choice-v-2c">Three</label>
</fieldset>
</form>
</div>
<div data-role="header">
<h1>TITLE</h1>
</div>
<div data-role="content">
Stuff<br />
Open panel link
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
Thanks.
I solved the problem. The issue was that I had the css files in the wrong order. When you are using a custom theme with jquery mobile, you have to have the css files in a particular order--namely, your themeroller-created custom theme has to come BEFORE the jquery mobile css, and you have to use jquery.mobile.structure-1.4.2.min.css (or the equivalent for whatever version you are using anyway), not the full css file.
For app based on AngularJS, JQuery Mobile and JQuery Mobile Angular Adapter.
When i set ng-controller on tag with data-role="page", ng-model on select tag works perfectly:
<body ng-app>
<div data-role="page" id="product" ng-controller="Controller">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print()">print</button>
http://jsfiddle.net/ilya7u/Ddt7G/
When ng-controller present in body tag, variable associated with select tag through ng-model remains unchanged:
<body ng-app ng-controller="Controller">
<div data-role="page" id="product">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
http://jsfiddle.net/ilya7u/qgbj2/
Why and how i can fix it? I want to use one controller in app with many pages!
including the ng-app in the html of your page will solve the problem
try
<html ng-app="myModule">
<body ng-controller="Controller">
<div id="product" >
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print()">print</button>
</div>
</div>
</body>
</html>
and change the controller to
var myApp = angular.module('myModule',[]);
myApp.controller('Controller', function($scope) {
$scope.colors = ['red', 'black', 'white'];
$scope.color = $scope.colors[0];
$scope.Print = function () {
alert($scope.color);
};
});
updated fiddle here http://jsfiddle.net/qgbj2/2/
So it looks like there are really two scopes here. The page has its own scope, but the Print is in the parent scope. I've updated the fiddle to show that the color does indeed change, but the $scope.color in Print does not: http://jsfiddle.net/qgbj2/6/
To remedy this particular situation, I would pass in the color to Print from the DOM:
<body ng-app ng-controller="Controller">
<div data-role="page" id="product">
<div data-role="content">
<select ng-model="color" ng-options="c for c in colors"></select>
<button ng-click="Print(color)">print</button>
</div>
</div>
</body>
A general solution for this multiple scope situation does not occur to me at the moment.
I'm working with jQueryMobile and I want to use a form to input some values in a database.
I have a form which works and uses the test123.php to submit data to a database this:
<form method="get" action="test123.php?test=1">
<input type="submit" value="spiegel" />
</form>
I get a button, but the new page is shown as a normal page.
With this solution:
<a data-role="button" data-rel="dialog" href="#test">
spiegel
</a>
I get a dialog with the same output (i get the message "spiegel").
But I want the confirmation site to appear as a dialog.
A link with data-rel"dialog" so i want to use my php site but i want to look it like a dialog after i submitted my data do a database. I'm not sure how to do this.
Thank you for your help
<!DOCTYPE html>
<html>
<head>
<!--add all your jquery,jquery mobile as well as its CSS refrences here-->
</head>
<body>
<div data-role = "page">
<div data-role="header">
opendialogpage
</div>
<div data-role="content">
<p>just for sample display</p></div>
</div>
<div data-role="dialog" id="login">
<div data-role="header" data-theme="e"></div>
<div data-role="content">
<form id="login_form">
<fieldset>
<div data-role="fieldcontain">
<label>USER NAME:</label>
<input type="text" id="name" value=""/>
</div>
<div data-role="fieldcontain">
<label>EMAIL ID:</label>
<input type="text" id="email" value=""/></div>
</fieldset>
</form>
</div>
</div>
</body>
Okay, so you want data from your PHP page to open in the dialog and not in the next page.
What your looking for is AJAX.
AJAX allows you to refresh and change part of your HTML page without changing the entire page.
$.ajax({
url: 'test123.php',
type: 'POST',
data: {spiegel : 'spiegel'}
error : function (){ document.title='error'; },
success: function (data) {
$('#ajax_content').html(data);
}
});
So this function will return into variable data whatever was generated by test123.php
Link to Docs: http://api.jquery.com/jQuery.ajax/
I struggled with this too for a while. Finally took a look at the html that jquery mobile creates for a dialog page. Just create a page with the structure below, and it will always open as a dialog page (as though it had been opened from a link with data-rel="dialog").
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!-- include your css, jquery, and jquery mobile files here -->
</head>
<body>
<div data-role="dialog">
<div data-role="content">
<!-- content goes here -->
</div><!-- /content -->
</div><!-- /dialog -->
</body>
</html>
All you are doing is changing data-role="page" to data-role="dialog".
I have an application in which i'm using jquery-mobile which has a header and it has 2 buttons "home" and "back" and when i click on back button it should terminate the page and should go back but this is not happening. Can anyone please help me how to make this possible with jquery mobile back button.
My code:
<div id="home" data-role="page">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<a id="backBtn" href="#" data-icon="arrow-l">Back</a>
<h1>SDCard Explorer</h1>
<a id="homeBtn" href="index.html" data-icon="home" data-transition="pop">Home</a>
</div>
</div>
And here are the jquery libraries which i used:
<href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<src="jquery.mobile-1.0.1.min.js" />
<src="http://code.jquery.com/jquery-1.7.1.min.js" />
Hi you can try this:
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<!--here links to the jQuery Mobile Library -->
</head>
<body>
<div id="Page" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
Back
<h1>Tite</h1>
</div>
</div>
</body>
</html>
here the function in the JS File
function GoBack(){
history.go(-1);
}
it should work in the art
I am opening a page as a dialog. This dialog does not style the checkbox correctly.
Tried using checkboxradio("create"); but no joy.
How do I get the checkbox to style correctly in the Dialog box??
Here's a jsFiddle with the code.
You need to put the checkbox in a div with the proper markup
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Agree to the terms:</legend>
<input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" />
<label for="checkbox-1">I agree</label>
</fieldset>
</div>
Example: http://jsfiddle.net/shanabus/8xMX2/12/
Based on the example in the docs here: http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-checkboxes.html
I think you'll have to put the checkbox inside of a form tag in order to get jQuery Mobile to style it.
Looks like this might be a bug. Adding the <form> tag works but you also had create but needed refresh for the checkboxradio():
http://jsfiddle.net/8xMX2/11/
JS
$('#page2').live('pageshow', function(){
$("input[type='checkbox']").checkboxradio("refresh");
});
HTML
<div data-role="page">
<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
Open as Dialog
</div>
</div>
<div id="page2" data-role="page">
<div data-role="header">
Back
<h1>Page Two</h1>
</div>
<div data-role="content">
<form>
This is a dialog Box.
JQM seems to be not styling the below checkbox.<br>
<input type="checkbox" name="cb1" id="cb1" />
<label for="cb1">A Checkbox</label>
<br>
A button is styled well.<br>
Just a Button
</form>
</div>
</div>