jQM - ActionSheet example

by Dragan Gaić

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <link rel="stylesheet" href="http://example.gajotres.net/sources/jQMActionsheet/jquery.mobile.actionsheet.css" />
        <!--<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>-->
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>            
        <script src="http://example.gajotres.net/sources/jQMActionsheet/jquery.mobile.actionsheet.js"></script>  
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-role="header">
                <h1>A.S. Test-Site</h1>
                <a data-icon="plus" class="ui-btn-right" data-role="actionsheet">Open</a>
                <div>
                    <a data-role="button" href="#">Action 1</a>
                    <a data-role="button" href="#">Action 2</a>
                    <a data-role="button" href="#">Action 3</a>
                    <br/>
                    <a data-role="button" data-rel="close" href="#">Cancel</a>
                </div>
            </div><!-- /header -->
            
            <div data-role="content">
                <!-- It is possible to associate toggle and sheet via html id -->
                <a data-role='actionsheet' data-sheet='sheet0' id='a0'>Open Sheet 0</a>	
                <p>There are two action sheets on this page. One as part of the header and one as part of the content</p>
                <p>The one in the header uses an optional close button. See the markup for details</p>
                <p>Primary animation is done using CSS3 use a webkit browser to view this...

CSS

#login { background:transparent; }
#login input { display:inline; width:86%; padding:5px; margin:7px; }