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!

La Parada del Mar

Antonio Ramirez — Tue, 14 Dec 2010 19:13:15 +0000

Website developed for the Spanish Restaurant La Parada del Mar. Customer wanted to have a very simple and direct webpage where to show information about their services.

Website Features

Tweet this!

Custom Page Size for CGridView

Antonio Ramirez — Tue, 30 Nov 2010 16:38:48 +0000

This post is actually something that, after permission granted from a Yii collegue Mike, was posted on Yii forum and I thought that was a *golden hint* too bad not to be shared among people interested on Yii: How to include a custom page size select box on your CGridView.

Step 1

First we need to modify the actionAdmin of the (CRUD) controller we want to include the select box that will change the page size of our CGridView. For the sake of this example, we are going to use the user controller which is created by default with Yii.

//
// page size drop down changed
if (isset($_GET['pageSize'])) {
//
// pageSize will be set on user's state
Yii::app()->user->setState('pageSize',(int)$_GET['pageSize']);
//
// unset the parameter as it
// would interfere with pager
// and repetitive page size change
unset($_GET['pageSize']);
}

Step 2

Now we have to modify the model’s search() function (e.g. model/User.php):

return new CActiveDataProvider(get_class($this),array(
'pagination'=>array(
//
// please check how we get the
// the pageSize from user's state
'pageSize'=> Yii::app()->user->getState('pageSize',
//
// we have previously set defaultPageSize
// on the params section of our main.php config file
Yii::app()->params['defaultPageSize']),
),
'criteria'=>$criteria,
));

Step 3

Finally, we need to change our view (e.g. views/user/admin.php) and we are done:

//
//
$pageSize=Yii::app()->user->getState('pageSize',Yii::app()->params['defaultPageSize']);
// we use header of button column for the drop down
// so change the CButtonColumn in columns array like this:
...
array(
    'class'=>'CButtonColumn',
    'header'=>CHtml::dropDownList('pageSize',
        $pageSize,
        array(20=>20,50=>50,100=>100),
        array(
       //
       // change 'user-grid' to the actual id of your grid!!
        'onchange'=>
        "$.fn.yiiGridView.update('user-grid',{ data:{pageSize: $(this).val() }})",
    )),
),
...

Hope you find this hint as good as I thought it is. As Mike states, this information is to prove how easy is to enhance Yii components if you are not afraid of Javascript.

References

For futher reading please refer to original post.
Mike’s Forum Post

Happyiing!

Tweet this!

How to use jQueryslidemenu with Yii’s CMenu

Antonio Ramirez — Thu, 28 Oct 2010 20:07:52 +0000

Yii makes it really easy for all to use their already made objects that automate everything we do. It provides also great power of flexibility and styling but hey, we programmers tend to complicate our lives and push a little more the power of our tools.

This tutorial makes use of the jqueryslidemenu plugin to give us a cool featured slidemenu with just a little bit of effort taking advantage of the way Yii’s CMenu widget renders its items.

Installation of Script

Once we download the plugin we are going to place its contents to their correspondent folders (i.e. styles on the css folder, js files on scripts folder, images -yes you guessed right, the images folder). Nevertheless is up to you how you order the files as long as the images and styles have their image paths correctly set.

Creating the Menu

We are going to use it in our main.php layout file for the sake of the example -and because it is the place where we, most of us, will use it.

First we register the required css and js files for our menu.

// remember that you can actually point to the js files directly if
// your script file is outside of protected/subfolders
$jqueryslidemenupath = Yii::app()
     ->assetManager
     ->publish(Yii::app()->basePath.'/scripts/jqueryslidemenu/');
//Register jQuery, JS and CSS files
Yii::app()
     ->clientScript
     ->registerCoreScript('jquery');
Yii::app()
     ->clientScript
     ->registerCssFile($jqueryslidemenupath.'/jqueryslidemenu.css');
Yii::app()
     ->clientScript
     ->registerScriptFile($jqueryslidemenupath.'/jqueryslidemenu.js');

And finally we create our menu. Please note that our menu is wrapped with a layer ‘div’ and one its classes to jqueryslide menu.


widget('zii.widgets.CMenu',array(
   'items'=>array(
      array('label'=>'Home', 'url'=>array('/site/index')),
      array('label'=>'About', 'url'=>array('/site/page', 'view'=>'about')),
      array('label'=>'Contact', 'url'=>array('/site/contact')),
      array('label'=>'jqSlideMenuTest', 'url'=>array('#'),
        'items'=>array(
           array('label'=>'Home',
                    'url'=>array('/site/index')),
           array('label'=>'About',
                    'url'=>array('/site/page', 'view'=>'about')),
           array('label'=>'Contact',
                    'url'=>array('/site/contact'),
                   'items'=>array(
                      array('label'=>'Home',
                               'url'=>array('/site/index')),
                      array('label'=>'About',
                               'url'=>array('/site/page', 'view'=>'about')),
                      array('label'=>'Contact',
                              'url'=>array('/site/contact'),
                              'items'=>array(
                                   array('label'=>'Home',
                                            'url'=>array('/site/index')),
                                   array('label'=>'About',
                                            'url'=>array('/site/page', 'view'=>'about')),
                                   array('label'=>'Contact',
                                            'url'=>array('/site/contact')),
                       )),
                  )),
              )),
       array('label'=>'Login',
                'url'=>array('/site/login'),
                'visible'=>Yii::app()->user->isGuest),
       array('label'=>'Logout ('.Yii::app()->user->name.')',
                'url'=>array('/site/logout'),
                'visible'=>!Yii::app()->user->isGuest)),
     )); ?>

That’s it… quite easy right? You can change its style to suit your ‘design’ needs.

Download Example Files

Our colleague programmer Trejder has compiled an example for all of you to play with it. download files

Just make sure that you have the runtime and assets’s folders permissions to be writable and correct the index.php file Yii path’s to the correct one on your computer.

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!