HTML輔助函數(shù)
HTML 輔助函數(shù)涵蓋了一些用于 HTML 操作的函數(shù)。
- br()
- heading()
- img()
- link_tag()
- nbs()
- ol() 和 ul()
- meta()
- doctype()
裝載輔助函數(shù)
本輔助函數(shù)的裝載通過如下代碼完成:
$this->load->helper('html');
可用的函數(shù)如下：
br()
生成指定個(gè)數(shù)的換行標(biāo)簽 (<br />) 。例如：
echo br(3);
如上代碼將顯示： <br /><br /><br />
heading()
幫助你創(chuàng)建 HTML <h1> 標(biāo)簽. 第一個(gè)字段用于標(biāo)記顯示內(nèi)容，第二個(gè)字段用于標(biāo)該標(biāo)簽所用字號(hào)。例如：
echo heading('Welcome!', 3);
如上代碼將顯示： <h3>Welcome!</h3>
Additionally, in order to add attributes to the heading tag such as HTML classes, ids or inline styles, a third parameter is available.
echo heading('Welcome!', 3, 'class="pink"')
The above code produces: <h3 class="pink">Welcome!<h3>
img()
幫助你創(chuàng)建 HTML <img /> 標(biāo)簽。 第1個(gè)參數(shù)包含的是圖片文件的路徑。 例如:
echo img('images/picture.jpg');
// 生成 <img src="http://site.com/images/picture.jpg" />
第2個(gè)參數(shù)是可選的， 其值為TRUE或者FALSE， 作用是決定該函數(shù)生成的圖片地址中是否包含由$config['index_page']所設(shè)置的起始頁面。 一般來說， 當(dāng)你使用媒體控制器時(shí)才使用這個(gè)。
echo img('images/picture.jpg', TRUE);
// 生成 <img src="http://site.com/index.php/images/picture.jpg" alt="" />
此外， 關(guān)聯(lián)數(shù)組也能夠被作為參數(shù)傳遞到 img() 函數(shù)中， 用來實(shí)現(xiàn)對(duì)所有屬性和值的完全控制。如果沒指定 alt 屬性，則 CodeIgniter 將產(chǎn)生一個(gè)空字符串。
$image_properties = array(
??????????'src' => 'images/picture.jpg',
??????????'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time',
??????????'class' => 'post_images',
??????????'width' => '200',
??????????'height' => '200',
??????????'title' => 'That was quite a night',
??????????'rel' => 'lightbox',
);
echo img($image_properties);
// <img src="http://site.com/index.php/images/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_images" width="200" height="200" title="That was quite a night" rel="lightbox" />
link_tag()
幫助你創(chuàng)建 HTML <link /> 標(biāo)簽。在鏈接樣式表以及其他內(nèi)容時(shí)非常有用。參數(shù)包括 href 以及可選的 rel, type, title, media 以及 index_page。index_page 是一個(gè)TRUE/FALSE 值，作用是決定該函數(shù)生成的 href 地址中是否包含由 $config['index_page']所設(shè)置的起始頁面。
echo link_tag('css/mystyles.css');
// 生成 <link rel="stylesheet" type="text/css" />
更多示例:
echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
// <link rel="shortcut icon" type="image/ico" />
echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
// <link rel="alternate" type="application/rss+xml" title="My RSS Feed" />
此外，關(guān)聯(lián)數(shù)組也能夠被作為參數(shù)傳遞到 link_tag() 函數(shù)中， 用來實(shí)現(xiàn)對(duì)所有屬性和值的完全控制。
$link = array(
??????????'href' => 'css/printer.css',
??????????'rel' => 'stylesheet',
??????????'type' => 'text/css',
??????????'media' => 'print'
);
echo link_tag($link);
// <link rel="stylesheet" type="text/css" media="print" />
nbs()
生成不換行的指定個(gè)數(shù)的空格標(biāo)簽( )。例如：
echo nbs(3);
如上代碼將顯示：
ol()? 和? ul()
允許你通過簡(jiǎn)單或多維的數(shù)組生成有序或無序的HTML列表。例如:
$this->load->helper('html');
$list = array(
????????????'red',
????????????'blue',
????????????'green',
????????????'yellow'
????????????);
$attributes = array(
????????????????????'class' => 'boldlist',
????????????????????'id'????=> 'mylist'
????????????????????);
echo ul($list, $attributes);
如上代碼將顯示：
<ul?class="boldlist"?id="mylist">
??<li>red</li>
??<li>blue</li>
??<li>green</li>
??<li>yellow</li>
</ul>
這是一個(gè)更復(fù)雜的例子，應(yīng)用了多維數(shù)組：
$this->load->helper('html');
$attributes = array(
????????????????????'class' => 'boldlist',
????????????????????'id'????=> 'mylist'
????????????????????);
$list = array(
????????????'colors' => array(
????????????????????????????????'red',
????????????????????????????????'blue',
????????????????????????????????'green'
????????????????????????????),
????????????'shapes' => array(
????????????????????????????????'round',
????????????????????????????????'square',
????????????????????????????????'circles' => array(
????????????????????????????????????????????????????'ellipse',
????????????????????????????????????????????????????'oval',
????????????????????????????????????????????????????'sphere'
????????????????????????????????????????????????????)
????????????????????????????),
????????????'moods'????=> array(
????????????????????????????????'happy',
????????????????????????????????'upset' => array(
????????????????????????????????????????????????????'defeated' => array(
????????????????????????????????????????????????????????????????????????'dejected',
????????????????????????????????????????????????????????????????????????'disheartened',
????????????????????????????????????????????????????????????????????????'depressed'
????????????????????????????????????????????????????????????????????????),
????????????????????????????????????????????????????'annoyed',
????????????????????????????????????????????????????'cross',
????????????????????????????????????????????????????'angry'
????????????????????????????????????????????????)
????????????????????????????)
????????????);
echo ul($list, $attributes);
如上代碼將顯示：
<ul?class="boldlist"?id="mylist">
??<li>colors
????<ul>
??????<li>red</li>
??????<li>blue</li>
??????<li>green</li>
????</ul>
??</li>
??<li>shapes
????<ul>
??????<li>round</li>
??????<li>suare</li>
??????<li>circles
????????<ul>
??????????<li>elipse</li>
??????????<li>oval</li>
??????????<li>sphere</li>
????????</ul>
??????</li>
????</ul>
??</li>
??<li>moods
????<ul>
??????<li>happy</li>
??????<li>upset
????????<ul>
??????????<li>defeated
????????????<ul>
??????????????<li>dejected</li>
??????????????<li>disheartened</li>
??????????????<li>depressed</li>
????????????</ul>
??????????</li>
??????????<li>annoyed</li>
??????????<li>cross</li>
??????????<li>angry</li>
????????</ul>
??????</li>
????</ul>
??</li>
</ul>
meta()
幫助你創(chuàng)建meta標(biāo)簽. 你可以將字符串、簡(jiǎn)單數(shù)組或者多維數(shù)組傳遞給函數(shù). 例如:
echo meta('description', 'My Great site');
// 生成: <meta name="description" content="My Great Site" />
echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); // 注意第3個(gè)參數(shù).，可以是 "equiv" 或者 "name"
// 生成: <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
echo meta(array('name' => 'robots', 'content' => 'no-cache'));
// 生成: <meta name="robots" content="no-cache" />
$meta = array(
????????array('name' => 'robots', 'content' => 'no-cache'),
????????array('name' => 'description', 'content' => 'My Great Site'),
????????array('name' => 'keywords', 'content' => 'love, passion, intrigue, deception'),
????????array('name' => 'robots', 'content' => 'no-cache'),
????????array('name' => 'Content-type', 'content' => 'text/html; charset=utf-8', 'type' => 'equiv')
????);
echo meta($meta);
// 生成:
// <meta name="robots" content="no-cache" />
// <meta name="description" content="My Great Site" />
// <meta name="keywords" content="love, passion, intrigue, deception" />
// <meta name="robots" content="no-cache" />
// <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
doctype()
幫助你創(chuàng)建文檔類型聲明以及DTD。默認(rèn)值是 XHTML 1.0 Strict ，但你也可以指定其他很多文檔類型。
echo doctype();
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
echo doctype('html4-trans');
// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
下面是支持的文檔類型列表。它們都是可靈活配置的，可以在 application/config/doctypes.php 中配置。
| 文檔類型 | 選項(xiàng) | 結(jié)果 |
|---|---|---|
| XHTML 1.1 | doctype('xhtml11') | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> |
| XHTML 1.0 Strict | doctype('xhtml1-strict') | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| XHTML 1.0 Transitional | doctype('xhtml1-trans') | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| XHTML 1.0 Frameset | doctype('xhtml1-frame') | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
| HTML 5 | doctype('html5') | <!DOCTYPE html> |
| HTML 4 Strict | doctype('html4-strict') | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| HTML 4 Transitional | doctype('html4-trans') | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| HTML 4 Frameset | doctype('html4-frame') | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
?