alpaca
Version:
Alpaca provides the easiest and fastest way to generate interactive forms for the web and mobile devices. It runs simply as HTML5 or more elaborately using Bootstrap, jQuery Mobile or jQuery UI. Alpaca uses Handlebars to process JSON schema and provide
119 lines (88 loc) • 6.17 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery old</title>
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<!-- include libraries BS2 -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css"/>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!-- include summernote -->
<link rel="stylesheet" href="../dist/summernote.css">
<script type="text/javascript" src="../dist/summernote.js"></script>
<style>
.container {
position: absolute;
left: 10%;
right: 10%;
top: 10%;
bottom: 10%;
}
.custom-toolbar {
padding: 5px;
}
h1 {
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$('.summernote').on('summernote.init', function() {
console.log('summernote initialize!')
}).on('summernote.change', function() {
console.log(' changed content ')
}).on('summernote.keyup', function(event) {
console.log('you can use keyboard event', event);
}).on('summernote.enter', function(event) {
console.log('check enter key ');
}).summernote({ height : 300 });
});
</script>
</head>
<body>
<div class="container">
<h1>jQuery Custom Event Sample</h1>
<div class="summernote">
<article class="markdown-body js-file js-task-list-container is-task-list-enabled" data-task-list-update-url="https://gist.github.com/easylogic/95d2dbe03ce500bd0ae1/file/gistfile1.md">
<h1>
<a name="user-content-how-to-set-custom-event" class="anchor" href="#how-to-set-custom-event" rel="noreferrer"><span class="octicon octicon-link"></span></a>How to set custom event</h1>
<h2>
<a name="user-content-current-style-1" class="anchor" href="#current-style-1" rel="noreferrer"><span class="octicon octicon-link"></span></a>current style</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).summernote({
<span class="pl-en">onfocus</span> : <span class="pl-st">function</span>(<span class="pl-vpf">e</span>) {
<span class="pl-c">// to do something</span>
}
});</pre></div>
<h2>
<a name="user-content-jquery-plugin-style" class="anchor" href="#jquery-plugin-style" rel="noreferrer"><span class="octicon octicon-link"></span></a>jquery style</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.focus<span class="pl-pds">"</span></span>, <span class="pl-st">function</span>(<span class="pl-vpf">e</span>) {
<span class="pl-c">// to do something</span>
});</pre></div>
<h1>
<a name="user-content-event-list" class="anchor" href="#event-list" rel="noreferrer"><span class="octicon octicon-link"></span></a>Event List</h1>
<h2>
<a name="user-content-oninit" class="anchor" href="#oninit" rel="noreferrer"><span class="octicon octicon-link"></span></a>oninit</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.init<span class="pl-pds">"</span></span>, ...);</pre></div>
<h2>
<a name="user-content-onfocus" class="anchor" href="#onfocus" rel="noreferrer"><span class="octicon octicon-link"></span></a>onfocus</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.focus<span class="pl-pds">"</span></span>, ...);</pre></div>
<h2>
<a name="user-content-onenter" class="anchor" href="#onenter" rel="noreferrer"><span class="octicon octicon-link"></span></a>onenter</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.enter<span class="pl-pds">"</span></span>, ...);</pre></div>
<h2>
<a name="user-content-onblur" class="anchor" href="#onblur" rel="noreferrer"><span class="octicon octicon-link"></span></a>onblur</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.blur<span class="pl-pds">"</span></span>, ...);</pre></div>
<h2>
<a name="user-content-onkeyup" class="anchor" href="#onkeyup" rel="noreferrer"><span class="octicon octicon-link"></span></a>onkeyup</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.keyup<span class="pl-pds">"</span></span>, ...);</pre></div>
<h2>
<a name="user-content-onkeydown" class="anchor" href="#onkeydown" rel="noreferrer"><span class="octicon octicon-link"></span></a>onkeydown</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.keydown<span class="pl-pds">"</span></span>, ...);</pre></div>
<h2>
<a name="user-content-onchange" class="anchor" href="#onchange" rel="noreferrer"><span class="octicon octicon-link"></span></a>onChange</h2>
<div class="highlight highlight-javascript"><pre>$(<span class="pl-s1"><span class="pl-pds">"</span>.summernote<span class="pl-pds">"</span></span>).on(<span class="pl-s1"><span class="pl-pds">"</span>summernote.change<span class="pl-pds">"</span></span>, ...);</pre></div>
</article>
</div>
</div>
</body>
</html>