捕鱼机这么赢

書名： concrete5 Cookbook
作者名： David Strack
本章字數： 435字
更新時間： 2021-08-13 16:16:01

Adding items to the page header and footer from the block controller

An important part of block development is being able to add JavaScript and CSS files to the page in the appropriate places. Consider a block that is using a jQuery plugin to create a slideshow widget. You will need to include the plugin's JavaScript and CSS files in order for it to work.

In this recipe, we will add a CSS <link> tag to the page's <head> element, and a JavaScript <script> tag to bottom of the page (just before the closing </body> tag).

Getting ready

This recipe will continue working with the block that was created in the first recipe of this chapter. If you need to download a copy of that block, it is included with the code samples from this book's website.

This recipe also makes a reference to a CSS file and a JavaScript file. Those files are available for download in the code on this book's website as well.

How to do it...

The steps for adding items to the page header and footer from the block controller are as follows:

Open your block's controller.php file.
Create a CSS file in /css called test.css.
Set a rule to change the background color of the site to black.
```
body {
  background: #000 !important;
}
```
Create a JavaScript file in /js called test.js.
Create an alert message in the JavaScript file.
```
alert('Hello!');
```
In controller.php, create a new function called on_page_view().
```
public function on_page_view() {
}
```
Load the HTML helper:
```
$html = Loader::helper('html');
```

Add a CSS file to the page header:

$this->addHeaderItem($html->css('testing.css'));

Add a JavaScript file to the page footer:

$this->addFooterItem($html->javascript('test.js'));

Visit a page on your site that contains this block. You should see your JavaScript alert as well as a black background.

How it works...

As mentioned in the Using block controller callback function recipe, the ideal place to add items to the header (the page's <head> tag) and footer (just before the closing </body> tag) is the on_before_render() callback function. The addHeaderItem and addFooterItem functions are used to place strings of text in those positions of the web document. Rather than type out <script> and <link> tags in our PHP, we will use the built-in HTML helper to generate those strings. The files should be located in the site's root /css and /js directories.

Since it is typically best practice for CSS files to get loaded first and for JavaScript files to get loaded last, we place each of those items in the areas of the page that make the most sense.

官术网_书友最值得收藏!

Adding items to the page header and footer from the block controller

Getting ready

How to do it...

How it works...

See also

官术网_书友最值得收藏!

concrete5 Cookbook

Adding items to the page header and footer from the block controller

Getting ready

How to do it...

How it works...

See also