1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta http-equiv="cache-control" content="public, max-age=60">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Daniel Hagnoul">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/le-frog/jquery-ui.min.css">
<style>
</style>
<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/i18n/jquery-ui-i18n.min.js"></script>
<script>
'use strict';
( function( $, W ){
var
pluginName = "Creneau",
defaults = {
'start_date' : false,
'end_date' : false,
'name' : '',
'datas' : {}
};
function Plugin( element, options ){
this.element = element;
this.options = $.extend( {}, defaults, options) ;
this._defaults = defaults;
this._name = pluginName;
this.init();
}
Plugin.prototype.init = function(){
var jObj = $( this.element );
jObj
.css({
'position' : 'relative',
'width' : '300px',
'height' : '300px',
'border' : '1px solid green',
'color' : this.options.datas.color,
'text' : jObj.text() + ' ' + this.options.name,
})
.on({
'click' : function( ev ){
console.log( ev.type );
},
'mouseenter' : function( ev ){
jObj.stop( false, true ).animate( { 'left' : '+=100px' }, 2000 );
},
'mouseleave' : function( ev ){
jObj.stop( false, true ).animate( { 'left' : '-=100px' }, 2000 );
}
});
};
$.fn[pluginName] = function( options ){
return this.each( function(){
if ( !$.data( this, "plugin_" + pluginName ) ){
$.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
}
});
}
})( jQuery, window );
$( function(){
$( '#myDiv' ).Creneau({
'name' : 'Le Creneau',
'datas' : {
'color' : 'red'
}
});
});
</script>
</head>
<body>
<div id="myDiv">
<p>Hello</p>
</div>
</body>
</html> |
Partager