Introduction
This article gives some examples of JQuery to use in VF page. Study this code and play with it in your Dev Salesforce organization.
SLDS Sections
Expandable/Collapsable Section Content
Tag
<div class=”slds-section slds-is-open”>
<h3 class=”slds-section__title”>
<div class=”slds-button slds-section__title-action” onclick=”toggleArrow(‘room-arrow’);”>
<span class=”arrow-down” id=”room-arrow”></span>Account</div>
</h3>
<div class=”slds-section__content”>
<!— your content– >
</div>
</div>
Script
/*SLDS Sections*/
j$(‘.slds-section__content’).show();
j$(‘.slds-section__title’).find(‘button’).find(‘svg’).css(‘transition’, ‘0.3s’);
j$(‘.slds-section__title’).click(function(){
if(j$(this).parent().parent().hasClass(‘Minerva18SectionGroupSingle’)){
if(j$(this).parent().hasClass(‘slds-is-open’)){
j$(this).parent().removeClass(‘slds-is-open’);
j$(this).parent().find(‘.slds-section__content’).hide();
}
else{
j$(this).parent().parent().find(‘.slds-section’).removeClass(‘slds-is-open’);
j$(this).parent().parent().find(‘.slds-section__content’).hide();
j$(this).parent().toggleClass(‘slds-is-open’);
j$(this).parent().find(‘.slds-section__content’).show();
}
}
else{
j$(this).parent().toggleClass(‘slds-is-open’);
if(j$(this).parent().hasClass(‘slds-is-open’)){
j$(this).parent().find(‘.slds-section__content’).show();
}else{
j$(this).parent().find(‘.slds-section__content’).hide();
}
}
});
/*SLDS Sections*/
Fadeout pageMessages
To make slow fadeout on page messages in VF page
Tag
<div class=”msgAlert”>
<apex:pageMessages ></apex:pageMessages>
</div>
Script
j$(document).ready(function(){
setTimeout(function() {
j$(‘.msgAlert’).fadeOut(8000); // 8 second
}, xSeconds);
});
Style file upload using jQuery and css
We have a lot of restrictions to style file upload input, as most browsers will not change the appearance of the button. Also styling the apex:inputFile button is notoriously difficult but this code will show the solution to achieve it easily in your VF page
Tag
<apex:inputFile value=”{!contentFile}” filename=”{!nameFile}” id=”file” styleClass=”fileUploadApex” onchange=”showName()”/>
<input id=”CustomChooseFileButton” type=”text” size=”23″ name=”CustomChooseFileButton” value=”Browse” class=”OverlayButton slds-button” />
Script
j$(function(){
j$(‘#CustomChooseFileButton’).click(
function(e) {
j$(‘input[type=”file”]’).click();
});
j$(‘input[type=”text”]’).mousedown(
function(e) {
e.preventDefault();
j$(this).blur();
return false;
});
});
