Download Safari Books Online apps: Apple iOS | Android

Entire Site

Safari Books Online

    Free Trial

    Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


    • Create BookmarkCreate Bookmark
    • Create Note or TagCreate Note or Tag
    • DownloadDownload
    • PrintPrint
    Share this Page URL
    Help

    4. Dialog Boxes > Formatting Content

    Formatting Content

    Using the dialog () method drastically changes the appearance of HTML elements on the rendered page. Indeed, this method scans the HTML and adds new CSS classes to the elements concerned (here, the dialog boxes) to give them the appropriate style.

    Here, for example, the HTML code that appears after the dialog () instruction has been changed (Figure 4-3). This code was retrieved using the Firebug extension in Firefox.

    HTML code generated with the dialog () method

    Figure 4-3. HTML code generated with the dialog () method

    These CSS classes can customize the display of elements. For example, if we change the ui-dialog-titlebar CSS class associated with <div> elements, we get a new aspect for the window title. Similarly, if we change the ui-dialog-content CSS class associated with <div> elements, we get a new appearance for the content of the windows.

    Modify these elements (shown in bold) in the HTML by adding a <style> tag to obtain the layout shown in Figure 4-4:

    <!DOCTYPE html>
<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

<style type=text/css>
  div.ui-dialog-titlebar {
    font-size : 10px;
  }
  div.ui-dialog-content {
    font-size : 15px;
    font-family : georgia;
    font-style : italic;
  }
</style>

<div id="dialog" title="Window title">
  <p> Content of the dialog box</p>
</div>

<script>

$("#dialog").dialog();

</script>
    A customized dialog box

    Figure 4-4. A customized dialog box

    This HTML code is identical to the previous, except that we added the <style> tag after the inclusion of the jQuery UI styles. The addition of our own styles must be done after those of jQuery UI, otherwise our changes will be ignored.