mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Merge branch 'master' of https://github.com/driftyco/ionic
Conflicts: dist/css/ionic-scoped.css
This commit is contained in:
Max Lynch
@@ -25,10 +25,11 @@
|
||||
<p><a class="button button-block button-default" href="headers.html"><i class="icon-star-half-empty"></i> Headers</a></p>
|
||||
<p><a class="button button-block button-default" href="input-text.html"><i class="icon-star"></i> Input: Text (single-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-textarea.html"><i class="icon-star"></i> Input: Text (multi-line)</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star-half-empty"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-radio.html"><i class="icon-star"></i> Input: Radio Buttons</a></p>
|
||||
<p><a class="button button-block button-default" href="input-range.html"><i class="icon-star"></i> Input: Range</a></p>
|
||||
<p><a class="button button-block button-default" href="input-select.html"><i class="icon-star-empty"></i> Input: Select</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star-half-empty"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="input-checkbox.html"><i class="icon-star"></i> Input: Checkbox</a></p>
|
||||
<p><a class="button button-block button-default" href="input-toggle.html"><i class="icon-star"></i> Input: Toggle</a></p>
|
||||
<p><a class="button button-block button-default" href="lists.html"><i class="icon-star-half-empty"></i> Lists</a></p>
|
||||
<p><a class="button button-block button-default" href="modals.html"><i class="icon-star-empty"></i> Modals</a></p>
|
||||
<p><a class="button button-block button-default" href="popovers.html"><i class="icon-star-empty"></i> Popovers</a></p>
|
||||
@@ -50,7 +51,5 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
66
test/input-checkbox.html
Normal file
66
test/input-checkbox.html
Normal file
@@ -0,0 +1,66 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Input: Checkbox</title>
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Checkbox</h1>
|
||||
</header>
|
||||
|
||||
<div class="content-wrapper">
|
||||
|
||||
<main class="content has-header">
|
||||
|
||||
<ul class="padding">
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
Flux Capacitor
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
1.21 Gigawatts
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
88 MPH
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" checked>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item checkbox-item">
|
||||
<div class="list-item-content">
|
||||
Plutonium Resupply
|
||||
</div>
|
||||
<label class="checkbox">
|
||||
<input type="checkbox">
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,59 +5,40 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section class="view">
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Radio Buttons</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Radio Buttons</h1>
|
||||
</header>
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-footer bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
|
||||
<div class="content has-header has-footer">
|
||||
<div class="content has-header">
|
||||
|
||||
<div class="radio-buttton-list">
|
||||
|
||||
<div class="list radio-list">
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="go" checked="checked">
|
||||
<div class="radio-item">
|
||||
<input type="radio" name="serverside" value="go" checked>
|
||||
<div class="list-item-content">
|
||||
Go
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
<div class="radio-button-icon icon-checkmark"></div>
|
||||
</label>
|
||||
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="python">
|
||||
<div class="radio-item">
|
||||
<div class="list-item-content">
|
||||
Python
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value=".net">
|
||||
<div class="radio-item">
|
||||
.Net
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="ruby">
|
||||
<div class="radio-item">
|
||||
Ruby
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
</label>
|
||||
<label class="list-item">
|
||||
<input type="radio" name="serverside" value="java">
|
||||
<div class="radio-item">
|
||||
Java
|
||||
<i class="icon-ok"></i>
|
||||
</div>
|
||||
<div class="radio-button-icon icon-checkmark"></div>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
@@ -66,10 +47,7 @@
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,36 +5,28 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Range</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Range</h1>
|
||||
</header>
|
||||
|
||||
<main class="content has-header">
|
||||
<div class="content-wrapper">
|
||||
<main class="content has-header padding">
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
Level of Awesomeness:
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
</li>
|
||||
</ul>
|
||||
<p>
|
||||
Level of Awesomeness:
|
||||
<input type="range" name="awesomeness" min="0" max="10" value="10">
|
||||
</p>
|
||||
|
||||
<div class="margin">
|
||||
<div class="padding">
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -5,86 +5,62 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Toggle</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Input: Toggle</h1>
|
||||
</header>
|
||||
<div class="content-wrapper">
|
||||
|
||||
<main class="content has-header">
|
||||
|
||||
<ul class="list">
|
||||
<li class="list-item">
|
||||
Airplane Mode
|
||||
<div class="toggle" id="airplaneMode">
|
||||
<input type="checkbox" name="airplaneMode">
|
||||
<div class="track">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
Flux Capacitor
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" checked>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item">
|
||||
Do Not Disturb
|
||||
<div class="toggle" id="doNotDisturb">
|
||||
<input type="checkbox" name="doNotDisturb" checked="checked">
|
||||
<div class="track">
|
||||
<div class="handle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
1.21 Gigawatts
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" checked>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
88 MPH
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox" checked>
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
<li class="list-item toggle-item">
|
||||
<div class="list-item-content">
|
||||
Plutonium Resupply
|
||||
</div>
|
||||
<label class="toggle">
|
||||
<input type="checkbox">
|
||||
<div class="handle"></div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="margin">
|
||||
<p>
|
||||
<button id="btnTest1">Toggle Airplane Mode</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button id="btnTest2">Toggle Do Not Disturb</button>
|
||||
</p>
|
||||
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
|
||||
|
||||
<!-- for testing only -->
|
||||
<script>
|
||||
|
||||
$("#btnTest1").click(function(){
|
||||
var toggle = $("#airplaneMode");
|
||||
if( toggle.val() === true ) {
|
||||
toggle.val(false);
|
||||
} else {
|
||||
toggle.val(true);
|
||||
}
|
||||
});
|
||||
|
||||
$("#btnTest2").click(function(){
|
||||
var toggle = $("#doNotDisturb");
|
||||
val = toggle.val();
|
||||
return
|
||||
if( toggle.val() === true ) {
|
||||
toggle.val(false);
|
||||
} else {
|
||||
toggle.val(true);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
<script src="../dist/js/ionic.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
368
test/lists.html
368
test/lists.html
@@ -5,90 +5,308 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Customers</h1>
|
||||
</header>
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
|
||||
<div class="list">
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Madison, WI
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-right">
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Monitors
|
||||
<span class="badge">6</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item">
|
||||
<div class="list-item-content slide-left">
|
||||
Multiple Badges
|
||||
<span class="badge">62</span>
|
||||
<span class="badge">4</span>
|
||||
<span class="badge">143</span>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<main class="content-wrapper">
|
||||
<div class="content has-header">
|
||||
<ul id="list" class="list">
|
||||
<li href="#" class="list-item">
|
||||
<div class="list-item-content">
|
||||
Sasafras
|
||||
<i class="icon-arrow-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button button-danger">Delete</button>
|
||||
</div>
|
||||
</li>
|
||||
<a href="#" class="list-item">
|
||||
Candy
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<li class="list-divider">Other things</li>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
<a href="#" class="list-item">
|
||||
Cheese cords
|
||||
<i class="icon-arrow-right"></i>
|
||||
</a>
|
||||
</ul>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
Madison, WI
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-right">
|
||||
<div class="list-item-content">
|
||||
Computers
|
||||
<span class="badge">3</span>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="icon-heart brand-danger"></i>
|
||||
Madison, WI asdf
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="icon-image brand-warning"></i>
|
||||
Driving Directions
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-ios7-cog gray"></i>
|
||||
Settings
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding-bottom">
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left">
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
Settings
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="list padding">
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-heart brand-danger fill-icon"></i>
|
||||
Madison, WI
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<i class="icon-image brand-warning fill-icon"></i>
|
||||
Driving Directions
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="list-divider">
|
||||
List Divider
|
||||
</div>
|
||||
|
||||
<a href="#" class="list-item list-icon-left list-icon-right">
|
||||
<div class="list-item-content slide-left slide-right">
|
||||
<i class="icon-ios7-cog gray fill-icon"></i>
|
||||
This is a list item with really really really really really
|
||||
really really really really long long long long long long
|
||||
text text text texxxxxttt text testy text!!!
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
<div class="list-item-buttons">
|
||||
<button class="button">Button</button>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<button class="button button-secondary" id="btn-test-right">Test Slide Right</button>
|
||||
<button class="button button-secondary" id="btn-test-left">Test Slide Left</button>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="list">
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41D5vU4I1NL.jpg">
|
||||
<h2>Pretty Hate Machine</h2>
|
||||
<p>Nine Inch Nails</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/41H62046AHL.jpg">
|
||||
<h2>Siamese Dream</h2>
|
||||
<p>Smashing Pumpkins</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51tr3o4kd9L.jpg">
|
||||
<h2>Nevermind</h2>
|
||||
<p>Nirvana</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/51j-SggaWSL.jpg">
|
||||
<h2>License To Ill</h2>
|
||||
<p>Bestie Boys</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="#" class="list-item list-thumbnail list-icon-right">
|
||||
<div class="list-item-content">
|
||||
<img src="//ecx.images-amazon.com/images/I/61e6mUocZNL.jpg">
|
||||
<h2>Dookie</h2>
|
||||
<p>Green Day</p>
|
||||
<i class="icon-chevron-right"></i>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="padding">
|
||||
<a class="button button-secondary" href="index.html">Homepage</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script>
|
||||
var l = document.getElementById('list');
|
||||
var list = new ionic.views.List({el: l});
|
||||
$("#btn-test-left").click(function(){
|
||||
|
||||
if(this.isLeft) {
|
||||
// back to normal
|
||||
this.isLeft = false;
|
||||
$(".slide-left").css({
|
||||
left: "0"
|
||||
})
|
||||
$(".list").removeClass("item-opened");
|
||||
} else {
|
||||
// open
|
||||
this.isLeft = true;
|
||||
$(".slide-left").css({
|
||||
left: "-72px"
|
||||
})
|
||||
$(".list").addClass("item-opened");
|
||||
}
|
||||
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
$("#btn-test-right").click(function(){
|
||||
|
||||
if(this.isRight) {
|
||||
// back to normal
|
||||
this.isRight = false;
|
||||
$(".slide-right").css({
|
||||
left: "0"
|
||||
})
|
||||
$(".list").removeClass("item-opened");
|
||||
} else {
|
||||
// open
|
||||
this.isRight = true;
|
||||
$(".slide-right").css({
|
||||
left: "72px"
|
||||
})
|
||||
$(".list").addClass("item-opened");
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user