Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
61 lines (54 sloc) 2.893 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" lang="en" xml:lang="en">
<head>
<title></title>
<script type="text/javascript" src="lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="src/jquery.livepreview.js"></script>
<script type="text/javascript">
/*
Extends the textarea and preview DIV with the live preview plugin.
*/
$(function() {
$('textarea.source').livePreview({
previewElement: $('div.preview'),
allowedTags: ['p', 'strong', 'br', 'em', 'strike'],
interval: 20
});
});
</script>
<link rel="stylesheet" href="lib/demo-style.css" type="text/css" />
</head>
<body>
<div id="main">
<h1>Live Preview jQuery Plugin Demo</h1>
<p>
Just start typing into the TextArea below.
The following tags are allowed: <code>['p', 'strong', 'br', 'em', 'strike']</code>
</p>
<p>
Be sure to also type in tags which are not allowed.
</p>
<textarea class="source"></textarea>
<label>Preview Area</label>
<div class="preview"></div>
<hr />
<label>The following HTML provides a textarea and div for the preview.</label>
<blockquote>
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">textarea</span> <span class="attr">class</span><span class="kwrd">=&quot;source&quot;</span><span class="kwrd">&gt;&lt;/</span><span class="html">textarea</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">label</span><span class="kwrd">&gt;</span>Preview Area<span class="kwrd">&lt;/</span><span class="html">label</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">=&quot;preview&quot;</span><span class="kwrd">&gt;&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre>
</blockquote>
<label>And the following JavaScript sets up the preview</label>
<blockquote>
<pre class="csharpcode">
$(<span class="kwrd">function</span>() {
$(<span class="str">'textarea.source'</span>).livePreview({
previewElement: $(<span class="str">'div.preview'</span>),
allowedTags: [<span class="str">'p'</span>, <span class="str">'strong'</span>, <span class="str">'br'</span>, <span class="str">'em'</span>, <span class="str">'strike'</span>],
interval: 20
});
});</pre>
</blockquote>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.