By default jQuery Mobile transitions is set to "fade". I know i can add a transition to all links, but since I'm using the same transition "slide" for all pages is there a way that i don't have to data-transition="slide" to all links.
Insert this on your head tag:
<script>
$.mobile.defaultPageTransition = 'slide';
</script>
Related
I'm trying to dynamically add an external popup with a title and a footer, with jquery mobile, but the footer moves to the page instead of staying in the popup div ...
Is it a bug from a jquery mobile? How can I solve it?
var p=$("<div />").appendTo(document.body);
$("<div />").attr("data-role", "header").appendTo(p).html("<h1>title</h1>");
$("<div />").addClass("ui-content").text("content").appendTo(p);
$("<div />").attr("data-role", "footer").appendTo(p).html("<h1>footer</h1>");
p.enhanceWithin().popup({"positionTo":"window", "theme":"a"});
p.popup("open");
here is the fiddle http://jsfiddle.net/stax/y9Lsqmax/2/
By design, the footer is parented with the page, I strongly believe because it can accommodate a navbar or a similar navigation system, or may be eyternal, and moreover it can be positioned at the very bottom of the screen, by using position: fixed. So, IMHO, it is simply not meant to be placed inside a popup.
BUT: You can style a div inside the popup as it looks as footer. Of course, it won't support all the options documented here: jQuery Mobile Toolbar .
$(document).on("pagecreate", "#page1", function () {
var p = $('<div id="popup"/>').appendTo(document.body);
$('<div class="ui-header ui-bar-inherit"/>').html('<h4 class="ui-title">Title</h4>').appendTo(p);
$('<div class="ui-content"/>').text("content").appendTo(p);
$('<div class="ui-footer ui-bar-inherit"/>').html('<h4 class="ui-title">Popup footer</h4>').appendTo(p);
p.popup({"positionTo":"window", "theme":"a", "overlayTheme":"a"});
$("#popup").popup("open");
});
I have an element:
<td colspan="3" data-enhance="false">
<select id="CandidatesListBox" size="9" onchange="MoveToGeocode()" style="width: 100%" class="candidatesList" data-role="none"></select>
</td>
I want this element to have no jQuery Mobile styles. The problem is that I fill this item dynamically, and jQuery mobile will ignore all data-enhance="false" tags then adding dynamic elements through javascript. JQuery Mobile will also transform the control, so jQuery that would work on the item (.add(), for example) will not. I need to make a dynamic element with no jQuery mobile styles or elements. Is this possible?
Edit
I have also tried to disable all selects from using JQM, but get the same issue:
$(document).bind('mobileinit', function () {
$.mobile.keepNative = "select"; /* jQuery Mobile 1.4 and higher */
});
JQM adds styles and render them when you specify the JQM css file. Once it is called and unless you override the CSS by your own applying styles for a particular element cannot be stopped. Because JQM itself wrapps our elements with their elements. So as a solution get the element and remove additional class names added by JQM from the element. Also you will need to remove wrapping elements too.
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
According to the jQuery 1.1.0 Mobile documentation a button should be defined as a link.
Link button
This loads the referenced page.
When using the # it reloads the current page.
Action
How could we define a button that is not a link and simply triggers an event handler when an event on it occurs ?
Edit: my interpretation of what I saw was wrong. Clicking on a button with href="#" doesn't reload the page. I should delete the question because it doesn't make sense.
To my understanding the href="#" does not refresh the page, Example:
http://jsfiddle.net/XNLWS/
Here are the jQM Docs:
http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-types.html
If you're looking for a custom event, here is an example:
http://jsfiddle.net/XNLWS/1/
JS:
$( "#myButton" ).bind( "click", function(event, ui) {
alert('Custom action here');
});
HTML:
<div data-role="page" id="home">
<div data-role="content">
Link button
</div>
</div>
How to apply transitions effect on div when show/hide div using navigation bar in jquery mobile
Like this?
<a href="#div2" data-transition="fade">