jQuery Mobile: Popup nested menu

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

A nested menu can be created by placing listviews into an accordion inside a popup.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Nested Menu App</h1>
    </div>

    <div data-role='content'>
        <a href='#popupNested' data-rel='popup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b' data-transition='pop'>Choose a creature...</a>
        <div data-role='popup' id='popupNested' data-theme='none'>
            <div data-role='collapsibleset' data-theme='b' data-content-theme='a' data-collapsed-icon='arrow-r' data-expanded-icon='arrow-d' style='margin:0; width:250px;'>
                <div data-role='collapsible' data-inset='false'>
                    <h2>Farm animals</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Chicken</a></li>
                        <li><a href='#' data-rel='dialog'>Cow</a></li>
                        <li><a href='#' data-rel='dialog'>Duck</a></li>
                        <li><a href='#' data-rel='dialog'>Sheep</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role='collapsible' data-inset='false'>
                    <h2>Pets</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Cat</a></li>
                        <li><a href='#' data-rel='dialog'>Dog</a></li>
                        <li><a href='#' data-rel='dialog'>Iguana</a></li>
                        <li><a href='#' data-rel='dialog'>Mouse</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role='collapsible' data-inset='false'>
                    <h2>Ocean Creatures</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Fish</a></li>
                        <li><a href='#' data-rel='dialog'>Octopus</a></li>
                        <li><a href='#' data-rel='dialog'>Shark</a></li>
                        <li><a href='#' data-rel='dialog'>Starfish</a></li>
                    </ul>
                </div><!-- /collapsible -->
                <div data-role='collapsible' data-inset='false'>
                    <h2>Wild Animals</h2>
                    <ul data-role='listview'>
                        <li><a href='#' data-rel='dialog'>Lion</a></li>
                        <li><a href='#' data-rel='dialog'>Monkey</a></li>
                        <li><a href='#' data-rel='dialog'>Tiger</a></li>
                        <li><a href='#' data-rel='dialog'>Zebra</a></li>
                    </ul>
                </div><!-- /collapsible -->
            </div><!-- /collapsible set -->
        </div><!-- /popup -->
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: A popup menu

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

A menu can be created by adding a listview inside a popup.

The 3 main lines are highlighted below.

In line 16, the href has a data relationship with the <div> with the popup datarole.

Popup Menu
<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Popup Menu App</h1>
    </div>

    <div data-role='content'>
        <a href='#popupMenu' data-rel='popup' data-transition='slideup' class='ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a'>Actions...</a>
        <div data-role='popup' id='popupMenu' data-theme='b'>
            <ul data-role='listview' data-inset='true' style='min-width:210px;'>
                <li data-role='list-divider'>Choose an action</li>
                <li><a href='#'>View details</a></li>
                <li><a href='#'>Edit</a></li>
                <li><a href='#'>Disable</a></li>
                <li><a href='#'>Delete</a></li>
            </ul>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

jQuery Mobile: Photo Lightbox

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

A lightbox is a graceful way to display an image.  A lightbox can be created easily by placing an image in a popup.

In this example, a close button is added to the markup by adding a link.

The data-overlay-theme=’b’ attribute adds a dark backdrop behind the photos.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Photo Lightbox App</h1>
    </div>

    <div data-role='content' style='text-align: center'>
        <a href='#popupParis' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='http://demos.jquerymobile.com/1.4.1/_assets/img/paris.jpg' alt='Paris, France' style='width:30%'></a>
        <a href='#popupSydney' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='http://demos.jquerymobile.com/1.4.1/_assets/img/sydney.jpg' alt='Sydney, Australia' style='width:30%'></a>
        <a href='#popupNYC' data-rel='popup' data-position-to='window' data-transition='fade'><img class='popphoto' src='http://demos.jquerymobile.com/1.4.1/_assets/img/newyork.jpg' alt='New York, USA' style='width:30%'></a>
        <div data-role='popup' id='popupParis' data-overlay-theme='b' data-theme='b' data-corners='false'>
            <a href='#' data-rel='back' class='ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right'>Close</a><img class='popphoto' src='http://demos.jquerymobile.com/1.4.1/_assets/img/paris.jpg' style='max-height:512px;' alt='Paris, France'>
        </div>
        <div data-role='popup' id='popupSydney' data-overlay-theme='b' data-theme='b' data-corners='false'>
            <a href='#' data-rel='back' class='ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right'>Close</a><img class='popphoto' src='http://demos.jquerymobile.com/1.4.1/_assets/img/sydney.jpg' style='max-height:512px;' alt='Sydney, Australia'>
        </div>
        <div data-role='popup' id='popupNYC' data-overlay-theme='b' data-theme='b' data-corners='false'>
            <a href='#' data-rel='back' class='ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right'>Close</a><img class='popphoto' src='http://demos.jquerymobile.com/1.4.1/_assets/img/newyork.jpg' style='max-height:512px;' alt='New York, USA'>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code

 

jQuery Mobile: Tooltip

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

A tooltip can be created by adding a theme swatch to a basic popup and adding padding via the ui-content class.

Here we also show how you can custom style the tooltip button.

<!DOCTYPE html>
<html>
<head>
    <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>
    <title>Codecrawl</title>
</head>
<body>
<div data-role='page'>
    <div data-role='header' data-theme='b'>
        <h1>A Tooltip App</h1>
    </div>
    <br>
    <br>

    <div data-role='content' style='text-align: center'>
        <p>A paragraph with a tooltip. <a href='#popupInfo' data-rel='popup' data-transition='pop' class='my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext' title='Learn more'>Learn more</a></p>
        <div data-role='popup' id='popupInfo' class='ui-content' data-theme='a' style='max-width:350px;'>
            <p>Here is a <strong>tiny popup</strong> being used like a tooltip. The text will wrap to multiple lines as needed.</p>
        </div>
    </div>

    <div data-role='footer' data-position='fixed'>
        <h4 style='text-align:center;'>I'm the footer</h4>
    </div>
</div>

</body>
</html>
Try The Code