Skip to content
Browse files

Fix Javascript Class/Driver (#17) - Cleanup

Corrected Formatting Issues. Removed line from ChangeLog.
  • Loading branch information...
1 parent c909918 commit 8309596c4525eecb32caa29c899a385ee551b489 @BillHeaton committed
Showing with 80 additions and 45 deletions.
  1. +0 −1 user_guide_src/source/changelog.rst
  2. +80 −44 user_guide_src/source/libraries/javascript.rst
View
1 user_guide_src/source/changelog.rst
@@ -446,7 +446,6 @@ Bug fixes for 3.0
- Fixed a bug (#1220) - :doc:`Profiler Library <general/profiling>` didn't display information for database objects that are instantiated inside models.
- Fixed a bug (#1978) - :doc:`Directory Helper <helpers/directory_helper>` function :php:func:`directory_map()`'s return array didn't make a distinction between directories and file indexes when a directory with a numeric name is present.
- Fixed a bug (#777) - :doc:`Loader Library <libraries/loader>` didn't look for helper extensions in added package paths.
-- Fixed Doc Errors (#17) - :doc:`Javascript Library <libraries/javascript>` Updated document to reflect working code.
Version 2.1.3
=============
View
124 user_guide_src/source/libraries/javascript.rst
@@ -1,33 +1,42 @@
-.. note:: This driver is experimental. Its feature set and implementation may change in future releases.
+.. note:: This driver is experimental. Its feature set and implementation
+ may change in future releases.
################
Javascript Class
################
-This Class provides an interface to Javascript libraries. Currently only the `jQuery library <http://jquery.com/>`_ is supported. Note that CodeIgniter does not require Javascript to run.
+This Class provides an interface to Javascript libraries. Currently only
+the `jQuery library <http://jquery.com/>`_ is supported. Note that
+CodeIgniter does not require Javascript to run.
Configuration
-=======================
+=============
-To use a Javascript library you will need to set a configuration item for the path to the Javascript library that you'll be using.
+To use a Javascript library you will need to set a configuration item for
+the path to the Javascript library that you'll be using.
::
- $config['javascript_location'] = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';
+ $config['javascript_location'] =
+ 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js';

Probably should change the protocol syntax for the CDN.
//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

This would allow the latest 1.x minified release and would support both http(s) pages. Right now SSL will fail using http to access the resource.

@BillHeaton Owner
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
-You can find details on how to set config items in :doc:`Config Library <config>`
+You can find details on how to set config items in
+:doc:`Config Library <config>`
- .. note:: The example above uses the `Google CDN <http://developers.google.com/speed/libraries/devguide>`_
- (Content Delivery Network) to host the script and there are some advantages to doing so: decreased latency,
- increased parallelism, and better caching. **However, you currently can't use the protocol-less form of the
- Google URL** so be sure that you specify "http:" or "https:" depending on what your site is using.
+ .. note:: The example above uses the `Google CDN
+ <http://developers.google.com/speed/libraries/devguide>`_
+ (Content Delivery Network) to host the script and there are some
+ advantages to doing so: decreased latency, increased parallelism,
+ and better caching. **However, you currently can't use the
+ protocol-less form of the Google URL** so be sure that you specify
+ "http:" or "https:" depending on what your site is using.
What you'll need in your controller
-=================================================
+===================================
Load the library
---------------------------------------------------
+----------------
Initialize the Javascript class in your controller constructor, for example:
::
@@ -40,26 +49,33 @@ Initialize the Javascript class in your controller constructor, for example:
Add Javascript Elements and Compile
---------------------------------------------------
-Add javascript events or effects from the list below as needed and finally call compile() to make them available to the view.
+-----------------------------------
+Add javascript events or effects from the list below as needed and finally
+call compile() to make them available to the view.
::
- $this->javascript->click('#button', $this->javascript->toggle('#container') );
+ $this->javascript->click('#button',
+ $this->javascript->toggle('#container') );
$this->javascript->compile();
-This example sets up a click event for <div id="button"> so that when it's clicked will toggle the display of <div id="container">
+This example sets up a click event for <div id="button"> so that when it's
+clicked will toggle the display of <div id="container">
- .. note:: Currently you must have at least one javascript element present.
+ .. note:: Currently you must have at least one javascript element
+ present.
What you'll need in your view
-===========================================
+=============================
In your HTML <head>
----------------------------------------------------------
-Somewhere in the HTML head you'll need to add $library_src whichs contain the script command to point to your jQuery script and $script_foot will contain the javascript elements that you defined in the controller. For example:
+-------------------
+Somewhere in the HTML head you'll need to add $library_src whichs contain
+the script command to point to your jQuery script and $script_foot will
+contain the javascript elements that you defined in the controller. For
+example:
::
@@ -70,32 +86,40 @@ Somewhere in the HTML head you'll need to add $library_src whichs contain the sc
</head>
Javascript Methods
-=====================================================================
+==================
compile()
----------------------------------------------------------------------
-Creates the variables used in the html header. The default variables are $library_src for the pointers to the jquery script and $script_foot for the javascript elements that you've defined.
+---------
+Creates the variables used in the html header. The default variables are
+$library_src for the pointers to the jquery script and $script_foot for
+the javascript elements that you've defined.
jQuery Events
-======================================================================
+=============
Events are set up using the following syntax.
::
$this->jquery->event('selector', handler() );
+
+
+ - "event" is one of: "blur", "change", "click", "dblclick", "focus",
+ "error", "hover", "keydown", "keyup", "load", "mousedown", "mouseup",
+ "mouseout", "mouseover", "resize", "scroll", or "unload."
-
- - "event" is one of: "blur", "change", "click", "dblclick", "focus", "error", "hover", "keydown", "keyup", "load", "mousedown", "mouseup", "mouseout", "mouseover", "resize", "scroll", or "unload." `See jQuery events <http://api.jquery.com/category/Events/>`_.
+ `See jQuery events <http://api.jquery.com/category/Events/>`_.
- - "selector" is any valid `jQuery selector <http://docs.jquery.com/Selectors>`_.
- - "handler()" is script you write yourself, or an action such as an element from the jQuery Effects.
+ - "selector" is any valid
+ `jQuery selector <http://docs.jquery.com/Selectors>`_.
+ - "handler()" is script you write yourself, or an action such as
+ an element from the jQuery Effects.
jQuery Effects
-======================================================================
+==============
hide() / show()
---------------
@@ -109,8 +133,10 @@ page. hide() will set an item invisible, show() will reveal it.
$this->javascript->show(target, [speed], [callback]);
- "target" will be any valid jQuery selector or selectors.
- - "speed" **optional** set to either slow, normal, fast, or alternatively a number of milliseconds.
- - "callback" **optional** A function to be execute when finished.
+ - "speed" **optional** set to either slow, normal, fast, or
+ alternatively a number of milliseconds.
+ - "callback" **optional** A function to be execute when
+ finished.
toggle()
@@ -126,13 +152,16 @@ current state, hiding visible elements, and revealing hidden ones.
- "switch" A boolean true/false to show/hide all elements.
- "target" will be any valid jQuery selector or selectors.
- - "speed" **optional** set to either slow, normal, fast, or alternatively a number of milliseconds.
+ - "speed" **optional** set to either slow, normal, fast, or
+ alternatively a number of milliseconds.
- "callback" **optional** A function to be execute when finished.
animate()
---------
-A effect for making custom animations. For a full summary, see `http://docs.jquery.com/Effects/animate <http://docs.jquery.com/Effects/animate>`_
+A effect for making custom animations. For a full summary,
+see `http://docs.jquery.com/Effects/animate
+<http://docs.jquery.com/Effects/animate>`_
::
@@ -140,11 +169,15 @@ A effect for making custom animations. For a full summary, see `http://docs.jque
- "target" will be any valid jQuery selector or selectors.
- - "parameters" in jQuery would generally include a series of CSS properties that you wish to change.
- - "speed" **optional** set to either slow, normal, fast, or alternatively a number of milliseconds.
- - "extra" **optional** Can include a callback, or other additional information.
+ - "parameters" in jQuery would generally include a series of CSS
+ properties that you wish to change.
+ - "speed" **optional** set to either slow, normal, fast, or
+ alternatively a number of milliseconds.
+ - "extra" **optional** Can include a callback, or other additional
+ information.
-This is an example of an animation for <div id="container"> that is triggered when <div id="button"> is clicked:
+This is an example of an animation for <div id="container"> that is
+triggered when <div id="button"> is clicked:
::
@@ -154,7 +187,8 @@ This is an example of an animation for <div id="container"> that is triggered wh
'marginLeft' => 125
);
- $this->javascript->click('#button', $this->javascript->animate('#container', $params, 'normal') );
+ $this->javascript->click('#button',
+ $this->javascript->animate('#container', $params, 'normal') );
$this->javascript->compile();
fadeIn() / fadeOut()
@@ -168,7 +202,8 @@ These effects cause an element(s) to disappear or reappear over time.
- "target" will be any valid jQuery selector or selectors.
- - "speed" **optional** Set to either slow, normal, fast, or alternatively a number of milliseconds.
+ - "speed" **optional** Set to either slow, normal, fast, or
+ alternatively a number of milliseconds.
- "callback" **optional** A function to be execute when finished.
slideUp() / slideDown() / slideToggle()
@@ -184,12 +219,13 @@ These effects cause an element(s) to slide.
- "target" will be any valid jQuery selector or selectors.
- - "speed" **optional** Set to either slow, normal, fast, or alternatively a number of milliseconds.
+ - "speed" **optional** Set to either slow, normal, fast, or
+ alternatively a number of milliseconds.
- "callback" **optional** A function to be execute when finished.
jQuery Attributes
-======================================================================
+=================
toggleClass()
-------------
@@ -201,6 +237,6 @@ This function will add or remove a CSS class for its target.
$this->javascript->toggleClass(target, class)
- "target" will be any valid jQuery selector or selectors.
- - "class" is any CSS classname. Note that this class must be defined and available in a CSS that is already loaded.
-
-
+ - "class" is any CSS classname. Note that this class must be
+ defined and available in a CSS that is already loaded.
+

0 comments on commit 8309596

Please sign in to comment.
Something went wrong with that request. Please try again.