Salesforce Lightning Ready Toggle

Nowadays most of the salesforce projects are shifted to Lightning Ready and jQuery acts as a very good tool while designing Lightning Ready Pages. In this blog, we are going to learn how to create Lightning Ready Toggle.

_________________________

Requirements:

#

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

#

Download the Design System Zip.

<apex:stylesheet value="{!URLFOR($Resource.manpreet2050, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

Upload the zip file named manpreet2050 as your Static Resource.

# <apex:slds />

# <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> for SVG's Support.

# Set the StandardStylesheets to false and doctype to html-5.0

_________________________________________________________________________________

_________________________

Reference Code :

<apex:page docType=”html-5.0″ standardStylesheets=”false”>
    <!–jQuery CDN–>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
    <!–Salesforce Lightning Design System Static Resource–>
    <apex:stylesheet value=”{!URLFOR($Resource.SLDS0102, ‘assets/styles/salesforce-lightning-design-system-vf.min.css’)}” />
    <script> var j$ = jQuery.noConflict(); </script>
    <html xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=”http://www.w3.org/1999/xlink”>
        <head>
            <meta name=”viewport” content=”width=device-width, initial-scale=1.0″/> <apex:slds />
        </head>
        <!–Wrapping Div–>
        <div class=”manpreetSingh2050″>
            <div class=”slds-form-element”>
                <label class=”slds-checkbox–toggle slds-grid”>
                    <span class=”slds-form-element__label slds-m-bottom–none”>Field Name :</span>
                    <input id=”togglex” name=”checkbox” type=”checkbox” aria-describedby=”toggle-desc” />
                    <span id=”toggle-desc” class=”slds-checkbox–faux_container” aria-live=”assertive”>
                        <span class=”slds-checkbox–faux”></span>
                    </span>
                </label>
            </div> 
            <!–SLDS Toggle Value–>
            <div class=”slds-text-body–regular slds-m-top–small”>
                <span style=”font-weight:bold;” id=”toggleValue1″>Disabled</span>
            </div>
            <script>
                j$(‘#togglex’).on(‘change’,function() {
                    if(j$(this).prop(‘checked’)){
                        j$(‘#toggleValue1’).text(‘Enabled’);
                    } else {
                        j$(‘#toggleValue1’).text(‘Disabled’);
                    } 
                });
            </script>
        </div>
    </html>
</apex:page>

_________________________

“YOU WANT ME TO PUT MY HAMMER DOWN! LIGHTNING IS MY NEW POWER".