CodeIgnitor: HTML Helper
Helper này có chứa các hàm hỗ trợ cho ta khi làm việc với HTML.
Tải HTML Helper
$this->load->helper('html');
Các hàm hiện có của HTML Helper
heading($data, $h, $attributes)
| Tham số: |
|
|---|---|
| Trả về: |
Thẻ Heading |
| Kiểu trả về: |
string |
Hàm này dùng để tạo các thẻ tiêu đề HTML, trong đó tham số đầu tiên là nội dung mà thẻ chứa, tham số thứ hai là mức tiêu đề của thẻ. Ví dụ:
echo heading('Welcome!', 3);
// Sẽ tạo ra: <h3>Welcome!</h3>
Ngoài ra, để thêm các thuộc tính cho thẻ heading như là class, id hay style thì ta sử dụng tham số thứ 3 của hàm và thể hiện nó ở dạng mảng hoặc chuỗi. Ví dụ:
echo heading('Welcome!', 3, 'class="pink"');
echo heading('How are you?', 4, array('id' => 'question', 'class' => 'green'));
//Sẽ tạo ra:
<h3 class="pink">Welcome!<h3>
<h4 id="question" class="green">How are you?</h4>
img($src, $index_page, $attributes)
| Tham số: |
|
|---|---|
| Trả về: |
Thẻ <img> |
| Kiểu trả về: |
string |
Hàm này dùng để tạo thẻ <img />. Tham số đầu tiên chứa nguồn của ảnh. Ví dụ:
echo img('public/images/article/picture.jpg'); // gives <img src="http://site.com/public/images/article/picture.jpg" />
Tham số tùy chọn thứ hai chứa giá trị TRUE hoặc FALSE dùng để xác định xem nguồn ảnh có được dùng trong $config['index_page'] hay không. Ví dụ:
echo img('public/images/article/picture.jpg', TRUE);
// Sẽ tương đương: <img src="http://site-của-bạn.com/index.php/public/images/article/picture.jpg" alt="" />
Ngoài ra, ta co thể dùng tham số thứ 3 để cung cấp các thuộc tính cho thẻ <img>. Nếu bạn không cung cấp giá trị cho thuộc tính alt thì nó sẽ được gán một chuỗi rỗng. Ví dụ:
$image_properties = array(
'src' => 'public/images/article/picture.jpg',
'alt' => 'Me, demonstrating how to eat 4 slices of pizza at one time',
'class' => 'post_public/images/article',
'width' => '200',
'height'=> '200',
'title' => 'That was quite a night',
'rel' => 'lightbox'
);
img($image_properties);
//Sẽ tạo ra: <img src="http://site.com/index.php/public/images/article/picture.jpg" alt="Me, demonstrating how to eat 4 slices of pizza at one time" class="post_public/images/article" width="200" height="200" title="That was quite a night" rel="lightbox" />
link_tag($href, $rel, $type, $title, $media, $index_page)
| Tham số: |
|
|---|---|
| Trả về: |
Thẻ <link /> |
| Kiểu trả về: |
string |
Hàm này dùng để tạo thẻ <link />. Ví dụ:
echo link_tag('css/mystyles.css');
//Sẽ tạo ra: <link href="http://site.com/css/mystyles.css" rel="stylesheet" type="text/css" />
echo link_tag('favicon.ico', 'shortcut icon', 'image/ico');
//Sẽ tạo ra: <link href="http://site.com/favicon.ico" rel="shortcut icon" type="image/ico" />
echo link_tag('feed', 'alternate', 'application/rss+xml', 'My RSS Feed');
//Sẽ tạo ra: <link href="http://site.com/feed" rel="alternate" type="application/rss+xml" title="My RSS Feed" />
Ngoài ra, ta có thể sử dụng mảng để tạo các thuộc tính và truyền vào cho hàm link() như ví dụ sau:
$link = array(
'href' => 'css/printer.css',
'rel' => 'stylesheet',
'type' => 'text/css',
'media' => 'print'
);
echo link_tag($link);
//Sẽ tạo ra: <link href="http://site.com/css/printer.css" rel="stylesheet" type="text/css" media="print" />
ul($list, $attributes)
| Tham số: |
|
|---|---|
| Trả về: |
Thẻ <ul> và các thẻ con <li> |
| Kiểu trả về: |
string |
Hàm này cho phép bạn tạo thẻ <ul> và các thẻ con <li>. Ví dụ:
$list = array(
'red',
'blue',
'green',
'yellow'
);
$attributes = array(
'class' => 'boldlist',
'id' => 'mylist'
);
echo ul($list, $attributes);
//Sẽ tạo ra:
<ul class="boldlist" id="mylist">
<li>red</li>
<li>blue</li>
<li>green</li>
<li>yellow</li>
</ul>
Còn dưới đây là ví dụ phức tạp hơn dùng mảng đa chiều:
$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);
//Đoạn mã trên sẽ tạo ra:
<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)
| Tham số: |
|
|---|---|
| Trả về: |
Thẻ <ol> với các thẻ con <li> |
| Kiểu trả về: |
string |
Hàm này tương tự như hàm ul(), chỉ khác ở chỗ nó tạo ra thẻ <ol> thay vì thẻ <ul>.
meta($name, $content, $type, $newline)
| Tham số: |
|
|---|---|
| Trả về: |
Thẻ <meta> |
| Kiểu trả về: |
string |
Hàm này giúp ta tạo thẻ <meta>. Ta có thể truyền các chuỗi tới hàm, hoặc một mảng đơn hoặc mảng đa chiều. Ví dụ:
echo meta('description', 'My Great site');
// Sẽ tạo ra: <meta name="description" content="My Great Site" />
echo meta('Content-type', 'text/html; charset=utf-8', 'equiv');
// Lưu ý: tham số thứ 3 có thể là "equiv" hoặc "name"
// Sẽ tạo ra: <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
echo meta(array('name' => 'robots', 'content' => 'no-cache'));
// Sẽ tạo ra: <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);
// Sẽ tạo ra:
// <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)
| Tham số: |
$type (string) – Tên của <!doctype> |
|---|---|
| Trả về: |
Khai báo <!doctype> |
| Kiểu trả về: |
string |
Thẻ này dùng để tạo khai báo <!doctype> hoặc các DTD, mặc định là XHTML 1.0 Strict. Ví dụ:
echo doctype();
//Sẽ tạo ra: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
echo doctype('html4-trans');
//Sẽ tạo ra: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Dưới đây là một danh sách các lựa chọn doctype, ta có thể cấu hình và lấy nó từ application/config/doctypes.php:
| Document type | Tùy chọn | Sẽ cho ra |
|---|---|---|
| XHTML 1.1 | xhtml11 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd“> |
| XHTML 1.0 Strict | 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 | 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 | xhtml1-frame | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“> |
| XHTML Basic 1.1 | xhtml-basic11 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd“> |
| HTML 5 | html5 | <!DOCTYPE html> |
| HTML 4 Strict | html4-strict | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“> |
| HTML 4 Transitional | html4-trans | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“> |
| HTML 4 Frameset | html4-frame | <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“> |
| MathML 1.01 | mathml1 | <!DOCTYPE math SYSTEM “http://www.w3.org/Math/DTD/mathml1/mathml.dtd“> |
| MathML 2.0 | mathml2 | <!DOCTYPE math PUBLIC “-//W3C//DTD MathML 2.0//EN” “http://www.w3.org/Math/DTD/mathml2/mathml2.dtd“> |
| SVG 1.0 | svg10 | <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.0//EN” “http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd“> |
| SVG 1.1 Full | svg11 | <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd“> |
| SVG 1.1 Basic | svg11-basic | <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Basic//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-basic.dtd“> |
| SVG 1.1 Tiny | svg11-tiny | <!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1 Tiny//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd“> |
| XHTML+MathML+SVG (XHTML host) | xhtml-math-svg-xh | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN” “http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd“> |
| XHTML+MathML+SVG (SVG host) | xhtml-math-svg-sh | <!DOCTYPE svg:svg PUBLIC “-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN” “http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd”> |
| XHTML+RDFa 1.0 | xhtml-rdfa-1 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.0//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd“> |
| XHTML+RDFa 1.1 | xhtml-rdfa-2 | <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML+RDFa 1.1//EN” “http://www.w3.org/MarkUp/DTD/xhtml-rdfa-2.dtd“> |
br($count)
| Tham số: |
$count (int) – Số lượng thẻ <br /> muốn tạo |
|---|---|
| Trả về: |
Thẻ <br/> |
| Kiểu trả về: |
string |
Hàm này dùng để tạo thẻ <br />). Ví dụ:
echo br(3);
//Sẽ tạo ra:
<br /><br /><br />
Lưu ý là hàm này không còn được khuyến khích dùng nữa, ta nên dùng hàm str_repeat() kết hợp với thẻ <br /> để thay thế.
nbs($num)
| Tham số: |
$num (int) – Số lượng dấu cách (space) muốn tạo |
|---|---|
| Trả về: |
Các dấu cách (non-breaking space) |
| Kiểu trả về: |
string |
Hàm này dùng để tạo các dấu cách ( ). Ví dụ:
echo nbs(3);
//Sẽ tạo ra:
Lưu ý là hàm này không còn được khuyến khích dùng nữa, thay vào đó ta nên dùng hàm str_repeat() kết hợp với để thay thế.
