Salesforce Lightning Ready Toggle

Salesforce Lightning Ready Toggle

Now a days most of the salesforce projects are shifted to Lightning Ready  Screenshot from 2018-01-16 13:16:13 and jQuery jqueryacts as a very good tool while designing Lightning Ready Pages.In this Blog we are going to learn on how to create Lightning Ready Toggle.

_________________________________________________________________________________

Requirements:

# <!–jQuery CDN–>

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

# <!–Salesforce Lightning Design System Static Resource–>

Download the Design System Zip from here which i have renamed it to manpreet2050.

<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 a-guide-to-html5-and-css3

Pink_Panther_2

_________________________________________________________________________________

 

f1

_________________________________________________________________________________

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”. 31163A0400000578-3442108-image-a-27_1455189872679

0 Comments

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2019 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?