jQuery in Visual force page
jQuery in Visual force page:
jQuery is an freely available just go to site and download js files and CSS, actively supported, JavaScript library used to add client-side manipulation to HTML pages. You can use it to do the same on your Visualforce pages.
It provides more flexible UI with salesforce.com. It is also used in Facebook integration with Salesforce.com.
For example if you want to display Account and when you select a Contact than show the phone number.
Steps for using jQeury in Visual force pages:
- Download JQuery css and JavaScript files for that Go to URL http://www.jqueryui.com/download and click on Download.
- Go to Salesforce.com Setup/Develop/Static Resource/New
Enter all fields’ value and select zip file named as “jquery-ui-1.8.11.custom.zip”.
3. Create Visual force page
Code:
<apex:page showheader="false" standardController="Account" recordsetVar="accounts" >
<head>
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-1.5.1.min.js')}" />
<apex:includeScript value="{!URLFOR($Resource.jQuery, '/js/jquery-ui-1.8.11.custom.min.js')}" />
<apex:stylesheet value="{!URLFOR($Resource.jQuery, '/css/ui-lightness/jquery-ui-1.8.11.custom.css')}" />
<script>
$j = jQuery.noConflict();
$j(document).ready(function() {
$j("#phone").dialog({ autoOpen: false, modal: true, position: 'center' });
});
function showDialog(name, phone){
$j("#phoneNumber").html(phone);
$j("#phone").dialog("open");
$j('#phone').dialog("option" , "title" , name);
$j('#phone').dialog('option', 'position', 'center');
return false;
}
</script>
<style>
.accountLink { color: blue; cursor: pointer; cursor: hand; }
</style>
</head>
<body>
<apex:dataList value="{!accounts}" var="account" id="theList">
<a href="" class="accountLink" onclick="return showDialog('{!account.name}','{!account.Phone}')"><apex:outputText value="{!account.name}"/></a>
</apex:dataList>
<div id="phone" >
<div style="float:left">Phone:</div><div id="phoneNumber"></div>
</div>
</body>
</apex:page>
Description:
In visual force call Show dialog box in that passing parameter Name and Phone then sets position and title etc. and with the help of conflict show dialog box.
Conclusion:
Using jQuery we can create visual force page with standard lookup and used our own CSS. Also write JavaScript in visual force pages.
No comments:
Post a Comment