# Javascript 類
CodeIgniter 提供一個類庫和一些共用的方法來處理 Javascript 。要注意的是， CodeIgniter 并不是只能用于 jQuery ，其他腳本庫也可以。JQuery 僅僅是 作為一個方便的工具，如果你選擇使用它的話。
**重要**
這個類庫已經廢棄，不要使用它。它將永遠處于 "實驗" 版本， 而且現在也已經不提供支持了。保留它只是為了向前兼容。
# 使用 Javascript 類
# 初始化類
要初始化 Javascript 類，你可以在控制器的構造函數中使用 $this->load->library() 函數。目前，唯一可用的庫是 jQuery ，可以使用下面的方法加載:
~~~
$this->load->library('javascript');
~~~
Javascript 類也可以接受參數：
~~~
js_library_driver (string) default: 'jquery'
autoload (bool) default: TRUE
~~~
你可以通過一個關聯數組覆蓋默認的參數:
~~~
$this->load->library(
'javascript',
array(
'js_library_driver' => 'scripto',
'autoload' => FALSE
)
);
~~~
再次說明，目前只有 jQuery 是可用的，如果你不想讓 jQuery 腳本文件自動的包含在 script 標簽中，你可以設置 autoload 參數為 FALSE 。這在當你在 CodeIgniter 之外 加載它時，或者 script 標簽已經有了的時候很有用。
一旦加載完成，jQuery 類對象就可以通過下面的方式使用:
~~~
$this->javascript
~~~
# 初始化配置
# 在視圖文件中設置變量
作為一個 Javascript 庫，源文件必須能被應用程序訪問到。
由于 Javascript 是一種客戶端語言，庫必須能寫入內容到最終的輸出中去， 這通常就是視圖。你需要在輸出的 <head> 中包含下面的變量。
~~~
<?php echo $library_src;?>
<?php echo $script_head;?>
~~~
$library_src 是要載入的庫文件的路徑，以及之后所有插件腳本的路徑； $script_head 是需要顯示的具體的一些事件、函數和其他的命令。
# 設置庫路徑
在 Javascript 類庫中有一些配置項，它們可以在 application/config.php 文件中 設置，也可以在它們自己的配置文件 config/javascript.php 中設置，還可以通過 在控制器中使用 set_item() 方法來設置。
例如，有一個 "加載中" 的圖片，或者進度條指示，如果沒有它的話，當調用 Ajax 請求時， 將會顯示 "加載中" 這樣的文本。
~~~
$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';
~~~
如果你把文件留在與圖片下載路徑相同的目錄里，那么你不需要設置這個配置項。
# jQuery 類
要在你的控制器構造函數中手工初始化 jQuery 類，使用 $this->load->library() 方法:
~~~
$this->load->library('javascript/jquery');
~~~
你可以提供一個可選的參數來決定加載該庫時是否將其自動包含到 script 標簽中。 默認情況下會包含，如果不需要，可以像下面這樣來加載:
~~~
$this->load->library('javascript/jquery', FALSE);
~~~
加載完成后，jQuery 類對象可以使用下面的代碼來訪問:
~~~
$this->jquery
~~~
jQuery 事件
使用下面的語法來設置事件。
~~~
$this->jquery->event('element_path', code_to_run());
~~~
在上面的例子中：
"event" 可以是 blur、change、click、dblclick、error、focus、hover、 keydown、keyup、load、mousedown、mouseup、mouseover、mouseup、resize、 scroll 或者 unload 中的任何一個事件。
"element_path" 可以是任何的 jQuery 選擇器 。 使用 jQuery 獨特的選擇器語法，通常是一個元素 ID 或 CSS 選擇器。例如，"#notice_area" 會影響到 <div id="notice_area"> ，"#content a.notice" 會影響到 ID 為 "content" 的元素下的所有 class 為 "notice" 的鏈接。
"code_to_run()" 為你自己寫的腳本，或者是一個 jQuery 動作，例如下面所介紹的特效。
# 特效
jQuery 庫支持很多強大的 特效 ，在使用特效之前， 必須使用下面的方法加載:
~~~
$this->jquery->effect([optional path] plugin name); // for example $this->jquery->effect('bounce');
~~~
**hide() / show()**
這兩個函數會影響你的頁面上元素的可見性，hide() 函數用于將元素隱藏，show() 則相反。
~~~
$this->jquery->hide(target, optional speed, optional extra information);
$this->jquery->show(target, optional speed, optional extra information);
~~~
* "target" 是任何有效的 jQuery 選擇器。
* "speed" 可選，可以設置為 slow、normal、fast 或你自己設置的毫秒數。
* "extra information" 可選，可以包含一個回調，或者其他的附加信息。
**toggle**()
toggle() 用于將元素的可見性改成和當前的相反，將可見的元素隱藏，將隱藏的元素可見。
~~~
$this->jquery->toggle(target);
~~~
"target" 是任何有效的 jQuery 選擇器。
**animate**()
~~~
$this->jquery->animate(target, parameters, optional speed, optional extra information);
~~~
* "target" 是任何有效的 jQuery 選擇器。
* "parameters" 通常是你想改變元素的一些 CSS 屬性。
* "speed" 可選，可以設置為 slow、normal、fast 或你自己設置的毫秒數。
* "extra information" 可選，可以包含一個回調，或者其他的附加信息。
更完整的說明，參見 http://api.jquery.com/animate/
下面是個在 ID 為 "note" 的一個 div 上使用 animate() 的例子，它使用了 jQuery 庫的 click 事件， 通過 click 事件觸發。
~~~
$params = array(
'height' => 80,
'width' => '50%',
'marginLeft' => 125
);
$this->jquery->click('#trigger', $this->jquery->animate('#note', $params, 'normal'));
~~~
**toggleClass**()
該函數用于往目標元素添加或移除一個 CSS 類。
~~~
$this->jquery->toggleClass(target, class)
~~~
* "target" 是任何有效的 jQuery 選擇器。
* "class" 是任何 CSS 類名，注意這個類必須是在某個已加載的 CSS 文件中定義的。
**fadeIn() / fadeOut()**
這兩個特效會使某個元素漸變的隱藏和顯示。
~~~
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
~~~
* "target" 是任何有效的 jQuery 選擇器。
* "speed" 可選，可以設置為 slow、normal、fast 或你自己設置的毫秒數。
* "extra information" 可選，可以包含一個回調，或者其他的附加信息。
**slideUp() / slideDown() / slideToggle()**
這些特效可以讓元素滑動。
~~~
$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" 是任何有效的 jQuery 選擇器。
* "speed" 可選，可以設置為 slow、normal、fast 或你自己設置的毫秒數。
* "extra information" 可選，可以設置為 slow、normal、fast 或你自己設置的毫秒數。
插件
使用這個庫時還有幾個 jQuery 插件可用。
**corner**()
用于在頁面的某個元素四周添加不同樣式的邊角。更多詳細信息，參考 http://malsup.com/jquery/corner/
~~~
$this->jquery->corner(target, corner_style);
~~~
* "target" 是任何有效的 jQuery 選擇器。
* "corner_style" 可選，可以設置為任何有效的樣式，例如： round、sharp、bevel、bite、dog 等。如果只想設置某個邊角的樣式， 可以在樣式后添加一個空格，然后使用 "tl" （左上），"tr" （右上）， "bl" （左下），和 "br" （右下）。
~~~
$this->jquery->corner("#note", "cool tl br");
~~~
**tablesorter**()
待添加
**modal**()
待添加
**calendar**()
待添加
- 空白目錄
- 歡迎使用 CodeIgniter
- 安裝說明
- 下載CodeIgniter
- 安裝說明
- 從老版本升級
- 疑難解答
- CodeIgniter 概覽
- 開始
- CodeIgniter 是什么？
- 支持特性
- 應用程序流程圖
- 模型-視圖-控制器
- 架構目標
- 教程 - 內容提要
- 加載靜態內容
- 讀取新聞條目
- 創建新聞條目
- 結束語
- 向 CodeIgniter 貢獻你的力量
- 編寫 CodeIgniter 的文檔
- Developer's Certificate of Origin 1.1
- 常規主題
- CodeIgniter URL
- 控制器
- 保留名稱
- 視圖
- 模型
- 輔助函數
- 使用 CodeIgniter 類庫
- 創建類庫
- 使用 CodeIgniter 驅動器
- 創建驅動器
- 創建核心系統類
- 創建附屬類
- 鉤子 - 擴展框架核心
- 自動加載資源
- 公共函數
- 兼容性函數
- URI 路由
- 錯誤處理
- 網頁緩存
- 程序分析
- 以 CLI 方式運行
- 管理你的應用程序
- 處理多環境
- 在視圖文件中使用 PHP 替代語法
- 安全
- PHP 開發規范
- 類庫參考
- 基準測試類
- 緩存驅動器
- 日歷類
- 購物車類
- 配置類
- Email 類
- 加密類
- 加密類（新版）
- 文件上傳類
- 表單驗證類
- FTP 類
- 圖像處理類
- 輸入類
- Javascript 類
- 語言類
- 加載器類