Pagecontainer Widget

defaults 

Initialize the pagecontainer with the defaults option specified:

$( ".selector" ).pagecontainer({
  defaults: true
});

Get or set the defaults option, after initialization:

// Getter
var defaults = $( ".selector" ).pagecontainer( "option", "defaults" );
 
// Setter
$( ".selector" ).pagecontainer( "option", "defaults", true );

disabled 

Initialize the pagecontainer with the disabled option specified:

$( ".selector" ).pagecontainer({
  disabled: true
});

Get or set the disabled option, after initialization:

// Getter
var disabled = $( ".selector" ).pagecontainer( "option", "disabled" );
 
// Setter
$( ".selector" ).pagecontainer( "option", "disabled", true );

theme 

Initialize the pagecontainer with the theme option specified:

$( ".selector" ).pagecontainer({
  theme: "b"
});

Get or set the theme option, after initialization:

// Getter
var theme = $( ".selector" ).pagecontainer( "option", "theme" );
 
// Setter
$( ".selector" ).pagecontainer( "option", "theme", "b" );

beforehide( event, ui )Type: pagecontainerbeforehide

• event
  Type: Event
• ui
  Type: Object
  • nextPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.

$( ".selector" ).pagecontainer({
  beforehide: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerbeforehide", function( event, ui ) {} );

beforeload( event, ui )Type: pagecontainerbeforeload

• event
  Type: Event
• ui
  Type: Object
  • url
    Type: String
    The absolute or relative URL that was passed into load() by the caller.
  • absUrl
    Type: String
    The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.
  • dataUrl
    Type: String
    The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.
  • toPage
    Type: String
    A string containing the url being loaded
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.
  • deferred
    Type: Deferred
    Deferred to be resolved or rejected upon completion of content load. Callbacks that call preventDefault() on the event MUST call resolve() or reject() on this object so that change() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    $( document ).on( "pagecontainerbeforeload", function( event, data ) { // Let the framework know we're going to handle the load. event.preventDefault(); // ... load the document then insert it into the DOM ... // at some point, either in this callback, or through // some other async means, call resolve, passing in // the following args, plus a jQuery collection object // containing the DOM element for the page. data.deferred.resolve( data.absUrl, data.options, page ); });

    or rejected like this:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    $( document ).on( "pagecontainerbeforeload", function( event, data ) { // Let the framework know we're going to handle the load. event.preventDefault(); // ... load the document then insert it into the DOM ... // at some point, if the load fails, either in this // callback, or through some other async means, call // reject like this: data.deferred.reject( data.absUrl, data.options ); });

  • options
    Type: Object
    This object contains the options that were passed into load().

$( ".selector" ).pagecontainer({
  beforeload: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerbeforeload", function( event, ui ) {} );

beforeshow( event, ui )Type: pagecontainerbeforeshow

• event
  Type: Event
• ui
  Type: Object
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the source page DOM element.
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.

$( ".selector" ).pagecontainer({
  beforeshow: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerbeforeshow", function( event, ui ) {} );

beforetransition( event, ui )Type: pagecontainerbeforetransition

• event
  Type: Event
• ui
  Type: Object
  • absUrl
    Type: String
    The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.
  • options
    Type: Object
    The configuration options to be used for the current change() call.
  • originalHref
    Type: String
    The href from the link that started the page change process.
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.

$( ".selector" ).pagecontainer({
  beforetransition: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerbeforetransition", function( event, ui ) {} );

change( event, ui )Type: pagecontainerchange

• event
  Type: Event
• ui
  Type: Object
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the source page DOM element.
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.

$( ".selector" ).pagecontainer({
  change: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerchange", function( event, ui ) {} );

changefailed( event, ui )Type: pagecontainerchangefailed

• event
  Type: Event
• ui
  Type: Object
  • toPage
    Type: jQuery or String
    This property represents the page the caller wishes to make active. It may be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page, in which case the value exactly matches the first argument to the change() call that triggered the event.
  • options
    Type: Object
    The configuration options to be used for the current change() call.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.

$( ".selector" ).pagecontainer({
  changefailed: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerchangefailed", function( event, ui ) {} );

create( event, ui )Type: pagecontainercreate

• event
  Type: Event
• ui
  Type: Object

Note: The ui object is empty but included for consistency with other events.

$( ".selector" ).pagecontainer({
  create: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainercreate", function( event, ui ) {} );

hide( event, ui )Type: pagecontainerhide

$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {
  alert( "This page was just shown: " + ui.nextPage );
});

• event
  Type: Event
• ui
  Type: Object
  • nextPage
    Type: jQuery
    A jQuery collection object that contains the page DOM element to which we just transitioned.
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.

$( ".selector" ).pagecontainer({
  hide: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerhide", function( event, ui ) {} );

load( event, ui )Type: pagecontainerload

• event
  Type: Event
• ui
  Type: Object
  • url
    Type: String
    The absolute or relative URL that was passed into load() by the caller.
  • absUrl
    Type: String
    The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.
  • dataUrl
    Type: String
    The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.
  • options
    Type: Object
    This object contains the options that were passed into load().
  • xhr
    Type: XMLHttpRequest
    The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the 3rd argument to the framework's $.ajax() success callback.
  • textStatus
    Type: String
    According to the jQuery Core documentation, this will be a string describing the status. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback. It may also be null.
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element in a detached state.

$( ".selector" ).pagecontainer({
  load: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerload", function( event, ui ) {} );

loadfailed( event, ui )Type: pagecontainerloadfailed

• event
  Type: Event
• ui
  Type: Object
  • url
    Type: String
    The absolute or relative URL that was passed into load() by the caller.
  • absUrl
    Type: String
    The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.
  • dataUrl
    Type: String
    The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.
  • toPage
    Type: String
    A string containing the url the was attempted to be loaded.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.
  • deferred
    Type: Deferred
    Callbacks that call preventDefault() on the event, MUST call resolve() or reject() on this object so that change() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

    $( document ).on( "pageloadfailed", function( event, data ) { // Let the framework know we're going to handle things. event.preventDefault(); // ... attempt to load some other page ... // at some point, either in this callback, or through // some other async means, call resolve, passing in // the following args, plus a jQuery collection object // containing the DOM element for the page. data.deferred.resolve( data.absUrl, data.options, page ); });

    or rejected like this:

    1 2 3 4 5 6 7 8 9 10 11 12 13 14

    $( document ).on( "pageloadfailed", function( event, data ) { // Let the framework know we're going to handle things. event.preventDefault(); // ... attempt to load some other page ... // at some point, if the load fails, either in this // callback, or through some other async means, call // reject like this: data.deferred.reject( data.absUrl, data.options ); });

  • options
    Type: Object
    This object contains the options that were passed into load().
  • xhr
    Type: XMLHttpRequest
    The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the first argument to the framework's $.ajax() error callback.
  • textStatus
    Type: String
    According to the jQuery Core documentation, possible values for this property, aside from null, are "timeout", "error", "abort", and "parsererror". This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.
  • errorThrown
    Type: String or Object
    According to the jQuery Core documentation, this property may be an exception object if one occurred, or if an HTTP error occurred this will be set to the textual portion of the HTTP status. Otherwise it will be null. This is what gets passed as the 3rd argument to the framework's $.ajax() error callback.

$( ".selector" ).pagecontainer({
  loadfailed: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerloadfailed", function( event, ui ) {} );

remove( event, ui )Type: pagecontainerremove

• event
  Type: Event
• ui
  Type: Object
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • prevPage
    Type: jQuery
    The page about to be removed

$( ".selector" ).pagecontainer({
  remove: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainerremove", function( event, ui ) {} );

show( event, ui )Type: pagecontainershow

$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
  alert( "This page was just hidden: " + ui.prevPage );
});

• event
  Type: Event
• ui
  Type: Object
  • toPage
    Type: jQuery
    A jQuery collection object that contains the destination page DOM element.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.

$( ".selector" ).pagecontainer({
  show: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainershow", function( event, ui ) {} );

transition( event, ui )Type: pagecontainertransition

• event
  Type: Event
• ui
  Type: Object
  • absUrl
    Type: String
    The absolute version of the url of the destination page. If url was relative, it is resolved against the url used to load the current active page.
  • options
    Type: Object
    This object contains the options that were passed into load().
  • originalHref
    Type: String
    The href from the link that started the page change process.
  • toPage
    Type: jQuery
    This property represents the page to which the caller has transitioned. It is a jQuery collection object containing the page DOM element.
  • prevPage
    Type: jQuery
    A jQuery collection object that contains the from page DOM element.

$( ".selector" ).pagecontainer({
  transition: function( event, ui ) {}
});

$( ".selector" ).on( "pagecontainertransition", function( event, ui ) {} );