HTML 輔助函數 · CodeIgniter3.0 中文用戶指南

# HTML 輔助函數 HTML 輔助函數文件包含了用于處理 HTML 的一些函數。 [TOC=2,3] ## [加載輔助函數](http://codeigniter.org.cn/user_guide/helpers/html_helper.html#id3) 該輔助函數通過下面的代碼加載: ~~~ $this->load->helper('html'); ~~~ ## [可用函數](http://codeigniter.org.cn/user_guide/helpers/html_helper.html#id4) 該輔助函數有下列可用函數： heading([$data = ''[,?$h = '1'[,?$attributes = '']]]) 參數: * **$data**?(string) -- Content * **$h**?(string) -- Heading level * **$attributes**?(mixed) -- HTML attributes 返回: HTML heading tag 返回類型: string 用于創建 HTML 標題標簽，第一個參數為標題內容，第二個參數為標題大小。例如: ~~~ echo heading('Welcome!', 3); ~~~ 上面代碼將生成：Welcome! 另外，為了向標題標簽添加屬性，例如 HTML class、id 或內聯樣式，可以通過第三個參數傳一個字符串或者一個數組: ~~~ echo heading('Welcome!', 3, 'class="pink"'); echo heading('How are you?', 4, array('id' => 'question', 'class' => 'green')); ~~~ 上面代碼將生成： ~~~ <h3 class="pink">Welcome!<h3> <h4 id="question" class="green">How are you?</h4> ~~~ img([$src = ''[,?$index_page = FALSE[,?$attributes = '']]]) 參數: * **$src**?(string) -- Image source data * **$index_page**?(bool) -- Whether to treat $src as a routed URI string * **$attributes**?(array) -- HTML attributes 返回: HTML image tag 返回類型: string 用于生成 HTML 標簽，第一個參數為圖片地址，例如: ~~~ echo img('images/picture.jpg'); // gives <img src="http://site.com/images/picture.jpg" /> ~~~ 第二個參數可選，其值為 TRUE 或 FALSE，用于指定是否在生成的圖片地址中添加由?$config['index_page']?所設置的起始頁面。一般來說，當你使用媒體控制器時才使用這個: ~~~ echo img('images/picture.jpg', TRUE); // gives <img src="http://site.com/index.php/images/picture.jpg" alt="" /> ~~~ 另外，你也可以通過向?img()?函數傳遞一個關聯數組來完全控制所有的屬性和值，如果沒有提供?alt?屬性， CodeIgniter 默認使用一個空字符串。例如: ~~~ $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' ); 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([$href = ''[,?$rel = 'stylesheet'[,?$type = 'text/css'[,?$title = ''[,?$media = ''[,?$index_page = FALSE]]]]]]) 參數: * **$href**?(string) -- What are we linking to * **$rel**?(string) -- Relation type * **$type**?(string) -- Type of the related document * **$title**?(string) -- Link title * **$media**?(string) -- Media type * **$index_page**?(bool) -- Whether to treat $src as a routed URI string 返回: HTML link tag 返回類型: string 用于生成 HTML 標簽，這在生成樣式的 link 標簽時很有用，當然也可以生成其他的 link 標簽。參數為?href?，后面的是可選的：rel?、type?、?title?、?media?和?index_page?。 index_page?參數是個布爾值，用于指定是否在?href?鏈接中添加由?$config['index_page']?所設置的起始頁面。例如: ~~~ echo link_tag('css/mystyles.css'); // gives <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" /> ~~~ 另一個例子: ~~~ echo link_tag('favicon.ico', 'shortcut icon', 'image/ico'); // <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" /> echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed'); // <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" /> ~~~ 另外，你也可以通過向?link()?函數傳遞一個關聯數組來完全控制所有的屬性和值: ~~~ $link = array( 'href' => 'css/printer.css', 'rel' => 'stylesheet', 'type' => 'text/css', 'media' => 'print' ); echo link_tag($link); // <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" /> ~~~ ul($list[,?$attributes = '']) 參數: * **$list**?(array) -- List entries * **$attributes**?(array) -- HTML attributes 返回: HTML-formatted unordered list 返回類型: string 用于生成 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> ~~~ 下面是個更復雜的例子，使用了多維數組: ~~~ $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> ~~~ ol($list,?$attributes = '') 參數: * **$list**?(array) -- List entries * **$attributes**?(array) -- HTML attributes 返回: HTML-formatted ordered list 返回類型: string 和?[ul()](http://codeigniter.org.cn/user_guide/helpers/html_helper.html#ul "ul")?函數一樣，只是它生成的是有序列表（）。 meta([$name = ''[,?$content = ''[,?$type = 'name'[,?$newline = "n"]]]]) 參數: * **$name**?(string) -- Meta name * **$content**?(string) -- Meta content * **$type**?(string) -- Meta type * **$newline**?(string) -- Newline character 返回: HTML meta tag 返回類型: string 用于生成 meta 標簽，你可以傳遞一個字符串參數，或者一個數組，或者一個多維數組。例如: ~~~ echo meta('description', 'My Great site'); // Generates: <meta name="description" content="My Great Site" /> echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); // Note the third parameter. Can be "equiv" or "name" // Generates: <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> echo meta(array('name' => 'robots', 'content' => 'no-cache')); // Generates: <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); // Generates: // <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([$type = 'xhtml1-strict']) 參數: * **$type**?(string) -- Doctype name 返回: HTML DocType tag 返回類型: string 用于生成 DTD （文檔類型聲明，document type declaration），默認使用的是 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 文件中找到它。 | 文檔類型 | 選項 | 結果 | | --- | --- | --- | | XHTML 1.1 | xhtml11 | | | XHTML 1.0 Strict | xhtml1-strict | | | XHTML 1.0 Transitional | xhtml1-trans | | | XHTML 1.0 Frameset | xhtml1-frame | | | XHTML Basic 1.1 | xhtml-basic11 | | | HTML 5 | html5 | | | HTML 4 Strict | html4-strict | | | HTML 4 Transitional | html4-trans | | | HTML 4 Frameset | html4-frame | | | MathML 1.01 | mathml1 | | | MathML 2.0 | mathml2 | | | SVG 1.0 | svg10 | | | SVG 1.1 Full | svg11 | | | SVG 1.1 Basic | svg11-basic | | | SVG 1.1 Tiny | svg11-tiny | | | XHTML+MathML+SVG (XHTML host) | xhtml-math-svg-xh | | | XHTML+MathML+SVG (SVG host) | xhtml-math-svg-sh | | | XHTML+RDFa 1.0 | xhtml-rdfa-1 | | | XHTML+RDFa 1.1 | xhtml-rdfa-2 | | br([$count = 1]) 參數: * **$count**?(int) -- Number of times to repeat the tag 返回: HTML line break tag 返回類型: string 根據指定的個數生成多個換行標簽（）。例如: ~~~ echo br(3); ~~~ 上面的代碼將生成： ~~~ <br /><br /><br /> ~~~ 注解該函數已經廢棄，請使用原生的?str_repeat()?函數代替。 nbs([$num = 1]) 參數: * **$num**?(int) -- Number of space entities to produce 返回: A sequence of non-breaking space HTML entities 返回類型: string 根據指定的個數生成多個不換行空格（ ）。例如: ~~~ echo nbs(3); ~~~ 上面的代碼將生成： ~~~     ~~~ 注解該函數已經廢棄，請使用原生的?str_repeat()?函數代替。