You need to include jQuery UI, or at least the jQuery UI Core, which contains the $.widget plugin. You can get it here
http://jqueryui.com/download - Richard On Wed, Mar 4, 2009 at 2:09 AM, Reggie Niccolo Santos < reggieniccolo.san...@gmail.com> wrote: > Hi, > > I'm quite new to jQuery and jQuery UI development (and even JavaScript for > that matter) and I've been trying out the examples from this tutorial: > > * > http://youngisrael-stl.org/wordpress/understanding-jquery-ui-widgets-a-tutorial/ > * > > and midway through the tutorial, I came across this error while trying out > the examples: > > TypeError: $.widget is not a function > at [Top-level script]() (TestJQueryProject/scripts/testwidget2.js:67) > > Here's the source code: > > *example-jquery-ui-widget.html:* > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " > http://www.w3.org/TR/html4/strict.dtd";> > <html dir="ltr" lang="en"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> > <title>Example: jQuery UI Widget</title> > <script type="text/javascript" > src="../lib/jquery/jquery.min.js"></script> > <script type="text/javascript" > src="../scripts/testwidget2.js"></script> > </head> > <body> > <p class="target">This is a paragraph called with .green4({ > level:3, > greenlevels: ['#000', '#00f', '#088', '#0f0', '#880', > '#f00', '#808', '#fff'] > }). > </p> > <input type="button" id="toggle" name="on" value="Turn green" /> > <input type="button" id="darker" name="darker" value="Darker" /> > <input type="button" id="lighter" name="lighter" value="Lighter" /> > </body> > </html> > > and *testwidget2.js:* > > $(function() { > var STR_DARKER = "darker"; > > var STR_LIGHTER = "lighter"; > > var STR_OFF = "off"; > > var BTN_LABEL_TURNGREEN = "Turn green"; > > var BTN_LABEL_TURNOFF = "Turn off"; > > $("#toggle").click(function() { > if ($(this).val() == BTN_LABEL_TURNGREEN) { > $(".target").green3(); > $(this).val(BTN_LABEL_TURNOFF); > } else { // ($(this).val() == BTN_LABEL_TURNOFF; > $(".target").green3(STR_OFF); > $(this).val(BTN_LABEL_TURNGREEN); > } > }); > > $("#darker").click(function() { > $(".target").green3(STR_DARKER); > }); > > $("#lighter").click(function() { > $(".target").green3(STR_LIGHTER); > }); > }); > > var Green3 = { > > _init: function() { > this.setLevel(15); > }, > > greenlevels: ["#000", "#010", "#020", "#030", "#040", "#050", "#060", > "070", "#080", > "#090", "#0a0", "#0b0", "#0c0", "#0d0", "#0e0", "#0f0", "#fff"], > > level: 0, > > getLevel: function() { > return this.level; > }, > > setLevel: function(x) { > this.level = Math.floor(Math.min(this.greenlevels.length - 1, > Math.max(0, x))); > this.element.css({ background: this.greenlevels[this.level] }); > }, > > darker: function() { > this.setLevel(this.getLevel() - 1); > }, > > lighter: function() { > this.setLevel(this.getLevel() + 1); > }, > > off: function() { > this.element.css({ background: "none"}); > this.destroy(); // use the predefined function > } > }; > > $.widget("ui.green3", Green3); // create the widget (the error occurs > at this line) > $.ui.green3.getter = "getLevel"; > > I'm using: > > *Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.6) Gecko/2009020911 > Ubuntu/8.04 (hardy) Firefox/3.0.6* > > Sorry if this turns out to be a simple typo error. I find it quite hard to > debug JavaScript code. > Hope you may be able to help me. Thanks in advance. > > -- > Warm regards, > Reggie > > > > --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to jquery-ui@googlegroups.com To unsubscribe from this group, send email to jquery-ui+unsubscr...@googlegroups.com For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
