Managing toolbars

Manipulating toolbars is done primarily through the use of jQuery methods. Utility methods were also added by jQuery Mobile, as the navbar () method to facilitate the management of navigation bars. Navigation bars are associated with the standard navbar component.

Dynamically create a toolbar

We know that there are two types of toolbars: header (top of the window) and footer (bottom of the window). The dynamic creation of a toolbar will mainly concern those of footer type as header toolbars are usually included in the HTML of the window to allow navigation between windows using the Back button.

Dynamic creation of a footer toolbar

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

</body>

</html>

var html = "";

html += "<div data-role=footer data-position=fixed>";

html += "<h1> Footer part </h1>";

html += "</div>";

$("#home").append (html);

</script>

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_m5afcc1ed.gif

Turning an HTML element into a jQuery Mobile toolbar

Look at the HTML generated by the previous program using Firebug:

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_m2e12121a.gif

The header toolbar has the ui-bar-a and ui-header CSS classes, while the footer toolbar has the ui-bar-a and ui-footer classes. The <h1> element included in each of them, now has the ui-title class to center the text on the display. Note that ui-bar-a class corresponds to the default theme (here "a" theme). If we indicated the data-theme attribute for one of the toolbars, the ui-bar-a class would be replaced by the corresponding class (eg ui-bar-e for the "e" theme).

Insert toolbars by Ajax

Rather than create the footer toolbar dynamically in the JavaScript code, insert it from the HTML code downloaded from the server by Ajax.

Insert a footer toolbar by Ajax

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

</body>

</html>

$.ajax (

{

url : "action.php",

complete : function (xhr, result)

{

if (result != "success") return;

var response = xhr.responseText;

$("#home").append (response);

$("#home").fixHeaderFooter ();

}

});

</script>

Notice the call to fixHeaderFooter () method used on the <div> corresponding to the window. It allows to search for toolbars that have the data-position="fixed" attribute, and position them to the appropriate fixed locations (here at the bottom of the window).

action.php file

<?
$html = "";
$html .= "<div id=footer class='ui-bar-e ui-footer' data-position=fixed>";
$html .= "<h1 class=ui-title>Footer part</h1>";
$html .= "</div>";
echo utf8_encode ($html);
?>

The toolbar is described from the ui-bar-e and ui-footer CSS classes, while the data-position="fixed" attribute will be used by the fixHeaderFooter () method in JavaScript code. Similarly the<h1> element is described using the ui-title class, to center the content.

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_386c1ecd.gif

Insert navigation bars by Ajax

Change our footer toolbar so that it contains a navigation bar (navbar).

Insert a navigation bar in the footer toolbar by Ajax

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

</body>

</html>

$.ajax (

{

url : "action.php",

complete : function (xhr, result)

{

if (result != "success") return;

var response = xhr.responseText;

$("#home").append (response);

$("#home").fixHeaderFooter ();

$("#navbar").navbar ();

}

});

</script>

The code is identical to the previous, except for using the navbar () method to transform the element that used it into a navigation bar.

action.php file

<?
$html = "";
$html .= "<div id=footer class='ui-bar-a ui-footer' data-position=fixed>";
$html .=   "<h1 class=ui-title>Footer part</h1>";
$html .=   "<div id=navbar>";
$html .=     "<ul>";
$html .=       "<li><a href=# data-icon=refresh>Refresh</a></li>";
$html .=       "<li><a href=# data-icon=info>Help</a></li>";
$html .=       "<li><a href=# data-icon=delete>Close</a></li>";
$html .=     "</ul>";
$html .=   "</div>";
$html .= "</div>";
echo utf8_encode ($html);
?>

The navigation bar is simply described in the traditional way in the HTML returned by the server.

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_2447240f.gif

If we remove the call to the navbar () method, the HTML is no longer transformed by jQuery Mobile and display becomes:

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_6b1694ad.gif

Manage events on toolbars

The toolbar is generally composed of buttons to perform actions. In the case of a navigation bar navbar, it is composed of <li> elements. You can use the click event (or the associated vclick virtual event) to handle clicks on these items.

Use the click event in a navigation bar

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

$("li").bind ("click", function (event)

{

alert ($(this).find ("a").text ());

});

</script>

For example by clicking the second button from the navigation bar:

Customize toolbars

Consider the navigation bar above, in which we insert only three <li> elements to simplify the display. The HTML generated by jQuery Mobile displays like this in Firebug:

http://the-jquerymobile-tutorial.org/images/jQueryMobile-en_html_m9582fca.gif

The navigation bar has the ui-navbar class, in which each <li> element is defined in a table (in the jQuery Mobile sense). Each <li> item contains a <a> link corresponding to the button associated of ui-btn class. This link will have the ui-btn-active CSS class when it is clicked, and loses if another link is clicked.

Use these CSS classes to change the look of the navigation bar:

Styling navigation bars

<!DOCTYPE html>

<html>

<head>

<style type=text/css>

.ui-navbar a.ui-btn{

font-size : 16px;

}

.ui-navbar a.ui-btn.ui-btn-active{

font-style : italic;

background : red;

}

</style>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

Methods managing fixed toolbars

To help us manage the toolbars of fixed type (those with the data-position="fixed" attribute), jQuery Mobile has created some methods to manage them.

Methods managing fixed toolbars

Method	Signification
$(selector) .fixHeaderFooter ();	Search toolbars with the data-position = "fixed" attribute in the descendants of the elements represented by the specified selector, and transforms them into fixed toolbars. This allows to dynamically create these toolbars (see an earlier example in this chapter)
$.mobile .fixedToolbars .setTouchToggleEnabled (enable)	Enables (if enable is true) or disables (if enable is false) the ability to display and hide fixed toolbars by clicking in the window. By default, clicking in the window displays or hides fixed toolbars present in it. To disable this default, use $.mobile .fixedToolbars .setTouchToggleEnabled (false).
$.mobile .fixedToolbars .show (immediately)	Allows you to reposition the fixed toolbars in the window, if the modification of the contents of the window has changed their position. The immediately parameter indicates whether repositioning occurs immediately (if true) or if it is done by a fade effect (if false, the default).
$.mobile .fixedToolbars .hide ()	Allows to hide the fixed toolbars in the window. They are redisplayed at the next click in the window (unless this function has been disabled by $.mobile .fixedToolbars .setTouchToggleEnabled (false).

Examples of manipulation of toolbars

Manage a tab system in a navigation bar

We want to display a different content in the window at every click of a button on the navigation bar. It therefore retains the same window, but different content for each selected button. This is equivalent to manage a system of tabs in the window.

Manage tabs in the navigation bar

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

$("li").bind ("vclick", function (event)

{

var id = this.id;

if (id == "menu1") $("#home div:jqmData(role=content)")

.html ("<p> Content menu 1 </p>");

else if (id == "menu2") $("#home div:jqmData(role=content)")

.html ("<p> Content menu 2 </p>");

else if (id == "menu3") $("#home div:jqmData(role=content)")

.html ("<p> Content menu 3 </p>");

});

</script>

At each click on the buttons in the navigation bar, the contents of the window is changed. However, at the first display, no button is selected. To select one of them from the start, just simulate a click on this:

Simulate a click on the first button

$("div:jqmData(role=navbar)").bind ("navbarcreate", function (event)

{

$("li#menu1 a.ui-btn").trigger ("vclick");

});

Note that this treatment can only take place when the navigation bar was created (navbarcreate event), otherwise the <a> link of ui-btn class does not exist (because the HTML is not yet transformed by jQuery Mobile).

Manage the content of the tabs by Ajax

Rather than modifying the contents of the tabs from the HTML contained in the JavaScript code, retrieve the HTML code from the server by Ajax.

Retrieve the contents of the tabs by Ajax

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</div>

<p> Window content </p>

</div>

<ul>

</ul>

</div>

</body>

</html>

$("#home").bind ("pagecreate", function (event)

{

$("li#menu1 a.ui-btn").trigger ("vclick");

});

$("li").bind ("vclick", function (event)

{

var id = this.id;

$.ajax (

{

url : "action.php",

data : { menu : id },

complete : function (xhr, result)

{

if (result != "success") return;

var response = xhr.responseText;

$("#home div:jqmData(role=content)").html (response);

}

});

</script>

action.php file

<?
$menu = $_REQUEST["menu"];

$html = "";
if ($menu == "menu1")
  $html .=   "<p> Content menu 1 </p>";
else if ($menu == "menu2")
  $html .=   "<p> Content menu 2 </p>";
else if ($menu == "menu3")
  $html .=   "<p> Content menu 3 </p>";

echo utf8_encode ($html);
?>

Full Stack Angular, React, Spring Boot Ganpathi

Friday 2 August 2013

Managging toolbar in JQM_phonegap

Managing toolbars

No comments:

Post a Comment

AWS - Solution Architect - SAA-C03 Certification Course & AWS Services