El Blog del Antonio » JQuery

jQuery Livebuttons Plugin

Antonio Ramirez — Wed, 15 Dec 2010 15:45:23 +0000

Introduction

I normally develop CMS (control management systems) based on a heavy use of AJAX, and I normally endup writing tones of jQuery functions for different IDs and/or CLASSes. Thinking to create a library that will free me to create the same functions again and again and for different classes I thought about this simple plugin. The reason was that if I was to create a new CMS for my beloved Yii framework, I just wanted to have a system where, by setting some meta data into the HTML elements, the client script will smartly know what to do. I didn’t want to necessary worry about different classes on my client scripts, I wanted to be just one class.

The idea behind goes a bit further and has something to do with Yii, I want to create extensions that will take care of the correct rendering of a button without having to worry about the client scripts **and** also the same extension could actually call jquery commands easily. I emphasized **and** because Yii already provides an ajaxLink and an ajaxButton but they are not listened to perform client jquery executions and that, as seen in its forums, is causing problems to PHP programmers a lot of times.

Also, I envision an environment where through this, Yii extension designers will be able to create CMS styles, completely different that the one coming from Yii, so Yii users could easily integrate a new layout without even tweaking CSS, or Themes, or Layouts, just their views and by integrating some specialized widgets API, user will be able to program a gallery (for example) with just one line of code on their views. Enough talking, here is the plugin for you to test it and tell me what do you think.

How to use

Include jquery and jquery.livebuttons.js on your document’s head and start monitoring for livebuttons like this:

//
// .selector is the class name the HTML elements have
$('.selector').livebuttons();
$('.selector').livebuttons( options );
//
// we can have more than one
$('.otherselector').livebuttons( otheroptions );

Options

useFirebug

A useful property for debuggin processes. If set to true all logs will be displayed on firebug console (or chrome).

var options = {
    useFirebug: true
}
$('.selector').livebuttons( options );

events

An array of options where to specify the events to monitor. In future releases, we will be able to specify which methods correspond for certain events.

var options = {
    events: ['click','mouseover'] // not a good practice though *yet*
}
$('.selector').livebuttons( options );

methods

This is the most interesting part of the plugin. We could implement our own javascript methods to be used with livebuttons. All methods will receive a ‘command’ parameter, which is actually the object in the meta-data of the HTML element (see below on the examples provided for default methods).

var options = {
    methods: {
        alert: function( command ) {
              alert( command.message );
        }
   }
}
$('.selector').livebuttons( options );

When designing our own javascript functions to be attached to the plugin, we can access internal parser functions with this keyboard. All functions receive a command object and also a reference to the options object. This object have a reference to the parser it self and we could easily access parser’s functions by using this.parser.

The Parser

If you look at the code inside the plugin, you will see that the parser has a couple of good methods to use:

stringify

Converts an object to its JSON representation string

createIFrame

Creates an iframe to be used with FORMs with multipart/form-data. So you can easily send files to the server without the need of reloading the page. Check at its code to see its

removeIFrame

Removes the iFrame previously created with parser.createIFrame() method.

parseJSON

Parses a JSON string and converts it into an object. I know jQuery comes with one, but it throws an error when you include a function into a command object’s property.

Default Methods

You have a couple of methods that already come with the plugin. You can easily override them if required. Here they are:

ajax

Its name is self-explanatory. It receives a command object on the following format:

{method:'ajax',url:'',data:{},success:function(){},error:function(){}}

Example of live button markup

test ajax

getscript

Its calling jQuery’s getScript method. It receives a command object on the following format:

{method:'getscript',url:''}

Example of live button markup

test getscript

jquery

Its calling any jQuery’s method. It receives a command object on the following format:

{"method":"jquery","jqmethod": "","target":"","arguments":["url",function(){}]}

Example of live button markup

test load jquery function

Remarks

As previously said, all functions also receive the command object extracted from the HTML element, but that’s not all. The parser automatically includes a jquery reference of the HTML element to the command’s element property.

var options = {
    methods: {
        alert: function( command ) {
              alert( command.message );
             // do not use $( command.element ) as it would like $( $( element ) )
              command.element.attr('title','I have already been clicked');
        }
   }
}
$('.selector').livebuttons( options );

Demo

For the sake of having a demo (I will build a better one) the following script will create a live button that can perform jquery ‘append’ commands. Please note that when you load new content via AJAX on a page that has the livebuttons plugin that you have successfuly initiated, the plugin will also listen to the specified events to those livebuttons loaded via AJAX.

Tweet this!

jqPrettyPhoto Extension for Yii

Antonio Ramirez — Thu, 21 Oct 2010 16:37:52 +0000

I am currently developing a site for a real estate business and it is all built with Yii Framework -I am alone here so I need the best allies for this job . During this development I come up with the creation of some cool extensions that I am, of couse, going to share with all of you.

Introducing jqPrettyPhoto

This extension is making use of the grrrreat jQuery plugin called PrettyPhoto. Here is its description in detail:

rettyPhoto is a jQuery lightbox clone. Not only does it support images, it also support for videos, flash, YouTube, iframes. It’s a full blown media lightbox.

It is very easy to setup, yet very flexible if you want to customize it a bit. Plus the script is compatible in every major browser, even IE6.

It also comes with useful APIs so prettyPhoto can be launched from nearly anywhere (yes, that includes Flash)!

How to Install

Unzip the contents of the downloaded package below and copy its contents into your application’s protected/extensions folder.

How to Use

Once we have move the contents of the zipped file into the extensions folder we are ready to go. Use it at your own will into your views like this:


Yii::import('ext.jqPrettyPhoto');
jqPrettyPhoto::addPretty('.gallery a',jqPrettyPhoto::PRETTY_GALLERY,jqPrettyPhoto::THEME_FACEBOOK);

Wow! That was easy! Please allow me to explain the addPretty function. It comes with three parameters:

1) element/s selector: the JQUERY SELECTOR to the links you want to set pretty photo to. In the example above I had the following on the view’s HTML:

2) The second parameter is of the value jqPrettyPhoto::PRETTY_GALLERY or jqPrettyPhoto::PRETTY_SINGLE, which tells the extension whether the selector will be a list of a gallery images or just a single file.

3) The third one is what theme to use -please refer to jqPrettyPhoto.php’s code to see more options on this one.

Download

** If you have problems please use this link.

download: jqPrettyPhoto Yii Extension (72.29KB)
added: 21/10/2010
clicks: 1267

Tweet this!

jqAutocomplete Extension for Yii

Antonio Ramirez — Thu, 21 Oct 2010 16:34:59 +0000

It was only a matter of time until I try to develop an extension for the Yii Framework and I have chosen the Ajax Powered Autocomplet plugin for JQuery to exercise with this technology.

How to use the Extension

I have included a test within the downloadable package that shows how to implement this extension. The test includes a TestController, a view and a test_layout; so I hope this will easy the way for you to check it.

First download and unzip its contents

Move jqAutocomplete contents (I said contents) into your application’s protected/extension folder
Copy TestController.php and paste it in (you guessed well) your application’s protected/controllers folder
Move test folder (not the contents but the whole folder this time) into your application’s protected/views folder
Finally test_layout.php into your application’s protected/layouts folder

That’s it! Ready for the test. Go to your browser and type http:///index.php?r=test/autocomplete. If everything was good, you will be able to see the first field (JSON TEST) working as an autocomplete.

Please check TestController.php to see an example of AJAX response from the client autocomplete’s Request calls -and yes, you can also do it from a database result query. Look also at the test view’s code for an example on how to use the extension.

Download
** If you have problems to download from below; please try it here.

download: Ajax Powered AutoComplete Extension for Yii (126.83KB)
added: 20/10/2010
clicks: 231

Tweet this!

PalmStudios Model Agency

Antonio Ramirez — Wed, 14 Jul 2010 14:03:03 +0000

Hi there,

I would like to introduce you my last web project: http://www.palmstudios.com

For this project I have developed a sort of MVC (Model View Controller) over the RedBeanPHP DB library (PHP 5.3.2). This project even though it looks quite simple it has a very power CMS (Content Management System) on its backend that allows the model agency to control most of the aspects of its business:

- Clients Management
- Models Management (Men, Women, Children & Extras) -contact details, measurements, pictures, and so on…
- Promotional Packages Management – this is a special addon which allows the agency to create model promotional bundles to send to its clients

There is a ton of client and server libraries that this application makes use of, such as:

JQuery FancyBox
JQuery Livequery
JQuery AjaxQ
PHPMailer
RedBeanPHP
Savant3 Template Engine
PHPThumb
TinyMCE

The CMS has a configuration section where site administrator can configure:

Web site languages (has multiple language support)
Web site translations (you can even ask GOOGLE about a translation depending of the languages installed on the system)
Model properties (size, height, waist, etc…)
Hair Colors
Eye Colors
Users

Here is a snapshot gallery of the Site and its CMS

I am open for Freelance Jobs

If any of you would like to create a model agency application like this, let me know, I will be more than happy to collaborate with you on it. I will also sell the source code of its panel for any of you who is interested.

Tweet this!

Speed Up Your Pages With Lazy Load JQuery Plugin

Antonio Ramirez — Tue, 15 Jun 2010 15:06:54 +0000

I would like to introduce you this simple but very efficient plugin that will help us speed up the downloading time of our web pages. I am talking about mr Mika Tuupola’s Lazy Load JQuery Plugin.

This plugin loads the images of a web page as the user scrolls to their position, that is, images wont load until they are not within the visible viewport margins of the window.

How to use

First we need to insert the following references into our code

And now this few lines of code in our document.ready function



Tweet this!

JSON jQuery Plugin

Antonio Ramirez — Wed, 30 Dec 2009 10:53:42 +0000

I finally got a bit of time and I started playing around with the creation of jQuery plugins and did created a couple of them that I believe all of you will find useful, one of them is a JSON plugin.

As you all know jQuery do not have a JSON encode function. I truly do not know the reason why but to implement it was quite easy -maybe the guys from jQuery thought that it wasn’t really necessary and I agree with them. Most of us use JSON on the server side through PHP or whatever the server tech we use but sometimes, and I repeat, sometimes, we require to develop client applications that by using JSON (thanks David Crockford) we can reduce our server resources and the amount of data transmitted between client and server. But this is a subject that I will treat in the next posts.

Here is the plugin code:

jQuery.JSON = {
useHasOwn : ({}.hasOwnProperty ? true : false),
pad : function(n) {
return n < 10 ? "0" + n : n;
},
m : {
"\b": '\\b',
"\t": '\\t',
"\n": '\\n',
"\f": '\\f',
"\r": '\\r',
'"' : '\\"',
"\\": '\\\\'
},
encodeString : function(s){
if (/["\\\x00-\x1f]/.test(s)) {
return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
var c = m[b];
if(c){
return c;
}
c = b.charCodeAt();
return "\\u00" +
Math.floor(c / 16).toString(16) +
(c % 16).toString(16);
}) + '"';
}
return '"' + s + '"';
},
encodeArray : function(o){
var a = ["["], b, i, l = o.length, v;
for (i = 0; i < l; i += 1) {
v = o[i];
switch (typeof v) {
case "undefined":
case "function":
case "unknown":
break;
default:
if (b) {
a.push(',');
}
a.push(v === null ? "null" : this.encode(v));
b = true;
}
}
a.push("]");
return a.join("");
},
encodeDate : function(o){
return '"' + o.getFullYear() + "-" +
pad(o.getMonth() + 1) + "-" +
pad(o.getDate()) + "T" +
pad(o.getHours()) + ":" +
pad(o.getMinutes()) + ":" +
pad(o.getSeconds()) + '"';
},
encode : function(o){
if(typeof o == "undefined" || o === null){
return "null";
}else if(o instanceof Array){
return this.encodeArray(o);
}else if(o instanceof Date){
return this.encodeDate(o);
}else if(typeof o == "string"){
return this.encodeString(o);
}else if(typeof o == "number"){
return isFinite(o) ? String(o) : "null";
}else if(typeof o == "boolean"){
return String(o);
}else {
var self = this;
var a = ["{"], b, i, v;
for (i in o) {
if(!this.useHasOwn || o.hasOwnProperty(i)) {
v = o[i];
switch (typeof v) {
case "undefined":
case "function":
case "unknown":
break;
default:
if(b){
a.push(',');
}
a.push(self.encode(i), ":",
v === null ? "null" : self.encode(v));
b = true;
}
}
}
a.push("}");
return a.join("");
}
},
decode : function(json){
return eval("(" + json + ')');
}
};

How to use

Copy and paste the above code onto a file and name it whatever you like, for the sake of the example we will call it jquery.json.js. And then configure your head section like this:

That’s it, now we can call our plugin like this:

// test variables
var obj = {json:'this is a test json property',xml:'this is a test xml property'};
var arr = ['A','B of 2 index array','C','D'];
// encoding an object
var a = $.JSON.encode(obj);
alert('json encoded object:'+a);
// decoding an object
var b = $.JSON.decode(a);
alert('json decoded object property:'+b.json);
// encoding an array
a = $.JSON.encode(arr);
alert('json encoded array:'+a);
// decoding the array
b = $.JSON.decode(a);
alert('json decoded array:'+b[1]);

On future posts we will make use of this plugin to show what we can do with it.

Tweet this!

Ajax Powered Autocomplete Plugin for JQuery.js

Antonio Ramirez — Tue, 29 Dec 2009 10:44:23 +0000

I am glad to announce the launch of the successfull Ajax Powered Autocomplete for Prototype.js now as a plugin for JQuery. No much to say… if any of you want to have a look at this piece of code you can check it here.

Any feedback is highly appreciated.

Tweet this!