he HeadTitle helper is used to render title in the <title> tags on the HTML head section; multiple calls to a headTitle() helper create a list of titles which are rendered when tag is outputted in the layout/view. The optional parameter $setType can be set to override the pre-existing array of titles, the default is APPEND, it can be overridden to PREPEND or SET(overwrite).
The syntax for this helper is headTitle($title, $setType = null);.
In this task we will be converting some of our existing pages to make use of the jQuery UI library and render buttons in that page using jQuery UI:
1. View the existing application home page as shown in the following screenshot; our next task is to convert the Login and Register links to render as jQuery UI buttons:
2. Replace the Login and Register links in the index view (module/Users/view/ users/index/index.html), and add the ui-button class to the links as shown in the following code snippet:
<a href="/users/login" class='ui-button'>Login</a>
<a href="/users/register" class='ui-button'>Register</a>
3. Add external references to jQuery UI towards the beginning of the view:
// Attached jQuery UI Scripts
$this->headScript()
$this->headScript()
js','text/javascript');
// Attach jQuery UI Styles
$this->headLink()->appendStylesheet('http://code.jquery.com/ ui/1.10.0/themes/base/jquery-ui.css');
4. Add a UI initialization script to apply the button look and feel to both the links:
// UI Initializer for buttons
$this->headScript()->appendScript( '$(function() {
$("a.ui-button").button();
});', 'text/javascript');
5. Preview the home page in the browser now, and you will be able to see that both the Login and Register buttons are styled using jQuery UI as shown in the following screenshot:
A View Source link on the index page will reveal the application of headScript() as shown in the following code:
<!DOCTYPE html>
<html lang="en">
...
...
<script type="text/javascript" src="http://code.jquery.com/jquery- 1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/ jquery-ui.js"></script>
<script type="text/javascript">
//<!--
$("a.ui-button").button();
});
//-->
</script>
...
...
</html>
What just happened?
We have made use of Zend Framework's view helpers to connect to the external JavaScript library; we then added custom JavaScript to the HTML head section using the headScript() view helper.
Now we have integrated our application with an external JavaScript; in the next exercise we will learn a little bit more on how scripts can be added to the HTML head section.
Before we move on to building the Group Chat interface, here is a simple task for you to complete. Now that you have understood how to link external JavaScript libraries, you can download jQuery UI from its website, extract itto the public/ folder, and modify the previously listed page to use the downloaded version of jQuery UI. jQuery UI can be downloaded from http://jqueryui.com/.
Không có nhận xét nào:
Đăng nhận xét