Plugin Tutorial

truncate.js - 예제

plugin

								/* jquery-truncate.js */
								/**
									First jQuery Plugin - truncate
									written by florakid 
								*/
								(function  ($) {
									$.fn.truncate = function  (options) {
										var defaults = {
											length: 300,
											minTrail: 20,
											moreText: "more",
											lessText: "less",
											ellipsisText: "..."
										};
										var options = $.extend(defaults, options);		
										
										return this.each(function  () {
											obj = $(this);
											var body = obj.html();
								//			alert(body.length);
											if (body.length > options.length+options.minTrail) {
												var splitLocation = body.indexOf(' ', options.length );
												if (splitLocation != -1) {
													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+''+''+str2+'');
													obj.find('.truncate_more').css("display", "none");

													// insert more link
													obj.append(
														''	
													);

													// set onclick event for more/less link
													var moreLink = $('.truncate_more_link', obj);
													var moreContent = $('.truncate_more', obj);
													var ellipsis = $('.truncate_ellipsis', obj);
													moreLink.click(function  () {
														if (moreLink.text()==options.moreText) {
															moreContent.show('normal');
															moreLink.text(options.lessText);
															ellipsis.css("display","none");
														}else {
															moreContent.hide('normal');
															moreLink.text(options.moreText);
															ellipsis.css('display','inline');
														}
														return false;
													});
												}// end if
											} //end if
										});
									};
								})(jQuery)
						

적용하기

							$(document).ready(function() {  
							 $('.tip').truncate( {  
								length: 120,  
								minTrail: 10,  
								moreText: 'show more',  
								lessText: 'show less',  
								ellipsisText: " [there's more...]"  
							 });  
							});  
						

html 구조

							
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam fringilla, purus a ultrices blandit, odio ante scelerisque neque, vitae imperdiet odio velit ac nisl. Sed tortor metus, placerat condimentum, feugiat in, feugiat adipiscing, mi. Donec pulvinar sem vitae leo. Vestibulum eget lectus et ligula hendrerit pharetra. Sed porta justo ac nisl. Aliquam nisi erat, pellentesque sed, sagittis eu, fringilla sit amet, dolor. Nam ac mi. Pellentesque pede purus, mattis aliquet, semper nec, cursus a, orci. Duis bibendum nibh ac massa. Integer eu tortor. Aenean convallis quam at nunc. Nunc mollis tincidunt nisi. Suspendisse mauris odio, iaculis ut, feugiat vitae, ultrices in, tortor. Quisque at elit. In hac habitasse platea dictumst.

예제 예시