提示: 此類是實驗性的, 其功能設置及執(zhí)行在未來版本中可能更改.
Javascript 類
CodeIgniter提供一個類庫用來加載你想用的Javascript庫. 請注意,CodeIgniter不是只引入jQuery才能運行,其他腳本庫也能運行.jquery僅僅作為一個方便的工具,如果你選擇使用它的話.
初始化 Javascript 類
為了初始化Javascript類,通常在你的控制器內手動添加,使用$this->load->library 函數(shù). 目前,唯一能用的腳本庫是jQuery,它會像這樣自動加載:
$this->load->library('javascript');
Javascript類也能接受其他參數(shù),函數(shù)js_library_driver (string) default 'jquery' and autoload (bool) default TRUE. 你可以覆蓋默認參數(shù),只要你愿意發(fā)送一個關聯(lián)數(shù)組:
$this->load->library('javascript', array('js_library_driver' => 'scripto', 'autoload' => FALSE));
再次說明,目前只有'jquery'是可用的.你可以設置autoload to FALSE, 不過,如果你不希望jquery自動包含一個jquery核心文件的腳本標記. 如果你在CodeIgniter外加載了它或者已經(jīng)在你的標記中加載了它,這個做法無疑是有用的.
一旦加載了,jQuery庫就可以這樣引用: $this->javascript
安裝與配置
在你的視圖里設置這些變量
作為一個Javascript庫,你的源文件必須提供給你的應用程序.
由于Javascript是一種客戶端語言，庫必須能夠寫入到最終輸出的內容。這通常意味:您需要在文件的<head>節(jié)設置以下變量.
<?php echo $library_src;?>
<?php echo $script_head;?>
$library_src, 就是載入真正庫文件的路徑，以及隨后任何插件腳本的調用路徑; $script_head 就是具體的事件，功能和其他命令將被渲染.
項目設置與配置庫路徑
Javascript庫中有一些配置項。這些配置項可以在application/ config.php文件，在自己的config/javascript.php文件，或在任何控制器里使用set_item（）函數(shù)里配置.
比如一個圖片被用作"ajax loader", 或者進度指示條,或者在調用ajax時顯示簡單文字信息"loading"
$config['javascript_location'] = 'http://localhost/codeigniter/themes/js/jquery/';
$config['javascript_ajax_img'] = 'images/ajax-loader.gif';
如果你把文件留在與圖片下載路徑相同的文件夾里,那么你不需要設置這個配置項.
jQuery 類
要初始化jQuery 類一般在控制器構造類里使用$this->load->library 函數(shù):
$this->load->library('jquery');
您可以發(fā)送一個可選的參數(shù),以決定在載入庫時是否將jQuery核心文件的腳本標記將自動包含庫。它將被默認創(chuàng)建。為了防止這種情況，配置加載庫如下:
$this->load->library('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, or unload的任何一個.
- "element_path" is any valid jQuery selector. 是任何有效的jquery選擇器.由于jQuery獨特的選擇器語法，通常是一個元素ID或CSS選擇器。例如，"#notice_area" 會影響到<div id="notice_area">, and "#content a.notice" 會影響div包含"notice" id為"content"的所有錨.
- "code_to_run()" 是你寫的腳本,或者一個行為程序比如在jquery下實現(xiàn)的動態(tài)效果.
特效
jQuery支持一個強大的:Effects功能.要實現(xiàn)一個效果,必須這樣加載:
$this->jquery->effect([optional path] plugin name);
// for example
$this->jquery->effect('bounce');
hide() / show()
這個功能通過控制頁面上一個項目元素的可見性實現(xiàn)效果. hide() 使其隱藏, 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ù).
- "extra information" 可選參數(shù), 包括一個回調函數(shù)或者其他額外信息.
toggle()
toggle() 將使一個項目元素從當前狀態(tài)改變成與原先相反的可見狀態(tài),原先隱藏則使項目可見，或者 顯示原先隱藏的項目.
$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 當中的一種或者是一個毫秒數(shù)值.
- "extra information" 是可選的，可以包含一個回調函數(shù)，或者其它附加信息.
想要一個完整的摘要,請參考 http://docs.jquery.com/Effects/animate
下面是一個例子, id 為"note"div調用animate(), 通過單擊引發(fā)jQuery庫的click() 事件.
$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);
- "target" 是任何有效的一個或多個jQuery選擇器.
- "speed" 是可選的，可以被設置為 slow, normal, fast 當中的一種或者是一個毫秒數(shù)值.
- "extra information" 是可選的，可以包含一個回調函數(shù)，或者其它附加信息.
toggleClass()
此功能是對目標元素添加或刪除一個CSS類.
$this->jquery->toggleClass(target, class)
- "target" 是任何有效的一個或多個jQuery選擇器.
- "class" 任何CSS類名. 請注意，這個css類必須定義在一個已加載的CSS文件.
fadeIn() / fadeOut()
這些效果是隨時間的推移實現(xiàn)一個元素的隱藏或顯示.
$this->jquery->fadeIn(target, optional speed, optional extra information);
$this->jquery->fadeOut(target, optional speed, optional extra information);
- "target" 是任何有效的一個或多個jQuery選擇器.
- "speed" 是可選的，可以被設置為 slow, normal, fast 當中的一種或者是一個毫秒數(shù)值.
- "extra information" 是可選的，可以包含一個回調函數(shù)，或者其它附加信息.
slideUp() / slideDown() / slideToggle()
這些效果是實現(xiàn)對元素的滑動.
$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 當中的一種或者是一個毫秒數(shù)值.
- "extra information" 是可選的，可以包含一個回調函數(shù)，或者其它附加信息.
插件
有一些可選擇的基于jQuery庫的插件.
corner()
用于在頁面元素四周添加不同樣式的圓角。有關詳情請參閱http://www.malsup.com/jquery/corner/
$this->jquery->corner(target, corner_style);
- "target" 是任何有效的一個或多個jQuery選擇器.
- "corner_style" is optional, 可以設置為任何樣式如圓，尖，斜面，撕紋，dog等. 個別的圓角可使用以下定位樣式"tl" (左上), "tr" (右上), "bl" (左下), or "br" (右下).
$this->jquery->corner("#note", "cool tl br");
tablesorter()
等待描述
modal()
等待描述
calendar()
等待描述
?