How to use the js class library of CI and the jquery class library of CI?

CI's Javascript class, just found that CI's javascript class is also very powerful. Below are some official methods. From the CI China official website, CI manual. CI's Javascript class, just found that CI's javascript class is also very powerful. Below are some official methods. From the CI China official website, CI manual.

CodeIgniter provides a class library to load the Javascript library you want to use. please note that CodeIgniter can be run not only by introducing jQuery, but also by other script libraries. jquery is just a convenient tool if you choose to use it.

Initialize Javascript class

To initialize Javascript classes, you can add them manually in your controller and use the $ this-> load-> library function. currently, the only usable script library is jQuery, which will automatically load it like this:

$ This-> load-> library ('javascript ');

The Javascript class can also accept other parameters. the js_library_driver (string) default 'jquery 'andautoload (bool) default TRUE. you can override the default parameter, as long as you are willing to send an associated array:

$ This-> load-> library ('javascript ', array ('JS _ library_driver' => 'script', 'autoload' => FALSE ));

Again, only 'jquery 'is currently available. you can set autoloadto FALSE. However, if you do not want jquery to automatically include the script tag of a jquery core file. if you load it out of CodeIgniter or have loaded it in your tag, this method is undoubtedly useful.

Once loaded, the jQuery library can reference: $ this-> javascript

Installation and configuration
Set these variables in your view

As a Javascript library, your source files must be provided to your applications.

Because Javascript is a client language, the library must be able to write the final output content. This usually means that you needSet the following variables.

<? Php echo $ script_head;?>

$ Library_src is the path to load the real library file and the call path of any subsequent plug-in script. $ script_head is a specific event, and functions and other commands will be rendered.

Project setting and configuration library path

The Javascript library has some configuration items. These configuration items can be configured in the application/config. php file, in your own config/javascript. php file, or in any controller using the set_item () function.

For example, an image is used as an "ajax loader", a Progress Indicator, or a simple text message "loading" is displayed when ajax is called"

$ Config ['javascript _ location'] = 'http: // localhost/codeigniter/themes/js/jquery /';
$ Config ['javascript _ ajax_img '] = 'Images/ajax-loader.gif ';

If you keep the file in the same folder as the image download path, you do not need to set this configuration item.

JQuery class

To initialize the jQuery class, use the $ this-> load-> library function in the controller constructor class:

$ This-> load-> library ('jquery ');

You can send an optional parameter to determine whether to automatically include the script of the jQuery core file when loading the database. It is created by default. To prevent this situation, configure the load library as follows:

$ This-> load-> library ('jquery ', FALSE );

Once loaded, the jquery library can reference: $ this-> jquery

JQuery events

Use the following syntax to set events.

$ This-> jquery-> event ('element _ path', code_to_run ());

In the above example:

• "Event" events can be blur, change, click, dblclick, error, focus, hover, keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, scroll, or unload any.
• "Element_path" is any valid jQuery selector. it is any valid jquery selector. because of jQuery's unique selector syntax, it is usually an element ID or CSS selector. For example, "# notice_area" will affect, and "# content a. notice" will affect all the anchors whose "notice" id is "content" in the div.
• "Code_to_run ()" is the script you wrote, or the dynamic effect of a behavior program such as jquery.

Special effects

JQuery supports a powerful: Effects function. to achieve an effect, you must load it like this:

$ This-> jquery-> effect ([optional path] plugin name); // for example $ this-> jquery-> effect ('Bounce ');

Hide ()/show ()

This function is implemented by controlling the visibility of a project element on the page. hide () hides it, and show () displays it.

$ This-> jquery-> hide (target, optional speed, optional extra information );
$ This-> jquery-> show (target, optional speed, optional extra information );

• "Target" any valid jQuery selector.
• "Speed" is an optional parameter, which can be slow, normal, fast, or millisecond.
• "Extra information" is an optional parameter, including a callback function or other additional information.

Toggle ()

Toggle () changes a project element from the current state to a visible state opposite to the original state. if it is hidden, the project is visible or hidden.

$ This-> jquery-> toggle (target );

• "Target" is any valid jQuery selector.

Animate ()

$ This-> jquery-> animate (target, parameters, optional speed, optional extra information );

• "Target" is any valid jQuery selector.
• "Parameters" is usually a series of CSS attributes of the elements you want to change.
• "Speed" is optional and can be set to slow, normal, or fast, or a millisecond value.
• "Extra information" is optional and can contain a callback function or other additional information.

For a complete summary, see http://docs.jquery.com/Effects/animate

The following is an example. the id is "note" div. calling animate () triggers the click () event of the jQuery library by clicking.

$ Params = array (
'Height' => 80,
'Width' => '123 ',
'Marginleft' = & gt; 125
);
$ This-> jquery-> click ('# trigger', $ this-> jquery-> animate (' # note', $ params, normal ));

FadeIn ()/fadeOut ()

$ This-> jquery-> fadeIn (target, optional speed, optional extra information );
$ This-> jquery-> fadeOut (target, optional speed, optional extra information );

• "Target" is any valid jQuery selector.
• "Speed" is optional and can be set to slow, normal, or fast, or a millisecond value.
• "Extra information" is optional and can contain a callback function or other additional information.

ToggleClass ()

This function adds or deletes a CSS class to or from the target element.

$ This-> jquery-> toggleClass (target, class)

• "Target" is any valid jQuery selector.
• "Class" any CSS class name. Note that this css class must be defined in a loaded CSS file.

FadeIn ()/fadeOut ()

These effects are used to hide or display an element over time.

$ This-> jquery-> fadeIn (target, optional speed, optional extra information );
$ This-> jquery-> fadeOut (target, optional speed, optional extra information );

• "Target" is any valid jQuery selector.
• "Speed" is optional and can be set to slow, normal, or fast, or a millisecond value.
• "Extra information" is optional and can contain a callback function or other additional information.

SlideUp ()/slideDown ()/slideToggle ()

These effects are used to slide elements.

$ This-> jquery-> slideUp (target, optional speed, optional extra information );
$ This-> jquery-> slideDown (target, optional speed, optional extra information );
$ This-> jquery-> slideToggle (target, optional speed, optional extra information );

• "Target" is any valid jQuery selector.
• "Speed" is optional and can be set to slow, normal, or fast, or a millisecond value.
• "Extra information" is optional and can contain a callback function or other additional information.

Plug-ins

There are some optional jQuery library-based plug-ins.

Corner ()

Used to add rounded corners of different styles around page elements. For details, see http://www.malsup.com/jquery/corner/

$ This-> jquery-> corner (target, corner_style );

• "Target" is any valid jQuery selector.
• "Corner_style" is optional, which can be set to any style such as circle, tip, slope, strip, dog, etc. you can use the following positioning style "tl" (upper left corner), "tr" (upper right corner), "bl" (lower left corner), or "br" (lower right corner ).

$ This-> jquery-> corner ("# note", "cool tl br ");