| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 1 | .. note:: This driver is experimental. Its feature set and |
| 2 | implementation may change in future releases. |
| 3 | |
| 4 | ################ |
| 5 | Javascript Class |
| 6 | ################ |
| 7 | |
| 8 | CodeIgniter provides a library to help you with certain common functions |
| 9 | that you may want to use with Javascript. Please note that CodeIgniter |
| 10 | does not require the jQuery library to run, and that any scripting |
| 11 | library will work equally well. The jQuery library is simply presented |
| 12 | as a convenience if you choose to use it. |
| 13 | |
| 14 | Initializing the Class |
| 15 | ====================== |
| 16 | |
| 17 | To initialize the Javascript class manually in your controller |
| 18 | constructor, use the $this->load->library function. Currently, the only |
| 19 | available library is jQuery, which will automatically be loaded like |
| 20 | this:: |
| 21 | |
| 22 | $this->load->library('javascript'); |
| 23 | |
| 24 | The Javascript class also accepts parameters, js_library_driver |
| 25 | (string) default 'jquery' and autoload (bool) default TRUE. You may |
| 26 | override the defaults if you wish by sending an associative array:: |
| 27 | |
| 28 | $this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE)); |
| 29 | |
| 30 | Again, presently only 'jquery' is available. You may wish to set |
| 31 | autoload to FALSE, though, if you do not want the jQuery library to |
| 32 | automatically include a script tag for the main jQuery script file. This |
| 33 | is useful if you are loading it from a location outside of CodeIgniter, |
| 34 | or already have the script tag in your markup. |
| 35 | |
| 36 | Once loaded, the jQuery library object will be available using: |
| 37 | $this->javascript |
| 38 | |
| 39 | Setup and Configuration |
| 40 | ======================= |
| 41 | |
| 42 | Set these variables in your view |
| 43 | -------------------------------- |
| 44 | |
| 45 | As a Javascript library, your files must be available to your |
| 46 | application. |
| 47 | |
| 48 | As Javascript is a client side language, the library must be able to |
| 49 | write content into your final output. This generally means a view. |
| 50 | You'll need to include the following variables in the <head> sections of |
| 51 | your output. |
| 52 | |
| 53 | :: |
| 54 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 55 | <?php echo $library_src;?> |
| 56 | <?php echo $script_head;?> |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 57 | |
| 58 | |
| 59 | $library_src, is where the actual library file will be loaded, as well |
| 60 | as any subsequent plugin script calls; $script_head is where specific |
| 61 | events, functions and other commands will be rendered. |
| 62 | |
| 63 | Set the path to the librarys with config items |
| 64 | ---------------------------------------------- |
| 65 | |
| 66 | There are some configuration items in Javascript library. These can |
| 67 | either be set in application/config.php, within its own |
| 68 | config/javascript.php file, or within any controller usings the |
| 69 | set_item() function. |
| 70 | |
| 71 | An image to be used as an "ajax loader", or progress indicator. Without |
| 72 | one, the simple text message of "loading" will appear when Ajax calls |
| 73 | need to be made. |
| 74 | |
| 75 | :: |
| 76 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 77 | $config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/'; |
| 78 | $config['javascript_ajax_img'] = 'images/ajax-loader.gif'; |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 79 | |
| 80 | If you keep your files in the same directories they were downloaded |
| 81 | from, then you need not set this configuration items. |
| 82 | |
| 83 | The jQuery Class |
| 84 | ================ |
| 85 | |
| 86 | To initialize the jQuery class manually in your controller constructor, |
| 87 | use the $this->load->library function:: |
| 88 | |
| Chad Hedgcock | a28812a | 2012-04-25 23:29:52 -0300 | [diff] [blame] | 89 | $this->load->library('javascript/jquery'); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 90 | |
| 91 | You may send an optional parameter to determine whether or not a script |
| 92 | tag for the main jQuery file will be automatically included when loading |
| 93 | the library. It will be created by default. To prevent this, load the |
| 94 | library as follows:: |
| 95 | |
| Chad Hedgcock | a28812a | 2012-04-25 23:29:52 -0300 | [diff] [blame] | 96 | $this->load->library('javascript/jquery', FALSE); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 97 | |
| 98 | Once loaded, the jQuery library object will be available using: |
| 99 | $this->jquery |
| 100 | |
| 101 | jQuery Events |
| 102 | ============= |
| 103 | |
| 104 | Events are set using the following syntax. |
| 105 | |
| 106 | :: |
| 107 | |
| 108 | $this->jquery->event('element_path', code_to_run()); |
| 109 | |
| 110 | |
| 111 | In the above example: |
| 112 | |
| 113 | - "event" is any of blur, change, click, dblclick, error, focus, hover, |
| 114 | keydown, keyup, load, mousedown, mouseup, mouseover, mouseup, resize, |
| 115 | scroll, or unload. |
| 116 | - "element_path" is any valid `jQuery |
| 117 | selector <http://docs.jquery.com/Selectors>`_. Due to jQuery's unique |
| 118 | selector syntax, this is usually an element id, or CSS selector. For |
| 119 | example "#notice_area" would effect <div id="notice_area">, and |
| 120 | "#content a.notice" would effect all anchors with a class of "notice" |
| 121 | in the div with id "content". |
| 122 | - "code_to_run()" is script your write yourself, or an action such as |
| 123 | an effect from the jQuery library below. |
| 124 | |
| 125 | Effects |
| 126 | ======= |
| 127 | |
| 128 | The query library supports a powerful |
| 129 | `Effects <http://docs.jquery.com/Effects>`_ repertoire. Before an effect |
| 130 | can be used, it must be loaded:: |
| 131 | |
| 132 | $this->jquery->effect([optional path] plugin name); // for example $this->jquery->effect('bounce'); |
| 133 | |
| 134 | |
| 135 | hide() / show() |
| 136 | --------------- |
| 137 | |
| 138 | Each of this functions will affect the visibility of an item on your |
| 139 | page. hide() will set an item invisible, show() will reveal it. |
| 140 | |
| 141 | :: |
| 142 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 143 | $this->jquery->hide(target, optional speed, optional extra information); |
| 144 | $this->jquery->show(target, optional speed, optional extra information); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 145 | |
| 146 | |
| 147 | - "target" will be any valid jQuery selector or selectors. |
| 148 | - "speed" is optional, and is set to either slow, normal, fast, or |
| 149 | alternatively a number of milliseconds. |
| 150 | - "extra information" is optional, and could include a callback, or |
| 151 | other additional information. |
| 152 | |
| 153 | toggle() |
| 154 | -------- |
| 155 | |
| 156 | toggle() will change the visibility of an item to the opposite of its |
| 157 | current state, hiding visible elements, and revealing hidden ones. |
| 158 | |
| 159 | :: |
| 160 | |
| 161 | $this->jquery->toggle(target); |
| 162 | |
| 163 | |
| 164 | - "target" will be any valid jQuery selector or selectors. |
| 165 | |
| 166 | animate() |
| 167 | --------- |
| 168 | |
| 169 | :: |
| 170 | |
| 171 | $this->jquery->animate(target, parameters, optional speed, optional extra information); |
| 172 | |
| 173 | |
| 174 | - "target" will be any valid jQuery selector or selectors. |
| 175 | - "parameters" in jQuery would generally include a series of CSS |
| 176 | properties that you wish to change. |
| 177 | - "speed" is optional, and is set to either slow, normal, fast, or |
| 178 | alternatively a number of milliseconds. |
| 179 | - "extra information" is optional, and could include a callback, or |
| 180 | other additional information. |
| 181 | |
| 182 | For a full summary, see |
| 183 | `http://docs.jquery.com/Effects/animate <http://docs.jquery.com/Effects/animate>`_ |
| 184 | |
| 185 | Here is an example of an animate() called on a div with an id of "note", |
| 186 | and triggered by a click using the jQuery library's click() event. |
| 187 | |
| 188 | :: |
| 189 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 190 | $params = array( |
| 191 | 'height' => 80, |
| 192 | 'width' => '50%', |
| 193 | 'marginLeft' => 125 |
| 194 | ); |
| 195 | $this->jquery->click('#trigger', $this->jquery->animate('#note', $params, normal)); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 196 | |
| 197 | fadeIn() / fadeOut() |
| 198 | -------------------- |
| 199 | |
| 200 | :: |
| 201 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 202 | $this->jquery->fadeIn(target, optional speed, optional extra information); |
| 203 | $this->jquery->fadeOut(target, optional speed, optional extra information); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 204 | |
| 205 | |
| 206 | - "target" will be any valid jQuery selector or selectors. |
| 207 | - "speed" is optional, and is set to either slow, normal, fast, or |
| 208 | alternatively a number of milliseconds. |
| 209 | - "extra information" is optional, and could include a callback, or |
| 210 | other additional information. |
| 211 | |
| 212 | toggleClass() |
| 213 | ------------- |
| 214 | |
| 215 | This function will add or remove a CSS class to its target. |
| 216 | |
| 217 | :: |
| 218 | |
| 219 | $this->jquery->toggleClass(target, class) |
| 220 | |
| 221 | |
| 222 | - "target" will be any valid jQuery selector or selectors. |
| 223 | - "class" is any CSS classname. Note that this class must be defined |
| 224 | and available in a CSS that is already loaded. |
| 225 | |
| 226 | fadeIn() / fadeOut() |
| 227 | -------------------- |
| 228 | |
| 229 | These effects cause an element(s) to disappear or reappear over time. |
| 230 | |
| 231 | :: |
| 232 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 233 | $this->jquery->fadeIn(target, optional speed, optional extra information); |
| 234 | $this->jquery->fadeOut(target, optional speed, optional extra information); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 235 | |
| 236 | |
| 237 | - "target" will be any valid jQuery selector or selectors. |
| 238 | - "speed" is optional, and is set to either slow, normal, fast, or |
| 239 | alternatively a number of milliseconds. |
| 240 | - "extra information" is optional, and could include a callback, or |
| 241 | other additional information. |
| 242 | |
| 243 | slideUp() / slideDown() / slideToggle() |
| 244 | --------------------------------------- |
| 245 | |
| 246 | These effects cause an element(s) to slide. |
| 247 | |
| 248 | :: |
| 249 | |
| Derek Jones | d095adf | 2011-10-05 15:55:20 -0500 | [diff] [blame] | 250 | $this->jquery->slideUp(target, optional speed, optional extra information); |
| 251 | $this->jquery->slideDown(target, optional speed, optional extra information); |
| 252 | $this->jquery->slideToggle(target, optional speed, optional extra information); |
| Derek Jones | 8ede1a2 | 2011-10-05 13:34:52 -0500 | [diff] [blame] | 253 | |
| 254 | |
| 255 | - "target" will be any valid jQuery selector or selectors. |
| 256 | - "speed" is optional, and is set to either slow, normal, fast, or |
| 257 | alternatively a number of milliseconds. |
| 258 | - "extra information" is optional, and could include a callback, or |
| 259 | other additional information. |
| 260 | |
| 261 | Plugins |
| 262 | ======= |
| 263 | |
| 264 | Some select jQuery plugins are made available using this library. |
| 265 | |
| 266 | corner() |
| 267 | -------- |
| 268 | |
| 269 | Used to add distinct corners to page elements. For full details see |
| 270 | `http://www.malsup.com/jquery/corner/ <http://www.malsup.com/jquery/corner/>`_ |
| 271 | |
| 272 | :: |
| 273 | |
| 274 | $this->jquery->corner(target, corner_style); |
| 275 | |
| 276 | |
| 277 | - "target" will be any valid jQuery selector or selectors. |
| 278 | - "corner_style" is optional, and can be set to any valid style such |
| 279 | as round, sharp, bevel, bite, dog, etc. Individual corners can be set |
| 280 | by following the style with a space and using "tl" (top left), "tr" |
| 281 | (top right), "bl" (bottom left), or "br" (bottom right). |
| 282 | |
| 283 | :: |
| 284 | |
| 285 | $this->jquery->corner("#note", "cool tl br"); |
| 286 | |
| 287 | |
| 288 | tablesorter() |
| 289 | ------------- |
| 290 | |
| 291 | description to come |
| 292 | |
| 293 | modal() |
| 294 | ------- |
| 295 | |
| 296 | description to come |
| 297 | |
| 298 | calendar() |
| 299 | ---------- |
| 300 | |
| 301 | description to come |