From b8354c1e8c85399697af2d8ffd3584095594bba2 Mon Sep 17 00:00:00 2001 From: Derek Jones Date: Fri, 5 Mar 2010 12:47:30 -0600 Subject: adding initial docs for javascript and jquery libs --- user_guide/libraries/javascript.html | 194 ++++++++++++++++++++++++++++ user_guide/libraries/jquery.html | 236 +++++++++++++++++++++++++++++++++++ 2 files changed, 430 insertions(+) create mode 100644 user_guide/libraries/javascript.html create mode 100644 user_guide/libraries/jquery.html (limited to 'user_guide/libraries') diff --git a/user_guide/libraries/javascript.html b/user_guide/libraries/javascript.html new file mode 100644 index 000000000..2856fdbf3 --- /dev/null +++ b/user_guide/libraries/javascript.html @@ -0,0 +1,194 @@ + + + + +CodeIgniter User Guide : Input Class + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +

CodeIgniter User Guide Version 2.0.0

+
+ + + + + + + + + +
+ + +
+ + + +
+ + +

Javascript Class

+

Rewrite this paragraph: jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. CodeIgniter provides a library to help you with certain common functions that you may want to use within jQuery. Please note that CodeIgniter does not require the jQuery library to run, and that any scripting library will work equally well. The jQuery library is simply presented as a convenience if you choose to use it.

+

Initializing the Class

+

To initialize the jQuery class manually in your controller constructor, use the $this->load->library function. Currently, the only available library is jQuery, which will automatically be loaded like this:

+ +$this->load->library('javascript'); + +

The Javascript class also accepts parameters, js_library_driver (string) default 'jquery' and autoload (bool) default TRUE. You may override the defaults if you wish by sending an associative array:

+ +$this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE)); + +

Again, presently only 'jquery' is available. You may wish to set autoload to FALSE, though, if you do not want the jQuery library to automatically include a script tag for the main jQuery script file. This is useful if you are loading it from a location outside of CodeIgniter, or already have the script tag in your markup.

+ +

Once loaded, the jQuery library object will be available using: $this->javascript

+

Setup and Configuration

+

Set these variables in your view

+

As a javascript library, your files must be available to your application. For your convenience, the needed files to run this library are available for download from our site.

+

As javascript is a client side language, the library must be able to write content into your final output. This generally means a view. You'll need to include the following variables in the <head> sections of your output.

+

<?php echo $library_src;?>
+<?php echo $script_head;?> +

+

$library_src, is where the actual library file will be loaded, as well as any subsequent plugin script calls; $script_head is where specific events, functions and other commands will be rendered.

+

Set the path to the librarys with config items

+

There are some configuration items in javascript library. These can either be set in system/application/config.php, within its own confg/javascript.php file, or within any controller usings the set_item() function.

+

An image to be used as an "ajax loader", or progress indicator. Without one, the simple text message of "loading" will appear when Ajax calls need to be made.

+

$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/');
+ $config['javascript_ajax_img'] = 'images/ajax-loader.gif';

+

If you keep your files in the same directories they were downloaded from, then you need not set this configuration items.

+

Events

+

Events are set using the following syntax.

+

$this->jquery->event('element_path', code_to_run());

+

In the above example:

+ +

Effects

+

The query library supports a powerful effects repertoire.

+

hide() / show()

+

Each of this functions will affect the visibility of an item on your page. hide() will set an item invisible, show() will reveal it.

+

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

+ +

toggle()

+

toggle() will change the visibility of an item to the opposite of its current state, hiding visible elements, and revealing hidden ones.

+

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

+ +

animate()

+

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

+ +

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

+

Here is an example of an animate() called on a div with an id of "note", and triggered by a click using the jQuery library's click() event.

+

$params = array(
+ 'height' => 80,
+ 'width' => '50%',
+ 'marginLeft' => 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);

+ +

toggleClass()

+

This function will add or remove a CSS class to its target.

+

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

+ +

fadeIn() / fadeOut()

+

These effects cause an element(s) to disappear or reappear over time.

+

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

+ +

slideUp() / slideDown() / slideToggle()

+

These effects cause an element(s) to slide.

+

$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);

+ +

Plugins

+

Some select jQuery plugins are made available using this library.

+

corner()

+

Used to add distinct corners to page elements. For full details see http://www.malsup.com/jquery/corner/

+

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

+ +

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

+

tablesorter()

+

description to come

+

modal()

+

description to come

+

calendar()

+

description to come

+
+ + + + + + + \ No newline at end of file diff --git a/user_guide/libraries/jquery.html b/user_guide/libraries/jquery.html new file mode 100644 index 000000000..98c9a9cb3 --- /dev/null +++ b/user_guide/libraries/jquery.html @@ -0,0 +1,236 @@ + + + + +CodeIgniter User Guide : Input Class + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + +

CodeIgniter User Guide Version 2.0.0

+
+ + + + + + + + + +
+ + +
+ + + +
+ + +

jQuery Class

+ +

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. CodeIgniter provides a library to help you with certain common functions that you may want to use within jQuery. Please note that CodeIgniter does not require the jQuery library to run, and that any scripting library will work equally well. The jQuery library is simply presented as a convenience if you choose to use it.

+ +

Initializing the Class

+ +

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

+ +$this->load->library('jquery'); + +

You may send an optional parameter to determine whether or not a script tag for the main jQuery file will be automatically included when loading the library. It will be created by default. To prevent this, load the library as follows:

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

Once loaded, the jQuery library object will be available using: $this->jquery

+ +

Setup and Configuration

+ +

As a javascript library, jquery.js must be available to your application. For your convenience, the needed files to run this library are available for download from our site.

+ +

As javascript is a client side language, the library must be able to write content into your final output. This generally means a view. You'll need to include the following variables in the <head> sections of your output.

+ +

<?php echo $jquery_script;?>
+<?php echo $script_head;?>

+ +

There are 2 configuration items in jQuery library. These can either be set in system/application/config.php, or within any controller. The first is the path from the root of your site to the jquery library ('js' is the default) and the second is an image to be used as an "ajax loader", or progress indicator. Without one, the simple text message of "loading" will appear when Ajax calls need to be made.

+ +

$config['javascript_folder'] = 'js';
+ $config['javascript_ajax_img'] = 'images/ajax-loader.gif';

+ +

If you keep your files in the same directories they were downloaded from, then you needed set this configuration items.

+ +

Events

+ +

Events are set using the following syntax.

+ +

$this->jquery->event('element_path', code_to_run());

+ +

In the above example:

+ + + +

Effects

+ +

The query library supports a powerful Effects repertoire. Before an effect can be used, it must be loaded:

+ +

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

+ +

hide() / show()

+ +

Each of this functions will affect the visibility of an item on your page. hide() will set an item invisible, show() will reveal it.

+

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

+ + + +

toggle()

+ +

toggle() will change the visibility of an item to the opposite of its current state, hiding visible elements, and revealing hidden ones.

+

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

+ + +

animate()

+ +

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

+ +

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

+

Here is an example of an animate() called on a div with an id of "note", and triggered by a click using the jQuery library's click() event.

+

$params = array(
+ 'height' => 80,
+ 'width' => '50%',
+ 'marginLeft' => 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);

+ + +

toggleClass()

+ +

This function will add or remove a CSS class to its target.

+

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

+ + +

fadeIn() / fadeOut()

+ +

These effects cause an element(s) to disappear or reappear over time.

+

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

+ + +

slideUp() / slideDown() / slideToggle()

+ +

These effects cause an element(s) to slide.

+

$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);

+ + +

Plugins

+ +

+ +

Some select jQuery plugins are made available using this library.

+ +

corner()

+

Used to add distinct corners to page elements. For full details see http://www.malsup.com/jquery/corner/

+

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

+ +

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

+ +

tablesorter()

+ +

description to come

+ +

modal()

+ +

description to come

+ +

calendar()

+ +

description to come

+ +
+ + + + + + + \ No newline at end of file -- cgit v1.2.3-24-g4f1b