- February 8, 2017
- Posted by: user
- Category: Uncategorized
STEP : 1
The first step is to extend the actual jQuery object with the function that we wish to add.
For Example, suppose we need to add the truncation functionality in addtion with the cluetip functionality.
So First of all : create a jQuery.truncateWithcluetip.js file and save it with the following code:
[code:js] (function($){
$.fn.truncateWithcluetip = function(options) {
return this.each(function() {
});
};
})(jQuery);[/code]
Step 2
Now let’s create a simple html page.
Insert the following code.
[code:xml]
<html>
<head>
<title>Truncation Plugin Test</title>
<script language="javascript" type="text/javascript" src="jquery.js"></script>
<script language="javascript" type="text/javascript" src="jQuery.truncateWithcluetip.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(‘.tip’).truncateWithcluetip();
});
</script>
</head>
<body>
<div class="tip" style="width:200px;background-color:#ccc;padding:10px;">
isummation isummation isummation isummation isummation isummation isummation
<br />
isummation isummation isummation isummation isummation isummation isummation
<br />
jQuery jQuery jQuery jQuery jQuery jQuery isummation
</div>
</body>
</html>
[/code]
STEP : 3
Now we want to do is provide a mechanism for the user to customize the plugin.
We should also provide defaults so that the user isn’t forced into providing a long list of parameters.
We can easily do this using jQuery’s extend method.
[code:js]
(function($){
$.fn.truncateWithcluetip = function(options){
var defaults = {
length: 100,
minTrail: 20,
moreText: "More Information",
ellipsisText: "…",
cluetipOption: {
width: 400,
showTitle: true,
arrows: true,
closePosition: ‘title’,
sticky: true,
mouseOutClose: true,
splitTitle:’|’
}
};
var options = $.extend(true,defaults, options);
return this.each(function(){
obj = $(this);
var body = obj.html();
if(body.length > options.length + options.minTrail){
var splitLocation = body.indexOf(‘ ‘, options.length);
if(splitLocation != -1){
// truncateWithcluetip tip
var splitLocation = body.indexOf(‘ ‘, options.length);
var str1 = body.substring(0, splitLocation);
var str2 = body.substring(splitLocation, body.length – 1);
obj.html(str1 + options.ellipsisText);
// insert moreInformation link
obj.append(
‘<div class="clearboth" align="right">’ +
‘<a class="truncate_more_link" title="’ + options.moreText + options.cluetipOption.splitTitle + body + ‘" href="javascript:void(0);">’ + options.moreText + ‘</a>’ +
‘</div>’
);
$(‘.truncate_more_link’).cluetip(options.cluetipOption);
}
}
});
};
})(jQuery);
[/code]
STEP 4
Modify your html page with the following code :
[code:js]
<link rel="stylesheet" type="text/css" media="screen" href="jquery.cluetip.css" />
<script language="javascript" type="text/javascript" src="jquery.cluetip.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$(‘.tip’).truncateWithcluetip({
length : 50,
moreText : ‘More’,
ellipsisText : ‘…’,
cluetipOption: {
width: 400,
showTitle: true,
arrows: true,
closePosition: ‘title’,
sticky: true,
mouseOutClose: true
}
});
});
</script>
[/code]