Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

87 lines (73 sloc) 3.746 kb
//Create a custom module metadata set
$customModules = array(
"JSONModule" => array(
"name" => 'JSONModule',
"type" => 'js', // 'js' or 'css'
"fullpath" => '' // overrides path
"customJS" => array(
"name" => 'customJS',
"type" => 'js',
"fullpath" => './assets/custom/data.js',
"requires" => array('JSONModule')
"customCSS" => array(
"name" => 'customCSS',
"type" => 'css',
"fullpath" => './assets/custom/custom.css'
//Get a new YAHOO_util_Loader instance which includes just our custom metadata (No YUI metadata)
//Note: rand is used here to help cache bust the example
$loader = new YAHOO_util_Loader($yuiCurrentVersion, 'my_custom_config_'.rand(), $customModules, true);
$loader->load("JSONModule", "customJS", "customCSS");
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>YUI PHP Loader Utility Example: Adding Custom (Non-YUI) Content with YUI PHP Loader</title>
<?PHP echo $loader->css(); ?>
<h1>YUI PHP Loader Utility Example: Adding Custom (Non-YUI) Content with YUI PHP Loader</h1>
<p><a href="">The YUI PHP Loader Utility</a> is designed, of course, to
help you put YUI components on the page. While the YUI PHP Loader is great at loading YUI resources it is important
to point out that it can also be a great resource for loading custom non-YUI JavaScript and CSS resources on the page
as well. These can be mixed in with YUI dependencies and/or be all custom modules.</p>
<p>This example shows you how to create a set of custom (non-YUI) modules and load them via YUI PHP Loader.</p>
<p>For this example we will load a remote JavaScript resource (i.e.) Douglas Crockford's JSON utility from
<a href=""></a>, some local JSON data, and a custom CSS module via the
<a href="">YUI PHP Loader Utility</a>. When the document is loaded will
process the JSON data with the JSON utility, create additional unordered list items with that data, and apply a CSS class
to the last item which will use custom styles defined in our custom CSS module. The source for this example, including
the server-side PHP code, can be seen <a href="phploader-custom-modules.php">here</a>.</p>
<ul id="sample-list">
<li class="first">This list starts with one static list item</li>
<?PHP echo $loader->script(); ?>
<script type="text/javascript">
window.onload = function() {
var i,
sampleList = document.getElementById("sample-list"),
JSONObject = JSON.parse(JSONString),
itemCount = JSONObject.length;
//Look over the JSON data and output a new li for each record
for(i = 0; i < itemCount; i++) {
tmpLi = document.createElement("li");
//We'll highlight the last item red using a class from our custom css module
if (i === itemCount - 1) {
tmpLi.className = 'last';
tmpLi.innerHTML = JSONObject[i].itemText;
Jump to Line
Something went wrong with that request. Please try again.