Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
68 lines (65 sloc) 4.8 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CMTextConstrain</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,fieldset, dl, dt, dd, ol, ul, li, form, label, caption {margin: 0;padding: 0;border: 0;outline:0;font-family:Arial,Helvetica,sans-serif;text-align:left;color:#000;white-space:normal}
input, textarea, select {font-family:Arial,Helvetica,Sans-serif}
body {line-height: 1.2em;color:#999;font-size:10pt}
ol, ul {list-style: none}
.cmFloatLeft{float:left}
.cmFloatRight{float:right}
#main{margin:1em;width:640px}
.hidden{display:none;}
.cmConstrainContainer{background-color:#f00}
.cmShowHide{text-decoration:none}
.explanation{margin:1em;padding-bottom:1em;border-bottom:1px solid #000}
.explanation a{color:#33f}
.explanation ul{padding-top:.5em}
.explanation ul li{padding-bottom:.5em}
pre{border:1px dashed #333;color:#000;background-color:#eee;margin:.5em 2em;padding:.5em}
p{margin:.5em 0}
span.note{color:#666}
h1{margin:.5em}
</style>
</head>
<body>
<h1>cmtextconstrain plugin for jQuery</h1>
<div class="explanation">
<h4>Use:</h4>
<pre><code>$('.cmTextElement').cmtextconstrain({
event: 'click', <span class="note">// for future extensibility to allow other events</span>
onExpose: function(){}, <span class="note">// a function to be run once the element is exposed</span>
onConstrain: function(){}, <span class="note">// a function to be run once the element is constrained</span>
restrict: {type: 'words', limit: 6}, <span class="note">// type can be 'words' or 'chars'</span>
showControl: {string: '[&nbsp;+&nbsp;]', title: 'Show More', addclass: 'cmShowHide'}, <span class="note">// element shown to expose</span>
hideControl: {string: '[&nbsp;-&nbsp;]', title: 'Show Less', addclass: 'cmShowHide'}, <span class="note">// element shown to constrain</span>
trailingString: '...' <span class="note">// string to show at end of truncated text</span>
});</code></pre>
<h4>Methods:</h4>
<pre><code>$('.cmTextElement').cmtextconstrain('destroy'); <span class="note">// destroy the instance of cmtextconstrain</span></code></pre>
<ul>
<li><a href="js/jquery/jquery.cmtextconstrain.js" target="_blank">View jquery.cmtextconstrain.js</a></li>
</ul>
</div>
<div id="main">
<h2 id="cmTextHeaderElement" class="cmTextElement">Shorter Than the Limit Header</h2>
<p class="cmTextElement">No ID given. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nulla justo, condimentum dapibus vulputate ac, feugiat in magna. Morbi congue, lectus eu tincidunt gravida, velit sem rutrum dolor, id convallis mauris dui vitae orci. Integer ornare commodo vulputate. Vivamus eget dignissim arcu. Sed non odio ac massa faucibus malesuada. Donec orci ante, ullamcorper sed consequat sit amet, malesuada vitae orci. Proin ut sapien at quam tristique malesuada vitae quis nisl. Cras et nunc sapien, commodo imperdiet erat. Sed non quam quis massa ultricies faucibus sed nec tellus. Nullam pellentesque sodales egestas. Aenean accumsan volutpat lectus, eget tincidunt diam pellentesque a. Donec lacinia eleifend nibh non tempus.</p>
<h2 id="cmTextHeaderElement" class="cmTextElement">Longer Than The Limit Header will be Constrained</h2>
<p id="cmTextParagraph" class="cmTextElement">Random-hyphen! This is the text to which we will be applying the constraint. It is a paragraph element. Sed non quam quis massa ultricies faucibus sed nec tellus. Nullam pellentesque sodales egestas. Aenean accumsan volutpat lectus, eget tincidunt diam pellentesque a. Donec lacinia eleifend nibh non tempus.</p>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script src="js/jquery/jquery.cmtextconstrain.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.cmTextElement').cmtextconstrain({
restrict: {type: 'words', limit: 6},
showControl: {string: '[&nbsp;+&nbsp;]', title: 'Show More', addclass: 'cmShowHide'},
hideControl: {string: '[&nbsp;-&nbsp;]', title: 'Show Less', addclass: 'cmShowHide'},
trailingString: '...'
});
});
</script>
</body>
</html>