Archives

Archives / 2011 / August
  • Adding jQuery Mobile controls programmatically

    Adding a new jQuery Mobile control can't be appended directly to the page. Every control with jQuery mobile has its own style that is loaded at create event which belongs to the control itself.

    By appending the controls directly, create event page will not be fired, so we need to execute it.

    Here you can find a full example that illustrates how to add a button to jQuery page.

     

    <!DOCTYPE html>

    <html>

    <head>

        <title>Load Control Dynamically</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

        <script>

            $('#addNewButton').live('click'function () {

                $('#Container').append($('<input id="Button1" type="button" value="Custom button" />'));

                $('#Container').trigger('create');

     

            });

           

        </script>

    </head>

    <body>

        <div id="page1" data-role="page" data-theme="b">

            <div data-role="header">

                <h1>

                    Add New button

                </h1>

            </div>

            <div data-role="content">

                <a data-role="button" id="addNewButton">Add New button</a>

                <div id="Container" />

            </div>

        </div>

    </body>

    </html>

     

     

    In the above example jQuery trigger event is used, which executes create event that is related to the button. In this event jQuery Mobile framework implements the custom theme by adding the formatted divider which implements .fn.buttonMarkup jQuery Mobile plug-in. In addition, this event adds hidden input during submit.

    Here you can find how the button rendered with and without create event:

     

    Without using creat event:

     

    With using creat event

     

     

    Practice: Build User Control

     

    Regarding to this point, I will create a practical example. In this example I built a navigation bar user control. If you have many pages with the same bar or any common HTML codes, then you can build your HTML user control in a separate file so you can call it from any page.

    Here is the HTML file that contains the navigation bar:

     

    UserCotrolToolBar.html

    <div data-role="navbar">
        <ul>
            <li><a href="one.html" class="ui-btn-active">One</a></li>
            <li><a href="two.html">Two</a></li>
        </ul>
    </div>

     

    Then we can call it from the page as the following :

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
        <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
        <script type="text/javascript">
            var url = 'UserCotrolToolBar.html';
            $(document).ready(function () {
                $.get(url, function (retData) {
                    $('#Customfooter').append(retData);
                    $('#Customfooter').trigger('create');
                });
            });
        </script>
    </head>
    <body>
        <div id="page1" data-role="page">
            <div data-role="content">
                <a href="Page2.html">Link</a>
            </div>
            
            <div id='Customfooter' data-role="footer">
            </div>
        </div>
    </body>
    </html>

     

     

    Summary:

    In this topic, I show you how to add jQuery mobile controls programmatically by using jQuery append then trigger create event.

  • jQuery Mobile : Page pre-fetch

     The latest release of jQuery Mobile beta 2 is characterized by a new added feature. This feature is called Page pre-fetch, which finds the links of the active pages and makes a lazy load for these pages into the DOM beyond the scene before the user clicks on it.

    With this feature we don't need to add all pages on the same HTML documents. In the previous releases, this feature works automatically when the user adds the pages with the same file.

    Let's start with a simple example to illustrate how it works.

    The first page is:

    Page1.html

    <!DOCTYPE html >

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />

    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>

    </head>

    <body>

        <div id="page1" data-role="page">

            <div data-role="content">

                <a href="Page2.html" data-prefetch>Link</a>

            </div>

        </div>

    </body>

    </html>

     

    And the second page is:

    Page2.html

     <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body>
        <div id="page2" data-role="page">
            <div data-role=" content">
                This is page 2 loaded in the DOM by Page pre-fetch option
            </div>
        </div>
    </body>
    </html>

     

    Notice that the anchor of the first page has a data-prefetch option. Try to open "page1"; the DOM would be like this:

     


    Here you can find that "page1" is active and the html of "page2" is added to the DOM, even though it is in separate HTML documents and it is not called before.

    According to this feature, after clicking on the link "Page2" it will be displayed immediately without the Ajax loader.

    Note: But it's so important to use this option only with highly likely that the link will be visited by users due to Pre-fetching increased bandwidth by using additional HTTP requests.

     

     

    Add pre-fetch option programmatically:

     

    In this case we can use $.mobile.loadPage method. This method loads the external page into DOM without any visual effect on the current active page.

    Example:

    <!DOCTYPE html >
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
    <script type="text/javascript">   
            $(window).load(function () {
               $.mobile.loadPage("Page2.html");      
        });
    </script>
    </head>
    <body>
        <div id="page1" data-role="page">  
            <div data-role="content">
                <a href="Page2.html" >Link</a>
            </div>
          
        </div>
    </body>
    </html>
     
     
     

    $.mobile.loadPage method is the core of this feature which used by jQuery framework, here you can find how it works and how it finds the links in the active page:

    //prefetch pages when anchors with data-prefetch are encountered
              $( ".ui-page" ).live( "pageshow.prefetch"function(){
                        var urls = [];
                        $( this ).find( "a:jqmData(prefetch)" ).each(function(){
                                   var url = $( this ).attr( "href" );
                                   if ( url && $.inArray( url, urls ) === -1 ) {
                                             urls.push( url );
                                             $.mobile.loadPage( url );
                                   }
                        });
              } );
     
     
     
    Hope that help.