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
74 lines (61 loc) • 2.01 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>How to get a button in toolbar</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">
// referer to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
$(document).ready(function() {
$('.summernote')
.on('summernote.change', function() {
var $buttons = [
$(this).summernote("toolbar.get", "ol"),
$(this).summernote("toolbar.get", "bold"),
$(this).summernote("toolbar.get", "italic")
];
for(var i = 0; i < $buttons.length; i++) {
var r = getRandomInt(0, 255);
var g = getRandomInt(0, 255);
var b = getRandomInt(0, 255);
$buttons[i].css('background-color', 'rgb(' + r + ',' + g + ',' + b + ')');
}
})
.summernote({ height : 300 });
});
</script>
</head>
<body>
<div class="container">
<h1>How to get a button in toolbar</h1>
<div class="summernote">
<h1>Button is in a toolbar.</h1>
<h3>When change event occurs, some buttons will change background color.</h3>
</div>
</div>
</body>
</html>