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