HTML辅助函数

HTML 辅助函数涵盖了一些用于 HTML 操作的函数。

装载辅助函数

本辅助函数的装载通过如下代码完成:

  1. $this->load->helper('html');
可用的函数如下: ## br() 生成指定个数的换行标签 (<br />) 。例如:
  1. echo br(3);
如上代码将显示: <br /><br /><br /> ## heading() 帮助你创建 HTML <h1> 标签. 第一个字段用于标记显示内容,第二个字段用于标该标签所用字号。例如:
  1. 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.
  1. echo heading('Welcome!', 3, 'class="pink"')
The above code produces: <h3 class="pink">Welcome!<h3> ## img() 帮助你创建 HTML <img /> 标签。 第1个参数包含的是图片文件的路径。 例如:
  1. echo img('images/picture.jpg');
  2. // 生成 <img src="http://site.com/images/picture.jpg" />
第2个参数是可选的, 其值为TRUE或者FALSE, 作用是决定该函数生成的图片地址中是否包含由$config['index_page']所设置的起始页面。 一般来说, 当你使用媒体控制器时才使用这个。
  1. echo img('images/picture.jpg', TRUE);
  2. // 生成 <img src="http://site.com/index.php/images/picture.jpg" alt="" />

此外, 关联数组也能够被作为参数传递到 img() 函数中, 用来实现对所有属性和值的完全控制。如果没指定 alt 属性,则 CodeIgniter 将产生一个空字符串。

  1. $image_properties = array(
  2. 'src' => 'images/picture.jpg',
  3. 'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time',
  4. 'class' => 'post_images',
  5. 'width' => '200',
  6. 'height' => '200',
  7. 'title' => 'That was quite a night',
  8. 'rel' => 'lightbox',
  9. );
  10. echo img($image_properties);
  11. // <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" />

帮助你创建 HTML <link /> 标签。在链接样式表以及其他内容时非常有用。参数包括 href 以及可选的 rel, type, title, media 以及 index_page。index_page 是一个TRUE/FALSE 值,作用是决定该函数生成的 href 地址中是否包含由 $config['index_page']所设置的起始页面。

  1. echo link_tag('css/mystyles.css');// 生成 <link href="http://site.com/css/mystyles.css&#34; rel="stylesheet" type="text/css" />

更多示例:

  1. echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
  2. // <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />
  3. echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
  4. // <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />
此外,关联数组也能够被作为参数传递到 link_tag() 函数中, 用来实现对所有属性和值的完全控制。
  1. $link = array(
  2. 'href' => 'css/printer.css',
  3. 'rel' => 'stylesheet',
  4. 'type' => 'text/css',
  5. 'media' => 'print'
  6. );
  7. echo link_tag($link);
  8. // <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />

nbs()

生成不换行的指定个数的空格标签(&nbsp;)。例如:

  1. echo nbs(3);
如上代码将显示: &nbsp;&nbsp;&nbsp; ## ol() 和 ul() 允许你通过简单或多维的数组生成有序或无序的HTML列表。例如:
  1. $this->load->helper('html');
  2. $list = array(
  3. 'red',
  4. 'blue',
  5. 'green',
  6. 'yellow'
  7. );
  8. $attributes = array(
  9. 'class' => 'boldlist',
  10. 'id' => 'mylist'
  11. );
  12. echo ul($list, $attributes);
如上代码将显示:
  1. <ul class="boldlist" id="mylist">
  2. <li>red</li>
  3. <li>blue</li>
  4. <li>green</li>
  5. <li>yellow</li>
  6. </ul>
这是一个更复杂的例子,应用了多维数组:
  1. $this->load->helper('html');
  2. $attributes = array(
  3. 'class' => 'boldlist',
  4. 'id' => 'mylist'
  5. );
  6. $list = array(
  7. 'colors' => array(
  8. 'red',
  9. 'blue',
  10. 'green'
  11. ),
  12. 'shapes' => array(
  13. 'round',
  14. 'square',
  15. 'circles' => array(
  16. 'ellipse',
  17. 'oval',
  18. 'sphere'
  19. )
  20. ),
  21. 'moods' => array(
  22. 'happy',
  23. 'upset' => array(
  24. 'defeated' => array(
  25. 'dejected',
  26. 'disheartened',
  27. 'depressed'
  28. ),
  29. 'annoyed',
  30. 'cross',
  31. 'angry'
  32. )
  33. )
  34. );
  35. echo ul($list, $attributes);
如上代码将显示:
  1. <ul class="boldlist" id="mylist">
  2. <li>colors
  3. <ul>
  4. <li>red</li>
  5. <li>blue</li>
  6. <li>green</li>
  7. </ul>
  8. </li>
  9. <li>shapes
  10. <ul>
  11. <li>round</li>
  12. <li>suare</li>
  13. <li>circles
  14. <ul>
  15. <li>elipse</li>
  16. <li>oval</li>
  17. <li>sphere</li>
  18. </ul>
  19. </li>
  20. </ul>
  21. </li>
  22. <li>moods
  23. <ul>
  24. <li>happy</li>
  25. <li>upset
  26. <ul>
  27. <li>defeated
  28. <ul>
  29. <li>dejected</li>
  30. <li>disheartened</li>
  31. <li>depressed</li>
  32. </ul>
  33. </li>
  34. <li>annoyed</li>
  35. <li>cross</li>
  36. <li>angry</li>
  37. </ul>
  38. </li>
  39. </ul>
  40. </li>
  41. </ul>

meta()

帮助你创建meta标签. 你可以将字符串、简单数组或者多维数组传递给函数. 例如:

  1. echo meta('description', 'My Great site');
  2. // 生成: <meta name="description" content="My Great Site" />
  3. echo meta('Content-type', 'text/html; charset=utf-8', 'equiv'); // 注意第3个参数.,可以是 "equiv" 或者 "name"
  4. // 生成: <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  5. echo meta(array('name' => 'robots', 'content' => 'no-cache'));
  6. // 生成: <meta name="robots" content="no-cache" />
  7. $meta = array(
  8. array('name' => 'robots', 'content' => 'no-cache'),
  9. array('name' => 'description', 'content' => 'My Great Site'),
  10. array('name' => 'keywords', 'content' => 'love, passion, intrigue, deception'),
  11. array('name' => 'robots', 'content' => 'no-cache'),
  12. array('name' => 'Content-type', 'content' => 'text/html; charset=utf-8', 'type' => 'equiv')
  13. );
  14. echo meta($meta);
  15. // 生成:
  16. // <meta name="robots" content="no-cache" />
  17. // <meta name="description" content="My Great Site" />
  18. // <meta name="keywords" content="love, passion, intrigue, deception" />
  19. // <meta name="robots" content="no-cache" />
  20. // <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

doctype()

帮助你创建文档类型声明以及DTD。默认值是 XHTML 1.0 Strict ,但你也可以指定其他很多文档类型。

  1. echo doctype();// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;echo doctype('html4-trans');// <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
下面是支持的文档类型列表。它们都是可灵活配置的,可以在 application/config/doctypes.php 中配置。

文档类型选项结果
XHTML 1.1doctype('xhtml11')<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt;
XHTML 1.0 Strictdoctype('xhtml1-strict')<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
XHTML 1.0 Transitionaldoctype('xhtml1-trans')<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
XHTML 1.0 Framesetdoctype('xhtml1-frame')<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"&gt;
HTML 5doctype('html5')<!DOCTYPE html>
HTML 4 Strictdoctype('html4-strict')<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
HTML 4 Transitionaldoctype('html4-trans')<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
HTML 4 Framesetdoctype('html4-frame')<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"&gt;

翻译贡献者:Hex, szlinz, yinzhili