Yousef Jadallah's Blog

If You Rest You're Rust

  • Active button in navbar in Jquery Mobile

     

    When you add ui-btn-active class to your anchor, it will activate the selected button in your navbar. Moreover, if you'd like to keep it active when you return to it again, you need to add ui-state-persist.

    jquery mobile framework detects ui-state-persist class, then fires the delegate as following:

     

    $navbar.delegate( "a", "vclick", function( event ) {
    if( !$(event.target).hasClass("ui-disabled") ) {
     $navbtns.not(".ui-state-persist" ).removeClass( $.mobile.activeBtnClass );
      $( this ).addClass( $.mobile.activeBtnClass );
    }
    });
    

  • Calculating GridView Fields Using jquery

    Using jquery library with ASP Controls can be a good practice to handle any client script. Furthermore, using jquery with GridView would be more efficient than using native JavaScript. JavaScript needs a lot of codes, on the other hand, Jquery helps to build robust program with less codes and work.

  • 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.

  • Grid Layout In Jquery Mobile

     

    Today I will explain to you how to use Jquery Mobile Grid layout, which allows to build multiple columns ranges between two to five columns  .

    We need this technique to place small elements side-by-side (like hours, minutes and seconds text box groups).

    Jquery mobile provides a block style class called ui-grid, this class is the core of grid layout. It is 100% width, with no borders or backgrounds, and without padding or margins.

    To build two columns layout, we can use ui-grid-a. The others can be used as the following:

    class                               

    Layout

    Width

     ui-grid-a

    Two-column

    50/50%

    ui-grid-b

    Three-column

    33/33/33%

    ui-grid-c

    Four-column

    25/25/25/25%

    ui-grid-d

    Five-column

    20/20/20/20/20%

     

    For example, we can use ui-grid-a as the following:

    <div class="ui-grid-a">

     

    </div>

     

    Inside this two-column layout, we can place the two columns.

     <div class="ui-grid-a">
                  <div class="ui-block-a">
                      Left Block</div>
                  <div class="ui-block-b">
                      Right Block
                  </div>
     </div>

     

     

     

     

     

     

    Ui-block-a class says: this is the first column in the grid, and ui-block–b is the second one in the same grid.

     

     

     


     

    Here you can find that ui-block changes the CSS Clear property to the left. This property specifies the left side of the element, where other floating elements are not allowed.

    Furthermore, you can give that block a style by using ui-bar class by default without having any style. You can also assign any style to the block (like height, background, etc):

     

       <div class="ui-grid-a">
                  <div class="ui-block-a">
                     <div class="ui-bar ui-bar-b">Left Block</div> 
                      </div>
                  <div class="ui-block-c">
                     <div class="ui-bar ui-bar-b">Right Block</div> 
                  </div>
      </div>

     

    The layout would be like this:

     


     

     

     

     

     

     

    Apply Grid to Content Container:

     

    Grid classes can be applied to any container. In the previous example, I used it with Fieldset and applied the block to the two buttons.

              <fieldset class="ui-grid-a">
                  <div class="ui-block-a">
                      <button type="button" data-theme="b">Add</button></div>
                  <div class="ui-block-b">
                      <button type="button" data-theme="e">Delete</button></div>
              </fieldset>

     


     

     

    You will find that every block -div- is stretched to 50% of the screen width.
     
    In the same way, we can create a three-column layout for time entry:
     
       <fieldset class="ui-grid-b">
                  
                  <div class="ui-block-a">
                  <label id="Label10" for="txtHours">
                            Time</label></div>
                  <div class="ui-block-b">
                     <input type="text" name="txtHours" id="txtHours" value="12" style="width:40px"  maxlength="2" /> </div>
                            
                  <div class="ui-block-c">
                    <input type="text" name="txtMinutes" id="txtMinutes" value="00" style="width:40px"   maxlength="2" /></div>
              </fieldset>

     

     

     


     

     

     
    The letters sequence after ui-block class refers to the column number. So, “a" refers to the fist column, "b" to the second one, and so on. In this way we can create multiple rows of items.

    There is an important thing by using multiple rows of items. ui-block-a CSS Class is used to  clear the floats and start a new line. Therefore the sequence is important to build the items.

    Here you can find an example of multiple rows of items:

     

           <div data-role="content">
                <fieldset class="ui-grid-b">
                    <div class="ui-block-a">
                        <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                    </div>
                    <div class="ui-block-b">
                        <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                    </div>
                    <div class="ui-block-c">
                        <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                    </div>
                    <div class="ui-block-a">
                        <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                    </div>
                    <div class="ui-block-b">
                        <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                    </div>
                    <div class="ui-block-a">
                        <img alt="" src="images.jpg" style="width: 80px; height: 80px" />
                    </div>
                </fieldset>

     

     

    The layout would be like this:

     


     

     

     

    Note that how a new line is started in the third line by using  ui-block-a CSS Class.

     

     Hope that helps.