Hi,
With help from this tutorial
http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/
I started to create my own custom ui objects based on the ui widget
factory
I am hoping somebody could help me with the object syntax.
//////////////////////////////////////////////////////////
Question 1) Alternate way to call a method of the widget.
I am able to call method darker() of my widget using this syntax:
$().ready(function() {
var aGreen = $('#test4 .target').green4();
$('#test4 .target').green4('darker');
});
For me it is more natural to do the same thing using the below syntax
but
it does not work. Can someone tell me why it doesn't work and/or show
my the best practice approach
to create a variable of a widget object instantiation and reference it
later.
$().ready(function() {
var aGreen = $('#test4 .target').green4();
aGreen.darker();
});
///////////////////////////////////////////////////////////////////
Question 2) How make a function return something.
Supposing my widget has a getHello() method that returns a "hello"
string
How do I call that method of my widget. I tried the below code but it
does not work.
$().ready(function() {
var aGreen = $('#test4 .target').green4();
console.log("response: "+ $('#test4 .target').green4('getHello'));
});
///////////////////////////////////////////////////////////////////
Question 3) How to pass a parameter to a function.
Supposing I have setDarker(value) function that takes a parameter
How do I invoke that function. Below is the syntax I hope would
work but it doesn't.
$().ready(function() {
var aGreen = $('#test4 .target').green4();
aGreen.setDarker("big");
});
BAnd finally below is the html code I used for testing,
Also a link to the same code is here
http://docs.google.com/Doc?docid=0AbxHJxs0V9KvZGRucDVyNnJfMTdmZ3ZmOG4zNA&hl=en
Thank you for any help
David
//////////////////////////////////////////////////////////////////////////////////
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"; lang="en-
US"><head profile="http://gmpg.org/xfn/11";>
<title>Hacking at 0300 : Understanding jQuery UI widgets: A tutorial</
title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/
jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/
jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.widget('ui.green4', {
getLevel: function () { return this._getData('level'); },
setLevel: function (x) {
var greenlevels = this._getData('greenlevels');
var level = Math.floor(Math.min(greenlevels.length-1, Math.max
(0,x)));
this._setData('level', level);
this.element.css({background: greenlevels[level]});
},
_init: function() { this.setLevel(this.getLevel()); },
darker: function() { this.setLevel(this.getLevel()-1); },
setDarker: function(value){console.log("value: "+value)},
getHello: function(){"hello"},
lighter: function() { this.setLevel(this.getLevel()+1); },
off: function() {
this.element.css({background: 'none'});
this.destroy();
}
});
$.ui.green4.defaults = {
level: 15,
greenlevels:
['#000','#010','#020','#030','#040','#050','#060','#070','#080','#090','#0a0','#0b0','#0c0','#0d0','#0e0','#0f0',
'#fff']
};
</script>
<script type="text/javascript">
$().ready(function() {
var aGreen = $('#test4 .target').green4();
$('#test4 .target').green4('darker');
});
</script>
</head>
<body>
<div id ="test4">
<p class="target" >This is a test paragraph</p>
</div>
</body>
</html>
