Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>jQuery Mobile Demos - Slide Panel</title>
- <link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/css/themes/default/jquery.mobile-1.3.0-beta.1.css">
- <link rel="stylesheet" href="http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/_assets/css/jqm-demos.css">
- <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
- <script src="http://jquerymobile.com/demos/1.3.0-beta.1/js/jquery.mobile-1.3.0-beta.1.js"></script>
- <!-- Demo CSS -->
- <link rel="stylesheet" href="http://flexslider.woothemes.com/css/demo.css" type="text/css" media="screen" />
- <link rel="stylesheet" href="http://flexslider.woothemes.com/css/flexslider.css" type="text/css" media="screen" />
- <!-- Modernizr -->
- <script src="http://flexslider.woothemes.com/js/modernizr.js"></script>
- <!-- FlexSlider -->
- <script defer src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
- </head>
- <body class='loading'>
- <div data-role="page" class="ui-responsive-panel">
- <div data-role="header" data-theme="f">
- <h1>My App</h1>
- <a href="#nav-panel" data-icon="bars" data-iconpos="notext">Menu</a>
- <a href="#add-form" data-icon="plus" data-iconpos="notext">Add</a>
- </div><!-- /header -->
- <div data-role="content"> </div><!-- /content -->
- <style>
- .nav-search .ui-btn-up-a {
- background-image:none;
- background-color:#333333;
- }
- .nav-search .ui-btn-inner {
- border-top: 1px solid #888;
- border-color: rgba(255, 255, 255, .1);
- }
- </style>
- <div data-role="panel" data-position="left" data-position-fixed="false" data-display="reveal" id="nav-panel" data-theme="a">
- <ul data-role="listview" data-theme="a" data-divider-theme="a" style="margin-top:-16px;" class="nav-search">
- <li data-icon="delete" style="background-color:#111;">
- <a href="#" data-rel="close">Close menu</a>
- </li>
- <li data-filtertext="wai-aria voiceover accessibility screen reader">
- <a href="../about/accessibility.html">Accessibility</a>
- </li>
- <li data-filtertext="accordions collapsible set collapsible-set collapsed">
- <a href="../content/content-collapsible-set.html">Accordions</a>
- </li>
- </ul>
- <!-- panel content goes here -->
- </div><!-- /panel -->
- <div id="main" role="main">
- <section class="slider">
- <div class="flexslider">
- <ul class="slides">
- <li>
- <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
- </li>
- <li>
- <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
- </li>
- <li>
- <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" />
- </li>
- <li>
- <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_caramel.jpg" />
- </li>
- </ul>
- </div>
- </section>
- </div>
- </div><!-- /page -->
- <script type="text/javascript">
- $(window).load(function(){
- $('.flexslider').flexslider({
- animation: "slide",
- start: function(slider){
- $('body').removeClass('loading');
- }
- });
- });
- </script>
- <!-- Optional FlexSlider Additions -->
- <script src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
- <script src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
- <script defer src="http://flexslider.woothemes.com/js/demo.js"></script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement