mirror of https://github.com/twbs/ratchet.git
Build mobile apps with simple HTML, CSS, and JS components.
http://goratchet.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
530 lines
16 KiB
530 lines
16 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Testing</title> |
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> |
|
<meta name="apple-mobile-web-app-capable" content="yes"> |
|
<!-- <meta name="apple-mobile-web-app-status-bar-style" content="black"> --> |
|
<link rel="stylesheet" href="../../../dist/ratchet.css"> |
|
<link rel="stylesheet" href="../../../dist/theme-classic.css"> |
|
<script src="../../../dist/ratchet.js"></script> |
|
<script src="../../../docs/js/fingerblast.js"></script> |
|
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> |
|
|
|
<script> |
|
$(function() { |
|
$(window).on('load', function () { new FingerBlast('.body'); }); |
|
}); |
|
</script> |
|
|
|
<style> |
|
.content > [class*="bar"] { |
|
position: relative; |
|
} |
|
.slider, |
|
.slider li, |
|
.slider li img { |
|
width: 100%; |
|
} |
|
</style> |
|
|
|
</head> |
|
|
|
<!-- ontouchstart property makes :active/:hover behaviors work on everything --> |
|
<body class="body" ontouchstart=""> |
|
|
|
<!-- POPOVER ============================================================ --> |
|
<div id="myPopover" class="popover"> |
|
<header class="bar-nav"> |
|
<a class="button" href="#"> |
|
Open |
|
</a> |
|
<h3 class="title">Popover title</h3> |
|
<a class="button" href="#"> |
|
Filter |
|
</a> |
|
</header> |
|
<ul class="table-view"> |
|
<li>Item1</li> |
|
<li>Item2</li> |
|
<li>Item3</li> |
|
<li class="table-view-divider">With counts</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> |
|
<li>Item2 <span class="count">1</span></li> |
|
<li>Item3 <span class="count">1</span></li> |
|
<li class="table-view-divider">With chevrons</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
<li>Item2 <span class="chevron"></span></li> |
|
<li>Item3 <span class="chevron"></span></li> |
|
</ul> |
|
</div> |
|
|
|
<div class="content"> |
|
|
|
<header class="bar-nav"> |
|
<ul class="segmented-controller"> |
|
<li class="active"> |
|
<a href="#item1">Thing one</a> |
|
</li> |
|
<li> |
|
<a href="#item2">Thing two</a> |
|
</li> |
|
</ul> |
|
</header> |
|
|
|
<div> |
|
<div id="item1" class="segmented-controller-item active"><p>section #1</p></div> |
|
<div id="item2" class="segmented-controller-item"><p>section #2</p></div> |
|
</div> |
|
|
|
|
|
<!-- SLIDER ============================================================ --> |
|
<div class="slider"> |
|
<ul> |
|
<li> |
|
<img src="http://ionehellobeautiful.files.wordpress.com/2010/05/lebron-james3.jpg"> |
|
</li> |
|
<li> |
|
<img src="http://www.nba.com/media/allstar2006/james_300_060115.jpg"> |
|
</li> |
|
<li> |
|
<img src="http://hoopedia.nba.com/images/e/eb/Lebron-james_streetclothes.jpg"> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
<!-- TITLEBAR ============================================================ --> |
|
|
|
<!-- Title-bar left and right buttons --> |
|
<header class="bar-nav"> |
|
<a class="button button-prev" href="#"> |
|
Left |
|
</a> |
|
<h1 class="title">Title</h1> |
|
<a class="button button-next" href="#"> |
|
Right |
|
</a> |
|
</header> |
|
|
|
<!-- Title-bar --> |
|
<header class="bar-nav"> |
|
<h1 class="title"><a href="#myPopover">Title</a></h1> |
|
</header> |
|
|
|
<!-- Title-bar left button --> |
|
<header class="bar-nav"> |
|
<a class="button open-shelf" href="#"> |
|
Open fatty |
|
</a> |
|
<h1 class="title">Title</h1> |
|
</header> |
|
|
|
<!-- Title-bar right button --> |
|
<header class="bar-nav"> |
|
<h1 class="title">Title</h1> |
|
<a class="button" href="#"> |
|
Filter |
|
</a> |
|
</header> |
|
|
|
<div class="test"></div> |
|
|
|
<!-- Title-bar right button --> |
|
<header class="bar-nav"> |
|
<ul class="segmented-controller"> |
|
<li class="active"> |
|
<a href="#">Thing one</a> |
|
</li> |
|
<li> |
|
<a href="#">Thing two</a> |
|
</li> |
|
<li> |
|
<a href="#">Thing three</a> |
|
</li> |
|
</ul> |
|
</header> |
|
|
|
<!-- Title-bar left button --> |
|
<header class="bar-nav" id="newshit"> |
|
<a class="button-primary open-shelf" href="#"> |
|
Open |
|
</a> |
|
<ul class="segmented-controller"> |
|
<li> |
|
<a href="#">Thing one</a> |
|
</li> |
|
<li class="active"> |
|
<a href="#">Thing two</a> |
|
</li> |
|
</ul> |
|
</header> |
|
|
|
<!-- Title-bar left button --> |
|
<header class="bar-nav"> |
|
<ul class="segmented-controller"> |
|
<li> |
|
<a href="#">Thing one</a> |
|
</li> |
|
<li class="active"> |
|
<a href="#">Thing two</a> |
|
</li> |
|
</ul> |
|
<a class="button" href="#"> |
|
Filter |
|
</a> |
|
</header> |
|
|
|
<!-- Title-bar left button --> |
|
<header class="bar-nav"> |
|
<a class="button open-shelf" href="#"> |
|
Open |
|
</a> |
|
<ul class="segmented-controller"> |
|
<li> |
|
<a href="#">Thing one</a> |
|
</li> |
|
<li class="active"> |
|
<a href="#">Thing two</a> |
|
</li> |
|
</ul> |
|
<a class="button" href="#"> |
|
Filter |
|
</a> |
|
</header> |
|
|
|
<!-- BAR-TAB ============================================================ --> |
|
|
|
<!-- Bar-tab 5 --> |
|
<nav class="bar-tab"> |
|
<ul class="tab-inner"> |
|
<li class="tab-item active"> |
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-hamburger.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
<!-- Bar-tab 4 --> |
|
<nav class="bar-tab"> |
|
<ul class="tab-inner"> |
|
<li class="tab-item active"> |
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-profile.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
<!-- Bar-tab 3 --> |
|
<nav class="bar-tab"> |
|
<ul class="tab-inner"> |
|
<li class="tab-item active"> |
|
<img class="tab-icon" src="../../docs/img/icon-home.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-messages.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
<li class="tab-item"> |
|
<img class="tab-icon" src="../../docs/img/icon-settings.png" alt=""> |
|
<div class="tab-label">test</div> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
|
|
<!-- SEARCH BAR ============================================================ --> |
|
<!-- Search bar --> |
|
<div class="bar-standard"> |
|
<form> |
|
<input type="search" placeholder="Search"> |
|
</form> |
|
</div> |
|
|
|
|
|
<!-- CONTROLLER BAR ============================================================ --> |
|
|
|
<!-- Segmented controller as a bar --> |
|
<nav class="bar-standard"> |
|
<ul class="segmented-controller"> |
|
<li> |
|
<a href="#">Thing one</a> |
|
</li> |
|
<li class="active"> |
|
<a href="#">Thing two</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
<!-- Segmented controller as a bar w/ 3 options --> |
|
<nav class="bar-standard"> |
|
<ul class="segmented-controller"> |
|
<li> |
|
<a href="#">Thing one</a> |
|
</li> |
|
<li class="active"> |
|
<a href="#">Thing two</a> |
|
</li> |
|
<li> |
|
<a href="#">Thing one</a> |
|
</li> |
|
</ul> |
|
</nav> |
|
|
|
<!-- BUTTON BAR ============================================================ --> |
|
|
|
<!-- Button bar --> |
|
<div class="bar-standard"> |
|
<a class="button-block">Block level button</a> |
|
</div> |
|
|
|
<!-- Button bar main --> |
|
<div class="bar-standard"> |
|
<a class="button-primary button-block">Block level button</a> |
|
</div> |
|
|
|
<!-- Button bar positive --> |
|
<div class="bar-standard"> |
|
<a class="button-positive button-block">Block level button</a> |
|
</div> |
|
|
|
<!-- Button bar negative --> |
|
<div class="bar-standard"> |
|
<a class="button-negative button-block">Block level button</a> |
|
</div> |
|
|
|
<!-- BUTTONS ============================================================ --> |
|
|
|
<!-- Standard buttons --> |
|
<a class="button">Button</a> |
|
<a class="button-primary">Button</a> |
|
<a class="button-positive">Button</a> |
|
<a class="button-negative">Button</a> |
|
|
|
<!-- Buttons w/ counts --> |
|
<a class="button">Button <span class="count">1</span></a> |
|
<a class="button-primary">Button <span class="count">1</span></a> |
|
<a class="button-positive">Button <span class="count">1</span></a> |
|
<a class="button-negative">Button <span class="count">1</span></a> |
|
|
|
<!-- Buttons at block level --> |
|
<a class="button-block">Block level button</a> |
|
<a class="button-primary button-block">Block level button</a> |
|
<a class="button-positive button-block">Block level button</a> |
|
<a class="button-negative button-block">Block level button</a> |
|
|
|
<!-- Buttons at block level w/ counts --> |
|
<a class="button-block">Block level button <span class="count">1</span></a> |
|
<a class="button-primary button-block">Block level button <span class="count">1</span></a> |
|
<a class="button-positive button-block">Block level button <span class="count">1</span></a> |
|
<a class="button-negative button-block">Block level button <span class="count">1</span></a> |
|
|
|
<!-- TOGGLE ============================================================ --> |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
|
|
<!-- COUNTS ============================================================ --> |
|
<span class="count">1</span> |
|
<span class="count-primary">2</span> |
|
<span class="count-positive">3</span> |
|
<span class="count-negative">4</span> |
|
<span class="count">5</span> |
|
|
|
<!-- LIST ============================================================ --> |
|
<ul class="table-view"> |
|
<li>Item1</li> |
|
<li>Item2</li> |
|
<li>Item3</li> |
|
<li class="table-view-divider">With counts</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> |
|
<li>Item2 <span class="count">1</span></li> |
|
<li>Item3 <span class="count">1</span></li> |
|
<li class="table-view-divider">With chevrons</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
<li>Item2 <span class="chevron"></span></li> |
|
<li>Item3 <span class="chevron"></span></li> |
|
<li class="table-view-divider">With chevrons & counts</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count-primary">1</span></li> |
|
<li>Item2 <span class="chevron"></span><span class="count-negative">1</span></li> |
|
<li>Item3 <span class="chevron"></span><span class="count-positive">1</span></li> |
|
<li class="table-view-divider">With buttons</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
|
<li>Item2 <a class="button-primary">Button</a></li> |
|
<li>Item3 <a class="button-positive">Button</a></li> |
|
<li>Item4 <a class="button-negative">Button</a></li> |
|
<li class="table-view-divider">With a toggle</li> |
|
<li> |
|
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li> |
|
<a href="#"> |
|
Item2 |
|
</a> |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li> |
|
Item3 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
</ul> |
|
|
|
<ul class="table-view inset"> |
|
<li class="table-view-divider">Normal</li> |
|
<li>Item1</li> |
|
<li>Item2</li> |
|
<li>Item3</li> |
|
<li class="table-view-divider">With counts</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="count">1</span></li> |
|
<li>Item2 <span class="count">1</span></li> |
|
<li>Item3 <span class="count">1</span></li> |
|
<li class="table-view-divider">With chevrons</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span></li> |
|
<li>Item2 <span class="chevron"></span></li> |
|
<li>Item3 <span class="chevron"></span></li> |
|
<li class="table-view-divider">With chevrons & counts</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <span class="chevron"></span><span class="count">1</span></li> |
|
<li>Item2 <span class="chevron"></span><span class="count">1</span></li> |
|
<li>Item3 <span class="chevron"></span><span class="count">1</span></li> |
|
<li class="table-view-divider">With buttons</li> |
|
<li>Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 <a class="button">Button</a></li> |
|
<li>Item2 <a class="button-primary">Button</a></li> |
|
<li>Item3 <a class="button-positive">Button</a></li> |
|
<li>Item4 <a class="button-negative">Button</a></li> |
|
<li class="table-view-divider">With a toggle</li> |
|
<li> |
|
Item1 <br> Item1.2 <br> Item1.3 <br> Item1.4 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li> |
|
Item2 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li> |
|
Item3 |
|
<div class="toggle"> |
|
<div class="toggle-handle"></div> |
|
</div> |
|
</li> |
|
<li class="table-view-divider">Bottom table-view-divider test</li> |
|
</ul> |
|
|
|
<!-- List with <a>'s --> |
|
<ul class="inset table-view"> |
|
<li> |
|
<a href="#">Item1</a> |
|
</li> |
|
<li> |
|
<a href="#">Item2</a> |
|
</li> |
|
</ul> |
|
|
|
<!-- SEGMENTED CONTROLLER ============================================================ --> |
|
|
|
<!-- Segmented controller with 2 tabs --> |
|
<ul class="segmented-controller"> |
|
<li><a href="#">Thing one</a></li> |
|
<li class="active"><a href="#">Thing two</a></li> |
|
</ul> |
|
|
|
<!-- Segmented controller with 3 tabs --> |
|
<ul class="segmented-controller"> |
|
<li><a href="#">Thing one</a></li> |
|
<li><a href="#">Thing two</a></li> |
|
<li class="active"><a href="#">Thing three</a></li> |
|
</ul> |
|
|
|
<!-- Segmented controller with 4 tabs --> |
|
<ul class="segmented-controller"> |
|
<li><a href="#">Thing one</a></li> |
|
<li><a href="#">Thing two</a></li> |
|
<li class="active"><a href="#">Thing three</a></li> |
|
<li><a href="#">Thing four</a></li> |
|
</ul> |
|
|
|
<!-- Segmented controller with 5 tabs --> |
|
<ul class="segmented-controller"> |
|
<li><a href="#">Thing one</a></li> |
|
<li><a href="#">Thing two</a></li> |
|
<li class="active"><a href="#">Thing three</a></li> |
|
<li><a href="#">Thing four</a></li> |
|
<li><a href="#">Thing five</a></li> |
|
</ul> |
|
|
|
<!-- FORMS ============================================================ --> |
|
|
|
<!-- Input --> |
|
<form> |
|
<input type="text" placeholder="Full name"> |
|
<input type="search" placeholder="Search"> |
|
<textarea rows="5"></textarea> |
|
<a class="button-positive button-block button-filled">Choose existing</a> |
|
</form> |
|
|
|
<!-- Input group --> |
|
<form class="input-group"> |
|
<input type="text" placeholder="Full name"> |
|
<input type="email" placeholder="Email"> |
|
<input type="text" placeholder="Username"> |
|
</form> |
|
|
|
<!-- Input group with labels--> |
|
<form class="input-group"> |
|
<div class="input-row"> |
|
<label>Full name</label> |
|
<input type="text" placeholder="Mister Ratchet"> |
|
</div> |
|
<div class="input-row"> |
|
<label>Email</label> |
|
<input type="email" placeholder="ratchetframework@gmail.com"> |
|
</div> |
|
<div class="input-row"> |
|
<label>Username</label> |
|
<input type="text" placeholder="goRatchet"> |
|
</div> |
|
</form> |
|
|
|
</div> |
|
|
|
</body> |
|
</html> |