jQuery Mobile: Combining heading and content with rounded corners

This entry is part 45 of 73 in the series jQuery Mobile

To combine heading and content with rounded corners, we can remove classes attached to the heading line.

<!DOCTYPE html>
    <link href='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css' rel='stylesheet'/>
    <script src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
    <script src='http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js'></script>
<div data-role='page'>
    <div data-role='header'><h1>Grouping Content</h1></div>
    <div class='ui-body ui-body-a ui-corner-all'>
        <p>Lorem ipsum dolor sit amet...</p>

    <div data-role='footer' data-position='fixed'>
Try The Code

Comparing this example with the previous example, there are no classes declared in line 13.

Series Navigation<< jQuery Mobile: Header and content with rounded corners
jQuery Mobile: Icon sets >>

Leave a comment

Leave a Reply