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>

Comments

Popular Posts