I'm trying to use panel on each different HTML pages.
And I got this sample panel JS code on JQM website.
/* panel */
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
The problem is if I want to put panel on each different HTML pages, How do I have to set the page ID ?
For example, I have HTML pages such as.....
main.html page ID is "#pageMain" , about.html page ID is "#pageAbout", and gallery.html page ID is "#gallery"
How do I have to fix JS code ? Please help~
The code you have is for adding the ability to open panels via swipe gestures. It won't add the panel into the DOM alongside your page content. To do that you'll need to adapt the following code.
/* Creates the functionality to open the left side panel with a swipe */
$(document).one("pagebeforecreate", function () {
$.get('left-panel.html', function(data){
//$(data).prependTo($.mobile.pageContainer); //or .prependTo("body");
$.mobile.pageContainer.prepend(data);
$("[data-role=panel]").panel().enhanceWithin(); // initialize panel
}, "html");
Related
In ios7 safari apple introduced swiping navigation - swipe to the right sends windows.history.back() event and redirects to a previous page like user touched the back button.
In my app I am using right swipe to show left panel and I am using this code:(JQM 1.4.3 stable)
<script>
$( document ).on( "pageinit", ".ui-page", function() {
$( document ).on( "swiperight", ".ui-page", function( e ) {
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swiperight" ) {
$( ".panel" ).panel( "open" );
}
}
});
});
</script>
But instead of showing the panel safari rather uses it's default behaviour and loads the previous page. How to override this behaviour and show left panel?
In my Jquery Mobile app, I would to override the browser or phone back button (that is available on Android devices).
On the page #welcome-page only, and only if the previous-page id is #signin-page, I would like the back button to skip the #signin-page (not even callthe associated js) and go to #explanation-page.
Can you help me achieve this ?
For now I did the following but it messes everything up, because it seems to load #signin-page.
$(document).on('pagebeforeshow', '#welcome-page', function(event, docdata){ //jqm 1.4
console.log('previous page was ' +docdata.prevPage.attr('id'));
if ( docdata.prevPage.attr('id') == 'signin-page') {
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
event.preventDefault();
console.log('back button pressed');
//$( "body" ).pagecontainer( "change", "#explanation-short", { transition: "fade" });
}
$(window).off("navigate");
});
}
});
I have this 2 pages in jquery mobile:
Home - http://snipt.org/zixj3
Inner - http://snipt.org/ziya9
you can see the live here: www.leoferrari.com/congresso1/
I use:
$( document ).on( "pageinit", ".jqm-demos", function() {
$("#menu").load('menu.html', function() {
$(this).trigger("create");
});
$("#footer").load('footer.html', function() {
$(this).trigger("create");
});
});
to load menu and footer, but when i click to go to the inner page the footer and menu dont load, if a reload the page the footer and menu load normally
I am using jquery mobile and I need to prevent swipe event over specific element. Need of doing this is because I am using slider and I don't want the swipe event to be invoked resp. I want it to be prevented when user is manipulating with slider. I was not able to too find any solution so I am asking for help here.
This is my javascript code:
$( document ).on( "pageinit", "#demo-page", function() {
$( document ).on( "swipeleft swiperight", "#demo-page", function( e ) {
// We check if there is no open panel on the page because otherwise
// a swipe to close the left panel would also open the right panel (and v.v.).
// We do this by checking the data that the framework stores on the page element (panel: open).
if ( $.mobile.activePage.jqmData( "panel" ) !== "open" ) {
if ( e.type === "swipeleft" ) {
$( "#right-panel" ).panel( "open" );
} else if ( e.type === "swiperight" ) {
$( "#left-panel" ).panel( "open" );
}
}
});
});
Thank you.
You need to use both, stopPropagation(); and preventDefault();.
As for the .selector, it can be a tag and #ID or .class, e.g. [data-role=page]#PageID , div.ui-content...etc
$(document).on('swipeleft swiperight', '.selector', function(event) {
event.stopPropagation();
event.preventDefault();
});
Reference: stopPropagation();
Reference: preventDefault();
Working example
If I load a JQuery UI Dialog without loading external content, the dialog can be closed with the "Close" button and the dialog can be re-opened multiple times. If I load content in, neither of these two capabilities works. Code below. Any hints?? Thanks in advance!!
$(document).ready(function() {
$('#viewdonationsdialog').dialog({
autoOpen:false,
modal:'true',
width:600,
height:400,
buttons: {
Close: function() {
$( this ).dialog( "close" );
}
}
});
$('#viewdonationslink').click(openDonationsDialog);
});
var openDonationsDialog = function(){
/* Including the next line causes failure.
Removing it results in success (except, of course, that my page content isn't loaded!! */
$('#viewdonationsdialog').load('/donationsdata');
/* And then there's the rest... */
$('#viewdonationsdialog').dialog('open');
return false;
};