Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  
  <title>jQuery Mobile test page</title>
  <meta charset=utf-8 />
  <meta name="viewport" content="width=device-width, initial-scale="1"">
  
  <link rel="stylesheet"  href="http://code.jquery.com/mobile/latest/jquery.mobile.css" /> 
  <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
  <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script> 
  
  <style>
     .ui-page { padding:15px; }
  </style>
  
</head>
  
  
<body>
​
  <h1>I'm a jQuery Mobile page</h1>
  <p>This page doesn't have a page wrapper, header, content or footer block because these are all optional elements in the framework now.</p>
  <p>If you want to start with a "clean slate" page that doesn't even set padding on the body, start with this and add your custom styles. The content container adds 15px of padding so add that container if you want to add a bit of spacing, or just write styles for padding on the ui-page wrapper that is auto-injected by the framework as we've done here.</p>
  <p>jQuery Mobile will still auto-initialize and widgets you have in this page. Here are a few examples.</p>
​
  <h2>Here's a list</h2>
​
    <ul data-role="listview" data-dividertheme="d" data-inset="true"> 
    <li data-role="list-divider">A</li> 
    <li><a href="index.html">Adam Kinkaid</a></li> 
    <li><a href="index.html">Alex Wickerham</a></li> 
    <li><a href="index.html">Avery Johnson</a></li> 
    <li data-role="list-divider">B</li> 
    <li><a href="index.html">Bob Cabot</a></li> 
    <li data-role="list-divider">C</li> 
    <li><a href="index.html">Caleb Booth</a></li> 
    <li><a href="index.html">Christopher Adams</a></li> 
  </ul> 
  
​
  <h2>Here's a form</h2>
  
  <form> 
​
        <div data-role="fieldcontain"> 
                <label for="name">Text Input:</label> 
                <input type="text" name="name" id="name" value=""  /> 
        </div> 
        <div data-role="fieldcontain"> 
                <label for="textarea">Textarea:</label> 
            <textarea cols="40" rows="8" name="textarea" id="textarea"></textarea> 
        </div> 
        <div data-role="fieldcontain"> 
                <label for="search">Search Input:</label> 
                <input type="search" name="password" id="search" value=""  /> 
        </div> 
        <div data-role="fieldcontain"> 
                <label for="slider2">Flip switch:</label> 
                <select name="slider2" id="slider2" data-role="slider"> 
                    <option value="off">Off</option> 
                    <option value="on">On</option> 
                </select> 
        </div> 
        <div data-role="fieldcontain"> 
                <label for="slider">Slider:</label> 
                <input type="range" name="slider" id="slider" value="0" min="0" max="100"  /> 
        </div> 
            
​
 
 
        
    </form> 
  
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers