<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Worf!</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style>
.worf_on { color: red; }
.klingon { color: green; }
</style>
</head>
<body>
<h1 data-worf-options='{ "foo" : "Compared to Klingons,", "bar" : "humans are fragile creatures." }'>Nice Legs... for a human.</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="../worf/jquery.worf.min.js"></script>
<script>
$(document).ready(function() {
// Public defaults (before instantiation):
$.fn.worf.defaults.classOn = 'klingon'; // Note: `options` will override these public defaults.
$.fn.worf.wrapper = function(data) {
this.wrap('<section />');
};
$h1 = $('h1');
// Instantiate plugin:
$h1.worf({
// Option defaults:
//classOn : 'worf_on',
foo : 'Klingons',
bar : 'never bluff.',
wrapper : 'section',
// Callbacks:
onInit : function(data) { console.log(this, data) },
onAfterInit : function(data) { console.log(this, data) },
onBeforeWrapper : function(data) { console.log(this, data) },
onAfterWrapper : function(data) { console.log(this, data) }
});
//$h1.worf('destroy');
});
</script>
</body>
</html>