- 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
calledtest.css
. - Set a rule to change the background color of the site to black.
body { background: #000 !important; }
- Create a JavaScript file in
/js
calledtest.js
. - Create an alert message in the JavaScript file.
alert('Hello!');
- In
controller.php
, create a new function calledon_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.
See also
- Chapter 4, Using the Core Helpers
- The Using block controller callback functions recipe
- Getting Started with Citrix XenApp? 7.6
- Redis Applied Design Patterns
- Learning Python Design Patterns(Second Edition)
- Web Application Development with MEAN
- 編譯系統透視:圖解編譯原理
- Python算法指南:程序員經典算法分析與實現
- Java零基礎實戰
- 搞定J2EE:Struts+Spring+Hibernate整合詳解與典型案例
- Web性能實戰
- IoT Projects with Bluetooth Low Energy
- 零基礎C#學習筆記
- Getting Started with JUCE
- 量子計算機編程:從入門到實踐
- Learning Gerrit Code Review
- Java程序性能優化實戰