Archive for February, 2010
CodeIgniter from Scratch: The Calendar Library
Friday, February 26th, 2010
In this tenth episode of the CodeIgniter From Scratch screencast series, we will be exploring the Calendar library. We are also going to utilize the database class and jQuery AJAX. I will show you how to build a simple and CSS-styled calendar page, which will have the ability to store and display content for each day.
Catch Up
- Day 1: Getting Started With the Framework
- Day 2: Database Selecting Methods
- Day 3: Sending Emails
- Day 4: Newsletter Signup
- Day 5: CRUD
- Day 6: Login
- Day 7: Pagination
- Day 8: AJAX
- Day 9: File Uploading and Image Manipulation
- Day 10: The Calendar Library
Day 10: The Calendar Library
Other Viewing Options
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
MySQL-wrapper
Friday, February 26th, 2010
It can execute SQL SELECT, INSERT, UPDATE and DELETE queries by passing parameters that define tables, fields, values and condition clauses.
classes, rss
Classes | No Comments »
IMDB
Friday, February 26th, 2010
It sends a request to IMDB site to perform a search for a given movie.
The class parses the retrieve search results page and redirect to the page of the searched movie.
classes, rss
Classes | No Comments »
Design a Prettier Web Form with CSS 3
Thursday, February 25th, 2010
Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!
Prefer a Video Tutorial? Join Plus!
If you’re more of a visual learner, you can watch a video version of this article instead. Simply help give back to Nettuts+ by signing up for a Plus membership, which grants you access to the Plus content for ALL of our sites – all for $9 per month.
Already a Member?
Our Final Product
Subtle background gradients give depth to the fields while shadows lift them from the page. Even more impressive is that this is done without any images at all.
By following this tutorial you will not only end up with a lightweight and beautiful form, you’ll also learn and understand new CSS3 techniques, such as box-shadow, gradients, opaque colors, and rounded corners.
CSS3?
CSS3 is the next generation of CSS that is currently under development, but that doesn’t stop browsers from already implementing many of the prominent features.
- Google Chrome (4.0)
- Mozilla Firefox (3.6)
- Safari (4.0)
Opera has greater levels of support for CSS3 (except background gradients) in their next version (10.50 Beta).
Internet Explorer has also stated that they will have improved CSS3 support with version 9; however, only time will tell how true this is.
The things you can do with CSS3 (shadows, gradients, round corners, animations, etc) all serve a purpose of creating beautiful effects without having to integrate images or scripts, resulting in quicker loading times.
Step 1: The HTML
Before we begin styling we need something to style, so here is the form.
<form class="form"> <p class="name"> <input type="text" name="name" id="name" /> <label for="name">Name</label> </p> <p class="email"> <input type="text" name="email" id="email" /> <label for="email">E-mail</label> </p> <p class="web"> <input type="text" name="web" id="web" /> <label for="web">Website</label> </p> <p class="text"> <textarea name="text"></textarea> </p> <p class="submit"> <input type="submit" value="Send" /> </p> </form>
Each field is inside a paragraph with its own class, and the three first fields have a label explaining their use.
How does it look without any styling?
Functional, but dull. Let’s start pimping out this form.
Step 2: Basic Styling
Before we dive into the CSS3 techniques we need to create a basic layout for browsers that don’t yet support CSS3.
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF;
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
}
How does our effort look so far?
Not too bad. Now, let’s begin our enhancements with the more advanced CSS3.
Step 3: Box-shadow
Box-shadow does exactly what it sounds like: creates a shadow around a box.
The syntax for box-shadow is fairly simple:
box-shadow: <color> <horizontal offset> <vertical offset> <blur>;
Horizontal offset is the placement of the shadow from left to right. If you set it to “2px” the shadow will be 2 pixels to the right. Vertical offset is the same but up/down.
Blur is simply the amount of blur the shadow will have, where 0 is minimum.
This is how our box-shadow will look like:
input, textarea {
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
Here we have three lines that look similar.
- box-shadow is pure CSS3 and so far only used in Opera.
- -webkit-box-shadow is for browsers using the Webkit engine, like Chrome and Safari.
- -moz-box-shadow is for browsers using Mozilla’s Gecko engine, like Firefox, Camino, Flock, and SeaMonkey.
Until CSS3 becomes the standard, you have to use all three methods. Internet Explorer has their own weird way of doing things, and although it’s capable of making a shadow it will not look the way we want it. 3
You might notice that there was no normal RGB color used, this is because we’re using two CSS3 techniques on the same line: box-shadow and rgba.
RGBA (Red Green Blue Alpha) is, simply put, color with opacity.
The syntax for rgba is this:
rgba(<red>,<green>,<blue>,<opacity>);
It’s perfectly fine to use a light grey for the shadow’s color, but if you are using any other background than white it will look strange. An opaque black on the other hand will work well no matter what background.
So our box-shadow is black with 10% (0.1) opacity, no horizontal and vertical offset, and with a blur of 8 pixels. It will look like this:
The keyword here is subtlety. If we apply too much shadow, it will look ugly; if we apply too little, it won’t have an effect. Basically, we don’t want anyone to notice the shadow, but still have it lift the fields from the page.
Step 4: Background Gradient
While the box-shadow syntax is easy to grasp, gradients are trickier. With CSS3 gradients, you can create some amazing shapes — from dart boards to rainbows — so as you can imagine it has a more complex syntax. Thankfully, we don’t need to code a rainbow today; we just need a straight linear gradient.
-webkit-gradient( linear, <start>, <end>, from(<color>), to(<color>) )
-moz-linear-gradient(<start> <angle>, <color>, <color>)
As you can see, the methods are quite different, so this will require some explaining.
Webkit gradients require a start point (X and Y), an end point (X and Y), a from-color, and a to-color. The angle is determined by where start and end are, and the gradient will be colored with the “from(color)” fading to “to(color)”.
Gecko gradients, on the other hand, require only a start point (Y), and at least two colors. If you want a gradient going from top to bottom (90deg) you don’t need to assign an angle.
So to get a simple linear gradient from top to bottom – black to white – we would do like this:
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#FFFFFF)); background: -moz-linear-gradient(top, #000000, #FFFFFF);
And it would appear like this:
(I will continue to use the black color for demonstration; at the end, I’ll switch to the real color we will be using for the form.)
Now that we have the basics out of the way, we can start making the form look how we want. The first thing we want to do is limit the height of the gradient so that it looks the same for both input fields and textarea; otherwise the gradient would fill the entire height, like this:
This is how we limit the background gradient to 25px in Webkit and Firefox:
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #000000, #FFFFFF 25px);
}
For Webkit, instead of setting the end point to “left bottom,” we set it to “left 25″, indicating it will end 25 pixels from the top.
For Gecko, we do the same thing by simply adding a “25px” value to the end color.
And the result is:
The second thing we want to do is create a thin white line at the top of the gradient, to give the subtle visual impression that the field is raised. How important can a single pixel be? Take a look at this article: Adding Depth with Pixel Perfect Line Work.
To create this, we’ll need three points in the gradient. In the previous example, our gradient had two points: top and bottom (black→white). Here, we’ll add an additional point in between them (white→black→white).
To illustrate:
How do we do this?
input, textarea {
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #000000), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #000000 1px, #FFFFFF 25px);
}
In Webkit we use the color-stop function, but unfortunately it doesn’t support values in pixels, only percentage. But thanks to paying attention to math in school we figure that 4% of 25px is 1px.
For Gecko, we simply add a third color between the first two and give it a “1px” value, indicating that it should end 1 pixel from the top.
The thin white line:
Now, let’s change the black color (#000000) to a more fitting light grey (#EEEEEE):
Just some small detail work remains.
First, we’ll create a darker shadow for the fields when the user hovers or selects it:
input:hover, textarea:hover,
input:focus, textarea:focus {
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
It’s just an increase from 10% to 15%, but what we are after is, once again, subtlety.
The last thing we do is create some rounded corners for the button3 to further make it stand out from the other elements:
.submit input {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
The value is the radius the corners will be rounded by. The standard border-radius is intentionally left out since Opera seems to have some problem with it.
Result:
Step 5: The Other Browsers
Now we just need to take care of the browsers that don’t support CSS3 yet (IE), or only partly does (Opera).
We want the different versions (CSS3 and the normal) to look as similar as possible, and the simplest thing is to go back to the old way: images.
Simply take a screenshot of the beautiful CSS3 form and save a small portion of the gradient as an image.
Next, use it in the input and textarea as a background. As long as the CSS3 gradients comes after the background image, browsers that support CSS3 will ignore the image.
input, textarea {
background: #FFFFFF url('bg_form.png') left top repeat-x;
}
And now we are done! Enjoy your form and I hope you have learned something.
Final Preview
Chrome (4.0), Firefox (3.6), Safari (4.0):
Opera (10.50b):
Internet Explorer (8):
Full CSS
input, textarea {
padding: 9px;
border: solid 1px #E5E5E5;
outline: 0;
font: normal 13px/100% Verdana, Tahoma, sans-serif;
width: 200px;
background: #FFFFFF url('bg_form.png') left top repeat-x;
background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));
background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}
textarea {
width: 400px;
max-width: 400px;
height: 150px;
line-height: 150%;
}
input:hover, textarea:hover,
input:focus, textarea:focus {
border-color: #C9C9C9;
-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
.form label {
margin-left: 10px;
color: #999999;
}
.submit input {
width: auto;
padding: 9px 15px;
background: #617798;
border: 0;
font-size: 14px;
color: #FFFFFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Conclusion
That’s all there is to it! With minimal effort, and the power of CSS 3, we’ve turned a bland and ordinary form into something beautiful. Thanks so much for reading, and feel free to ask any questions that you might have below.
Write a Plus Tutorial
Did you know that you can earn up to $600 for writing a PLUS tutorial and/or screencast for us? We’re looking for in depth and well-written tutorials on HTML, CSS, PHP, and JavaScript. If you’re of the ability, please contact Jeffrey at nettuts@tutsplus.com.
Please note that actual compensation will be dependent upon the quality of the final tutorial and screencast.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
PDO wrapper
Thursday, February 25th, 2010
It can establish a connection to a MySQL database server and execute SELECT prepared queries with parameters from an array, retrieve query results into arrays, execute INSERT or UPDATE queries using parameters that define the tables, fields, values and conditions.
classes, rss
Classes | No Comments »
randlib
Thursday, February 25th, 2010
It provides different functions to generate strings with random characters of a given length from a certain range of desired characters.
classes, rss
Classes | No Comments »
How to Design a Website with Fireworks: New Plus Tutorial
Wednesday, February 24th, 2010
In this week’s plus video tutorial, we’ll teach you how to design a home page for a website using Adobe Fireworks CS4. Over the course of the video, you’ll learn numerous tips and tricks to accomplish the final design, including how to work with a grid. Help give back to Nettuts+, and join Plus!
In Depth Video Training
Final Design
Join Tuts Plus
For those unfamiliar, the family of TUTS sites runs a premium membership service called “TUTSPLUS”. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Aetuts+, Audiotuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
Coding your First jQuery UI Plugin
Wednesday, February 24th, 2010
jQuery contains the fn.extend() method, which makes authoring jQuery plugins quite easy, allowing us to write code that is used in exactly the same way as other jQuery methods. jQuery UI also contains structures that make authoring custom jQuery UI plugins easy. So that’s what we’ll be looking at over the course of this tutorial. The methods used differ from that of standard jQuery plugins, and there are stricter conventions that should be followed, which is why I feel the topic is deserving of an article.
Over the course of this tutorial, I’ll show you the coding conventions and general guidelines that should be adhered to when authoring plugins for jQuery UI. We’ll be creating a simple plugin that just adds captions to images on the page. It’s purposely simple so that we can focus on what is needed to make a jQuery UI plugin without getting lost in the code. Anyone that’s written a jQuery plugin should have no problems. Knowledge of jQuery UI may help but shouldn’t be essential to complete this tutorial. Let’s get started.
Getting Started
We’ll need a copy of jQuery as well as a couple of files from jQuery UI, but it needs to be jQuery UI 1.8 (this can be found on the blog). Create a working directory somewhere on your machine called jqueryui-plugin, then inside this create a css folder, a js folder and an img folder (the images used in this tutorial can be found in the code download).
Download the library and unpack it somewhere accessible. We only need a few files from the archive, namely the jQuery source file which is in the root of the archive as jquery-1.4.1.js, and the jquery.ui.core.js and jquery.ui.widget.js files, which are both in the ui folder. Grab these and put them into the js folder in your working directory. We’ll be making light use of the CSS framework as well, so we’ll need one of the theme style sheets available with the current stable version of jQuery UI (I used ui-lightness in this example).
We’ll be making a captionator widget, so we’ll also need a page, with a bunch of images on it, to develop/test the plugin with. This example uses the following page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jQuery UI Captionator</title> <link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css"> <link rel="stylesheet" type="text/css" href="css/ui.captionator.css"> </head> <body> <img src="img/1.jpg" alt="Royal Air Force Eurofighter Typhoon"> <img src="img/2.jpg" alt="A British military GR-9 Harrier"> <img src="img/3.jpg" alt="Two RAF Tornado GR-4s pull away from a KC-135 Stratotanker after refueling"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.ui.core.js"></script> <script type="text/javascript" src="js/jquery.ui.widget.js"></script> <script type="text/javascript" src="js/jquery.ui.captionator.js"></script> </body> </html>
We’ll keep things pretty simple for now; we’ve just three images on the page, followed by four script files; three link to the jQuery and jQuery UI source files, the fourth to our plugin’s source file which we’ll create shortly. The jquery.ui.core.js file is required by all jQuery UI widgets/plugins. The jquery.ui.widget.js file is the widget factory and allows for the creation of consistent widgets that share common API functionality. Most library components require this, and we’ll be using it to create our plugin.
Creating the Plugin File
Create a new JavaScript file and save it as jquery.ui.captionator.js in the js folder; we should keep to jQuery UI’s naming convention, which has just been updated in the 1.8 version of the library, and use jquery.ui.plugin_name.js. Add the following code to the new file:
(function($) {
})(jQuery);
All of the code that makes up our plugin should be encapsulated within a self-executing anonymous function. The jQuery object is passed into this function and is used inside the function via the $ alias; this is to ensure that the plugin is compatible with jQuery’s noConflict() method. This is a specified requirement and should always be adhered to.
Next we need to define the plugin; add the following code to our anonymous function:
$.widget("ui.captionator", {
});
The pattern for using the widget factory is simple to use, we just call the widget() method specifying the name of the plugin as the first argument, and an object literal containing the properties and methods that make the plugin function. This allows our plugin to be called (and created) using the commen jQuery syntax $(“element_caption_applied_to”).captionator(); like any other jQuery or jQuery UI method.
The widget factory provides a number of these properties and methods for us; for example, we can set the default options for the plugin using the options property, and add an initialisation function that is executed automatically by the widget factory as soon as an instance of the plugin is invoked. Within the object that appears as the second argument in the previous code add the following code:
options: {
location: "bottom",
color: "#fff",
backgroundColor: "#000"
},
These are the only options we’ll use in our example plugin; users (and by users I mean implementers, not end users) of the plugin can specify the position of the caption to be either at the top of the image it is called on, or the bottom, they can specify the color of the text on the caption, or change the background-color of the caption. To change a configurable option of any jQuery UI widget prior to initialisation the implementing developer would just use something like this:
$(“element_caption_applied_to”).captionator({ location: “top” });
Next we can create our initialisation function, after the options object add the following method:
_create: function() {
var self = this,
o = self.options,
el = self.element,
cap = $("<span></span>").text(el.attr("alt")).addClass("ui-widget ui-caption").css({
backgroundColor: o.backgroundColor,
color: o.color,
width: el.width()
}).insertAfter(el),
capWidth = el.width() - parseInt(cap.css("paddingLeft")) - parseInt(cap.css("paddingRight")),
capHeight = cap.outerHeight() - parseInt(cap.css("paddingTop")) + parseInt(cap.css("paddingBottom"));
cap.css({
width: capWidth,
top: (o.location === "top") ? el.offset().top : el.offset().top + el.height() - capHeight,
left: el.offset().left,
display: "block"
});
$(window).resize(function(){
cap.css({
top: (o.location === "top") ? el.offset().top : el.offset().top + el.height() - capHeight,
left: el.offset().left
});
});
},
The method name should begin with an underscore as jQuery UI prevents any plugin method that begins with an underscore from being called from outside of the plugin, so this stops it being accidentally called from the HTML page. Any method that we begin with an underscore will be protected in this way.
The majority of our initialization method is a series of variables; within our function the keyword this refers to an object passed into the method which represents the instance of the plugin. The first variable caches a reference to the current instance of the plugin; the _create method is called for each element that the plugin method is called on, which could be a single element or several.
We can access the default options of the plugin (which are overridden automatically if the implementer configures any of them) using the options property of the object; we cache this in the second variable. The element that the plugin method (captionator()) was called on, which in this example would be an image, can be accessed using the element property of the object. We store this in the third variable.
We use the fourth variable to store a reference to the new caption element, which is built from a simple <span>; the <span> has its innerText set to the alt attribute of the current image, and several class names are added to it; we give it the ui-widget class name so that it can pick up some default styling from the current jQuery UI theme. We also give it a custom class name so that we can add some of our own styling.
Next we need to set some CSS properties; we’ll be using a separate style sheet for some styles, but certain things, such as the color and background-color styles are controllable via configurable options, so we need to set these using the plugin. The width of the caption needs to match the width of the image that it overlays, so we also need to determine this and set it programmatically. Finally the new <span> is injected into the page directly after the target image.
Once the caption has been inserted, it needs to be sized and positioned; the only way it can be sized accurately is if it already exists in the DOM and has CSS rules applied to it, such as the font-size. This is why we append the caption to the page, and then determine its exact dimensions, which are then stored in the variables capWidth and capHeight.
Once the caption has been appended to the page (and only then) we can work set the correct width, height and position of each caption, which we set using the css() method once again. The captions are actually completely separate from the images; they are inserted directly after each image and then positioned to appear to overlay the images, after all, we can’t append the <span> as a child of the <img>.
This is fine, until the browser is resized, at which point the images move but the captions don’t because they are absolutely positioned. To remedy this, we’ve used a basic resize handler attached to the window which simply repositions each caption to the new position of its image. This event handler is the last thing in our initialization method.
Another method that our plugin should expose is the destroy() method which is common to all jQuery UI plugins. We must provide an implementation of this method in order to clean up after our plugin. For our example plugin, the method can be as simple as this:
destroy: function() {
this.element.next().remove();
$(window).unbind("resize");
},
All we need to do is remove the captions and unbind our window resize handler. This method can be called by an implementer using the plugin so we shouldn’t begin this method name with an underscore. To call this method, the implementer would use $(“element_caption_attached_to”).captionator(“destroy”); which is how any of our public methods would be called.
We need to provide another method controlled/executed by the widget factory; we saw earlier how a developer could change a configurable option prior to initialisation, but what about after initialisation? This is done using the option method using the following syntax: $(“element_caption_attached_to”).captionator(“option”, “location”, “top”); so we need to add the built-in method _setOption to handle this:
_setOption: function(option, value) {
$.Widget.prototype._setOption.apply( this, arguments );
var el = this.element,
cap = el.next(),
capHeight = cap.outerHeight() - parseInt(cap.css("paddingTop")) + parseInt(cap.css("paddingBottom"));
switch (option) {
case "location":
(value === "top") ? cap.css("top", el.offset().top) : cap.css("top", el.offset().top + el.height() - capHeight);
break;
case "color":
el.next().css("color", value);
break;
case "backgroundColor":
el.next().css("backgroundColor", value);
break;
}
}
We start this method with an underscore because the implementer uses option, not _setOption to actually change the options; we don’t need to worry about how this is handled, we just need to provide this method to deal with anything specific to our plugin. Because this method already exists in the widget factory we should call the original method, which we do first of all in our method using the prototype of the Widget object, specifying the method name (_setOption in this case but we could do it for other built-in methods as well) and use apply to call it. We can then proceed with the code specific to our plugin.
The function will automatically receive two arguments which are the option to change and the new value. We cache some commonly used elements, such as the image and the caption, and obtain the current height of each caption. We then use a simple switch-case statement to handle each of our three options being changed. Repositioning the captions is the most complex, but is still quite trivial and similar to how we positioned them initially.
Adding Events
It’s important to add events that developers using your plugin can add callbacks for so that they can react to different things happening when users interact with the widget in some way. The widget factory handles most of this task for us, all we need to do is trigger the event. This plugin doesn’t really do much, but we could still trigger an event after each caption is added to the page; to do this add the following code directly before the resize event handler:
self._trigger("added", null, cap);
That’s all we need to do! A single line of code and we have a custom event that can be reacted to. We call the _trigger() method of the plugin instance (which we stored in the variable self) and pass the method three arguments; the first is the name of the event, the second is for the event object (we don’t need to use this in our example plugin, hence the null value) and the third is a reference to the caption element. The widget factory will automatically pass the event object (if supplied) and the data we pass in the third parameter to a callback function that uses the added event. A developer could hook into this event using the following syntax: $(“element_caption_attached_to”).captionator({ added: function(e, ui){ //do stuff });
Styling the Plugin
We only need a very tiny style sheet for our plugin, literally we have just three styles. It’s almost not even worth creating a separate file for the styles! But we will, so create a new file called ui.captionator.css, which is the required format for plugin style sheets, and save it in the css directory. Add the following styles to it:
.ui-caption { display:none; position:absolute; padding:10px; }
That’s all there is to it. Our plugin is now functionally and visually complete. The captions should appear like this:
Summary
Like jQuery’s plugin creation method fn.extend(), jQuery UI also has its own mechanism that allows developers to quickly and easily write robust and scalable plugins that meet the jQuery UI projects high standards, although in terms of what it actually does for us, it’s even better that jQuery. The widget factory has been created in such a way that pretty much all of the hard work is taken out of custom plugin creation.
It’s easy to work with the methods provided by the widget factory to add methods to our plugins that are common across UI widgets, such as the destroy and option methods, which implementing developers would expect to find in any plugin. We also saw just how easy it is to trigger custom events that developers can use to react to interactions or occurrences with the widget.
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.
learn, php, rss, tutorials
PHP Tutorials | No Comments »
jQuery Helper
Wednesday, February 24th, 2010
It intercepts calls to class functions that do not exist and generates a string with JavaScript code that would be used to call jQuery library functions passing the argument values passed to the class call after converting them into JavaScript Object Notation.
The class calls return the instance of the current object which can be used to also retrieve the generated JavaScript code string.
classes, rss
Classes | No Comments »
Another simple MVC
Wednesday, February 24th, 2010
It provides a database access class, a front controller class and a template processing class.
to get started edit the .htaccess and make the rewrite base fit your server
then edit /config/define.php to set your database access.
by now what you may do is: set up a nice error handler function (http://php.net/manual/en/function.set-error-handler.php) and if you need it setup a cache handler too(may record an ob_start callback, and gzencode the content you are sending to browser).