You can style a page as a dialog by using the data-role="dialog" attribute on the page container. You can also specify the data-rel="dialog" attribute in the anchor link used to open the page. The page now gets styled as a dialog, and opens with a pop transition. When you add a header to the dialog, a close icon is created on the header, by default, in the left side of the header. In some applications/platforms, you might want to position this close button on the right side of the header. There is no ready option available to change this icon's position. This recipe shows you how to build a dialog with a custom styled header to position the close button at the right side of the header.
Copy the full code of this recipe from the code/02/custom-dialog sources folder. You can launch this code using the URL http://localhost:8080/02/custom-dialog/main.html.
The steps to be followed are:
- Create
main.htmlwith the#mainpage. Add a link here to open the#customdialogpage as a dialog using thedata-rel="dialog"attribute:<div id="main" data-role="page"> <div data-role="header"> <h1>Header of Main Page</h1> </div> <div data-role="content"> <a href="#customdialog" data-role="button" data-rel="dialog">Open Custom Dialog</a> </div> <div data-role="footer"> <h4>Footer of Main Page</h4> </div> </div> - Create the
#customdialogpage inmain.html, and add the custom header to the dialog that positions the close button on the right side of the header. The default header enhancement is prevented in this code:<div id="customdialog" data-role="page"> <div class="ui-corner-top ui-overlay-shadow ui-header ui-bar-a" role="banner"> <a href="#main" data-icon="delete" data-iconpos="notext" class="ui-btn-right ui-btn ui-btn-icon-notext ui-btn-corner- all ui-shadow ui-btn-up-a" title="Close" data-theme="a" data- transition="pop" data-direction="reverse"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text">Close</span> <span class="ui-icon ui-icon-delete ui-icon-shadow"></span> </span> </a> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Custom Dialog</h1> </div>
- Finally, add the page content with a link to go back to the
#mainpage:<div data-role="content"> <a href="#" data-role="button" data-rel="back" data-theme="b">Go Back</a> </div> <div data-role="footer"> <h4>Footer of Dialog</h4> </div> </div>
Create main.html with two pages, #main and #customdialog, in it. Add a link in the #main page to open the #customdialog page as a dialog, by setting the data-rel="dialog" attribute. Next, create the #customdialog page and add a button to go back to the #main page. Now, in the header of #customdialog, do not use the data-role="header" attribute. This will prevent the dialog header from being enhanced with the default style. The close icon will not be placed at the left side of the header now. You can now add your custom header and set custom styles to it, as given in the code listing earlier. Launch the app and open the dialog, you will see the dialog pop up. This dialog now has a custom styled header with the close icon on the right side of the header, as shown in the following screenshot:
To understand how the custom style was arrived at, first create a page that opens a regular dialog. Using the code inspector of your browser and observe the code enhancements done by the jQuery Mobile framework to the header of the dialog. Copy this generated code "as is" into your custom dialog code. Then you have to make the changes mentioned in the following sections.
The first change is to fix the close icon's position. You will see that the close action is performed with the help of an anchor link that has been added into the header code. Here, replace the ui-btn-left class with the ui-btn-right class. This will position the icon to the right in the header. The jquery.mobile.css file already has these class definitions in it.
With this change, the close icon now appears at both the left and the right positions in the header. This is because the header still has the data-role="header" attribute. This makes the framework enhance the entire header and automatically add the close icon on the left side. But, since you have already added all these generated classes manually, you can now safely remove the data-role="header" attribute from your code. Retain all the other code and classes that you have added. Now, when you launch the code, you will only see a single close icon positioned at the right side of your header.
This technique is a very important one. It can be used to customize how your jQuery Mobile apps should look and feel. The framework provides many basic options, elements, and attributes that you can add to your apps. The framework then enhances these by adding more markup code and styles internally, making it look good in your browser. This enhanced code is not visible in the View Source option of your browser. But, with a code inspector or debugging tool, you can view the enhanced code, copy it to your HTML files, tweak it, and get the result you want. The following screenshot shows the code inspector view for the custom dialog header created using this recipe:
The dialog page can further be enhanced by introducing your own styles in a custom CSS file. Check for all classes that have ui-dialog in the jquery.mobile.css file. Copy the styles that you want to tweak into your custom CSS and set appropriate new values. The following line of code shows a sample change where the top margin of the dialog is set to -12px instead of the default -15px:
.ui-dialog { margin-top: -12px; };- The Adding a customized round button to the header recipe in Chapter 3, Toolbars