javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

toggle within a list

Browse Source
This commit is contained in:
Adam Bradley
2013-10-17 13:53:43 -05:00
parent c567017e95
commit 04a14ba269
4 changed files with 49 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
dist/css/ionic-scoped.css vendored
View File

@ -2193,6 +2193,11 @@
.ionic .toggle input:checked + .handle { .ionic .toggle input:checked + .handle {
background-color: white; background-color: white;
-webkit-transform: translate3d(22px, 0, 0); } -webkit-transform: translate3d(22px, 0, 0); }
.ionic .list-item-buttons.toggle {
position: absolute;
top: 5px;
right: 15px;
z-index: 3; }
.ionic .radio-buttton-list .list-item-content { .ionic .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */ /* give some room to the right for the checkmark icon */
padding-right: 60px; } padding-right: 60px; }

6
dist/css/ionic.css vendored
View File

@ -2679,6 +2679,12 @@ input[type="checkbox"][readonly] {
background-color: white; background-color: white;
-webkit-transform: translate3d(22px, 0, 0); } -webkit-transform: translate3d(22px, 0, 0); }
.list-item-buttons.toggle {
position: absolute;
top: 5px;
right: 15px;
z-index: 3; }
.radio-buttton-list .list-item-content { .radio-buttton-list .list-item-content {
/* give some room to the right for the checkmark icon */ /* give some room to the right for the checkmark icon */
padding-right: 60px; } padding-right: 60px; }

7
scss/ionic/_toggle.scss
View File

@ -70,3 +70,10 @@
background-color: $toggle-handle-on-bg-color; background-color: $toggle-handle-on-bg-color;
-webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0); -webkit-transform: translate3d( $toggle-width - $toggle-handle-width - ($toggle-border-width * 2) ,0,0);
} }
.list-item-buttons.toggle {
position: absolute;
top: $list-item-padding / 3;
right: $list-item-padding;
z-index: 3;
}

75
test/input-toggle.html
View File

@ -17,68 +17,51 @@
<main class="content has-header"> <main class="content has-header">
<ul class="list"> <ul>
<li class="list-item"> <li class="list-item">
Airplane Mode <div class="list-item-content">
<label class="toggle" id="airplaneMode"> Flux Capacitor
<input type="checkbox" name="airplaneMode"> </div>
<label class="list-item-buttons toggle">
<input type="checkbox" checked>
<div class="handle"></div> <div class="handle"></div>
</label> </label>
</li> </li>
<li class="list-item"> <li class="list-item">
Do Not Disturb <div class="list-item-content">
<label class="toggle" id="doNotDisturb"> 1.21 Gigawatts
<input type="checkbox" name="doNotDisturb" checked="checked"> </div>
<label class="list-item-buttons toggle">
<input type="checkbox" checked>
<div class="handle"></div>
</label>
</li>
<li class="list-item">
<div class="list-item-content">
88 MPH
</div>
<label class="list-item-buttons toggle">
<input type="checkbox" checked>
<div class="handle"></div>
</label>
</li>
<li class="list-item">
<div class="list-item-content">
Plutonium Resupply
</div>
<label class="list-item-buttons toggle">
<input type="checkbox">
<div class="handle"></div> <div class="handle"></div>
</label> </label>
</li> </li>
</ul> </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> </main>
</div> </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="../dist/js/ionic.js"></script> <script src="../dist/js/ionic.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>
</body> </body>
</html> </html>