Salesforce Lightining Design System Checkbox Toggle - AngularJS
<apex:page standardStylesheets="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<apex:includeScript value="{!$Resource.AngularJS}"/>
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}"/>
</head>
<body>
<div class="slds">
<article class="slds-card slds-card--narrow" ng-app="toggles" ng-controller="toggleController">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body slds-truncate">
<h2>
<a href="javascript:void(0);" class="slds-text-link--reset">
<span class="slds-text-heading--small">Toggle Switch</span>
</a>
</h2>
</div>
</header>
<div class="slds-no-flex">
<button class="slds-button slds-button--neutral" ng-click="setMasterValue(true)">Set True</button>
<button class="slds-button slds-button--neutral" ng-click="setMasterValue(false)">Set False</button>
<button class="slds-button slds-button--neutral" ng-click="getMasterValue()">Get</button>
</div>
</div>
<div class="slds-card__body" >
<div style="width:10rem;margin:auto;">
<div class="slds-form-element">
<label class="slds-checkbox--toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom--none">Toggle Master</span>
<input name="checkbox" type="checkbox" aria-describedby="toggle-desc" ng-model="master"/>
<span id="toggle-desc1" class="slds-checkbox--faux_container" aria-live="assertive">
<span class="slds-checkbox--faux"></span>
<span class="slds-checkbox--on">Enabled</span>
<span class="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
<div class="slds-form-element">
<label class="slds-checkbox--toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom--none">Toggle Slave1</span>
<input name="checkbox" type="checkbox" ng-checked="master" aria-describedby="toggle-desc" />
<span id="toggle-desc2" class="slds-checkbox--faux_container" aria-live="assertive">
<span class="slds-checkbox--faux"></span>
<span class="slds-checkbox--on">Enabled</span>
<span class="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
<div class="slds-form-element">
<label class="slds-checkbox--toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom--none">Toggle Slave2</span>
<input name="checkbox" type="checkbox" ng-checked="master" aria-describedby="toggle-desc" />
<span id="toggle-desc2" class="slds-checkbox--faux_container" aria-live="assertive">
<span class="slds-checkbox--faux"></span>
<span class="slds-checkbox--on">Enabled</span>
<span class="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
<br/>
Toggle Master : <span ng-bind="master"></span>
<div id="divID"></div>
</div>
</div>
<div class="slds-card__footer"></div>
</article>
</div>
</body>
<script>
var app = angular.module('toggles', []);
app.controller('toggleController', function ($scope, $window) {
$scope.master = false;
$scope.getMasterValue = function () {
var myEl = angular.element( document.querySelector( '#divID' ) );
if ($scope.master) {
myEl.text("Get: Master is checked.");
} else {
myEl.text("Get: Master is not checked.");
}
};
$scope.setMasterValue = function (v) {
$scope.master = v;
};
});
</script>
</html>
</apex:page>
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<apex:includeScript value="{!$Resource.AngularJS}"/>
<apex:stylesheet value="{!URLFOR($Resource.SLDS213, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}"/>
</head>
<body>
<div class="slds">
<article class="slds-card slds-card--narrow" ng-app="toggles" ng-controller="toggleController">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media--center slds-has-flexi-truncate">
<div class="slds-media__body slds-truncate">
<h2>
<a href="javascript:void(0);" class="slds-text-link--reset">
<span class="slds-text-heading--small">Toggle Switch</span>
</a>
</h2>
</div>
</header>
<div class="slds-no-flex">
<button class="slds-button slds-button--neutral" ng-click="setMasterValue(true)">Set True</button>
<button class="slds-button slds-button--neutral" ng-click="setMasterValue(false)">Set False</button>
<button class="slds-button slds-button--neutral" ng-click="getMasterValue()">Get</button>
</div>
</div>
<div class="slds-card__body" >
<div style="width:10rem;margin:auto;">
<div class="slds-form-element">
<label class="slds-checkbox--toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom--none">Toggle Master</span>
<input name="checkbox" type="checkbox" aria-describedby="toggle-desc" ng-model="master"/>
<span id="toggle-desc1" class="slds-checkbox--faux_container" aria-live="assertive">
<span class="slds-checkbox--faux"></span>
<span class="slds-checkbox--on">Enabled</span>
<span class="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
<div class="slds-form-element">
<label class="slds-checkbox--toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom--none">Toggle Slave1</span>
<input name="checkbox" type="checkbox" ng-checked="master" aria-describedby="toggle-desc" />
<span id="toggle-desc2" class="slds-checkbox--faux_container" aria-live="assertive">
<span class="slds-checkbox--faux"></span>
<span class="slds-checkbox--on">Enabled</span>
<span class="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
<div class="slds-form-element">
<label class="slds-checkbox--toggle slds-grid">
<span class="slds-form-element__label slds-m-bottom--none">Toggle Slave2</span>
<input name="checkbox" type="checkbox" ng-checked="master" aria-describedby="toggle-desc" />
<span id="toggle-desc2" class="slds-checkbox--faux_container" aria-live="assertive">
<span class="slds-checkbox--faux"></span>
<span class="slds-checkbox--on">Enabled</span>
<span class="slds-checkbox--off">Disabled</span>
</span>
</label>
</div>
<br/>
Toggle Master : <span ng-bind="master"></span>
<div id="divID"></div>
</div>
</div>
<div class="slds-card__footer"></div>
</article>
</div>
</body>
<script>
var app = angular.module('toggles', []);
app.controller('toggleController', function ($scope, $window) {
$scope.master = false;
$scope.getMasterValue = function () {
var myEl = angular.element( document.querySelector( '#divID' ) );
if ($scope.master) {
myEl.text("Get: Master is checked.");
} else {
myEl.text("Get: Master is not checked.");
}
};
$scope.setMasterValue = function (v) {
$scope.master = v;
};
});
</script>
</html>
</apex:page>
Comments
Post a Comment