CodeIgniter Javascript 類

Javascript 類

CodeIgniter 提供一個(gè)類庫和一些共用的方法來處理 Javascript 。要注意的是， CodeIgniter 并不是只能用于 jQuery ，其他腳本庫也可以。JQuery 僅僅是 作為一個(gè)方便的工具，如果你選擇使用它的話。

重要

這個(gè)類庫已經(jīng)廢棄，不要使用它。它將永遠(yuǎn)處于 "實(shí)驗(yàn)" 版本， 而且現(xiàn)在也已經(jīng)不提供支持了。保留它只是為了向前兼容。

• 使用 Javascript 類
  • 初始化類
  • 初始化配置
    • 在視圖文件中設(shè)置變量
    • 設(shè)置庫路徑
  • jQuery 類
  • jQuery 事件
  • 特效
    • hide() / show()
    • toggle()
    • animate()
    • toggleClass()
    • fadeIn() / fadeOut()
    • slideUp() / slideDown() / slideToggle()
  • 插件
    • corner()
    • tablesorter()
    • modal()
    • calendar()

使用 Javascript 類

初始化類

要初始化 Javascript 類，你可以在控制器的構(gòu)造函數(shù)中使用 $this->load->library() 函數(shù)。目前，唯一可用的庫是 jQuery ，可以使用下面的方法加載:

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

Javascript 類也可以接受參數(shù)：

• js_library_driver (string) default: 'jquery'
• autoload (bool) default: TRUE

你可以通過一個(gè)關(guān)聯(lián)數(shù)組覆蓋默認(rèn)的參數(shù):

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

再次說明，目前只有 jQuery 是可用的，如果你不想讓 jQuery 腳本文件自動(dòng)的包含在 script 標(biāo)簽中，你可以設(shè)置 autoload 參數(shù)為 FALSE 。這在當(dāng)你在 CodeIgniter 之外 加載它時(shí)，或者 script 標(biāo)簽已經(jīng)有了的時(shí)候很有用。

一旦加載完成，jQuery 類對(duì)象就可以通過下面的方式使用:

$this->javascript

初始化配置

在視圖文件中設(shè)置變量

作為一個(gè) Javascript 庫，源文件必須能被應(yīng)用程序訪問到。

由于 Javascript 是一種客戶端語言，庫必須能寫入內(nèi)容到最終的輸出中去， 這通常就是視圖。你需要在輸出的  中包含下面的變量。

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

$library_src 是要載入的庫文件的路徑，以及之后所有插件腳本的路徑； $script_head 是需要顯示的具體的一些事件、函數(shù)和其他的命令。

設(shè)置庫路徑

在 Javascript 類庫中有一些配置項(xiàng)，它們可以在 application/config.php 文件中 設(shè)置，也可以在它們自己的配置文件 config/javascript.php 中設(shè)置，還可以通過 在控制器中使用 set_item() 方法來設(shè)置。

例如，有一個(gè) "加載中" 的圖片，或者進(jìn)度條指示，如果沒有它的話，當(dāng)調(diào)用 Ajax 請(qǐng)求時(shí)， 將會(huì)顯示 "加載中" 這樣的文本。

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

如果你把文件留在與圖片下載路徑相同的目錄里，那么你不需要設(shè)置這個(gè)配置項(xiàng)。

jQuery 類

要在你的控制器構(gòu)造函數(shù)中手工初始化 jQuery 類，使用 $this->load->library() 方法:

$this->load->library('javascript/jquery');

你可以提供一個(gè)可選的參數(shù)來決定加載該庫時(shí)是否將其自動(dòng)包含到 script 標(biāo)簽中。 默認(rèn)情況下會(huì)包含，如果不需要，可以像下面這樣來加載:

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

加載完成后，jQuery 類對(duì)象可以使用下面的代碼來訪問:

$this->jquery

jQuery 事件

使用下面的語法來設(shè)置事件。

$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 中的任何一個(gè)事件。
• "element_path" 可以是任何的 jQuery 選擇器 。 使用 jQuery 獨(dú)特的選擇器語法，通常是一個(gè)元素 ID 或 CSS 選擇器。例如，"#notice_area" 會(huì)影響到  id="notice_area"> ，"#content a.notice" 會(huì)影響到 ID 為 "content" 的元素下的所有 class 為 "notice" 的鏈接。
• "code_to_run()" 為你自己寫的腳本，或者是一個(gè) jQuery 動(dòng)作，譬如下面所介紹的特效。

特效

jQuery 庫支持很多強(qiáng)大的 特效 ，在使用特效之前， 必須使用下面的方法加載:

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

hide() / show()

這兩個(gè)函數(shù)會(huì)影響你的頁面上元素的可見性，hide() 函數(shù)用于將元素隱藏，show() 則相反。

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

• "target" 是任何有效的 jQuery 選擇器。
• "speed" 可選，可以設(shè)置為 slow、normal、fast 或你自己設(shè)置的毫秒數(shù)。
• "extra information" 可選，可以包含一個(gè)回調(diào)，或者其他的附加信息。

toggle()

toggle() 用于將元素的可見性改成和當(dāng)前的相反，將可見的元素隱藏，將隱藏的元素可見。

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

• "target" 是任何有效的 jQuery 選擇器。

animate()

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

• "target" 是任何有效的 jQuery 選擇器。
• "parameters" 通常是你想改變?cè)氐囊恍?CSS 屬性。
• "speed" 可選，可以設(shè)置為 slow、normal、fast 或你自己設(shè)置的毫秒數(shù)。
• "extra information" 可選，可以包含一個(gè)回調(diào)，或者其他的附加信息。

更完整的說明，參見 http://api.jquery.com/animate/

下面是個(gè)在 ID 為 "note" 的一個(gè) div 上使用 animate() 的例子，它使用了 jQuery 庫的 click 事件， 通過 click 事件觸發(fā)。

$params = array(
'height' => 80,
'width' => '50%',
'marginLeft' => 125
);
$this->jquery->click('#trigger', $this->jquery->animate('#note', $params, 'normal'));

toggleClass()

該函數(shù)用于往目標(biāo)元素添加或移除一個(gè) CSS 類。

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

• "target" 是任何有效的 jQuery 選擇器。
• "class" 是任何 CSS 類名，注意這個(gè)類必須是在某個(gè)已加載的 CSS 文件中定義的。

fadeIn() / fadeOut()

這兩個(gè)特效會(huì)使某個(gè)元素漸變的隱藏和顯示。

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

• "target" 是任何有效的 jQuery 選擇器。
• "speed" 可選，可以設(shè)置為 slow、normal、fast 或你自己設(shè)置的毫秒數(shù)。
• "extra information" 可選，可以包含一個(gè)回調(diào)，或者其他的附加信息。

slideUp() / slideDown() / slideToggle()

這些特效可以讓元素滑動(dòng)。

$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" 可選，可以設(shè)置為 slow、normal、fast 或你自己設(shè)置的毫秒數(shù)。
• "extra information" 可選，可以設(shè)置為 slow、normal、fast 或你自己設(shè)置的毫秒數(shù)。

插件

使用這個(gè)庫時(shí)還有幾個(gè) jQuery 插件可用。

corner()

用于在頁面的某個(gè)元素四周添加不同樣式的邊角。更多詳細(xì)信息，參考 http://malsup.com/jquery/corner/

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

• "target" 是任何有效的 jQuery 選擇器。
• "corner_style" 可選，可以設(shè)置為任何有效的樣式，譬如： round、sharp、bevel、bite、dog 等。如果只想設(shè)置某個(gè)邊角的樣式， 可以在樣式后添加一個(gè)空格，然后使用 "tl" （左上），"tr" （右上）， "bl" （左下），和 "br" （右下）。

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

tablesorter()

待添加

modal()

待添加

calendar()

待添加