mirror of
https://github.com/alchemy-fr/Phraseanet.git
synced 2025-10-15 05:53:13 +00:00
236 lines
8.3 KiB
HTML
236 lines
8.3 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Getting CSS Style Sheets</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
|
|
<script type="text/javascript" src="../../build/yahoo-dom-event/yahoo-dom-event.js"></script>
|
|
<script type="text/javascript" src="../../build/element/element-min.js"></script>
|
|
<script type="text/javascript" src="../../build/button/button-min.js"></script>
|
|
<script type="text/javascript" src="../../build/get/get-min.js"></script>
|
|
|
|
|
|
<!--begin custom header content for this example-->
|
|
<style type="text/css" id="styleoverrides">
|
|
|
|
#container .hd {
|
|
background-image:url(http://l.yimg.com/a/i/us/nt/ma/ma_nws_1.gif);
|
|
background-position:top right;
|
|
background-repeat:no-repeat;
|
|
background-color:none;
|
|
}
|
|
|
|
#container h2 {
|
|
border:none;
|
|
margin-top:0;
|
|
}
|
|
|
|
#container h3 {
|
|
color:#999999;
|
|
}
|
|
|
|
#buttonContainer {
|
|
padding-bottom:.5em;
|
|
}
|
|
|
|
#container .module {
|
|
padding:.5em 1em 1em 1em;
|
|
overflow:hidden;
|
|
}
|
|
|
|
/*
|
|
|
|
When we load the new CSS files, these files will be loaded above this style block.
|
|
If we need to override any styles supplied by the new CSS files, we can do this
|
|
here. For instance, this is useful if you are loading YUI skin files dynamically,
|
|
but want to override some of the styles.
|
|
|
|
*/
|
|
</style>
|
|
|
|
<!--end custom header content for this example-->
|
|
|
|
</head>
|
|
|
|
<body class="yui-skin-sam">
|
|
|
|
|
|
<h1>Getting CSS Style Sheets</h1>
|
|
|
|
<div class="exampleIntro">
|
|
<p><a href="http://developer.yahoo.com/yui/get">The YUI Get Utility</a> can be
|
|
used to fetch CSS stylesheets after the page has loaded. This allows you to
|
|
reduce the size of your "main" stylesheet by segregating the style rules for
|
|
specific modules that may not be displayed when the page is first rendered.
|
|
Once the module is needed, you can bring in the CSS (and JavaScript)
|
|
dynamically using the Get Utility.</p>
|
|
|
|
<p>The example below demonstrates the dynamic addition and removal of three
|
|
stylesheets that change the appearance of the News module. By clicking on the
|
|
buttons (which make use of the <a
|
|
href="http://developer.yahoo.com/yui/button/">YUI Button Control</a>), you can
|
|
add/remove border, background, and font treatments for the module.
|
|
(<strong>Note:</strong> The News module itself is built using the Get Utility
|
|
to fetch JSON data from the <a
|
|
href="http://developer.yahoo.com/search/news/V1/newsSearch.html">Yahoo! News
|
|
Search web service</a>; it follows the same code pattern described in the <a
|
|
href="get-script-basic.html">"Getting a Script Node with JSON Data"</a>
|
|
example.) </p>
|
|
|
|
</div>
|
|
|
|
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
<div id="container">
|
|
|
|
<div id="buttonContainer">
|
|
<!--YUI Button instances, created from script, will go here.-->
|
|
</div>
|
|
|
|
<div class="module">
|
|
<div class="hd"><h2>In the News:</h2></div>
|
|
<div class="bd" id="results">
|
|
<!--News stories will be displayed here.-->
|
|
</div>
|
|
<div class="ft">
|
|
<div id="searchControls">
|
|
<!--Use a real form that works without JavaScript:-->
|
|
<form method="GET" action="http://search.yahooapis.com/NewsSearchService/V1/newsSearch" id="newsSearch">
|
|
<label for="searchString">Search Yahoo! News:</label> <input type="text" name="p" id="searchString" value="San Francisco" size="40">
|
|
<input type="submit" id="getNewsData" value="Search Yahoo! News">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script language="javascript">
|
|
|
|
// Encapsulating our code in a self-executing anonymous function
|
|
// is one way to create a namespace:
|
|
(function() {
|
|
|
|
// shortcuts and other variables:
|
|
var Button = YAHOO.widget.Button,
|
|
Event = YAHOO.util.Event,
|
|
Dom = YAHOO.util.Dom,
|
|
Get = YAHOO.util.Get,
|
|
elContainer = Dom.get("container"),
|
|
tIds = {};
|
|
|
|
// YUI Buttons are attractive and effective for "call to action"
|
|
// tasks like the one here. We'll create buttons purely from
|
|
// JavaScript; there's no need for this style-change functionality
|
|
// to be "accessible"; in fact, it's purely cosmetic, so keeping
|
|
// these buttons out of the page's initial DOM is preferable. We'll
|
|
// use the "name" property of the button to determine what CSS to
|
|
// load when each button is clicked:
|
|
var borderButton = new Button({
|
|
id: "borderButton",
|
|
type: "checkbox",
|
|
name: "border",
|
|
label: "Border CSS",
|
|
container: "buttonContainer"
|
|
});
|
|
var backgroundButton = new Button({
|
|
id: "backgroundButton",
|
|
type: "checkbox",
|
|
name: "background",
|
|
label: "Background CSS",
|
|
container: "buttonContainer"
|
|
});
|
|
var textButton = new Button({
|
|
id: "textButton",
|
|
type: "checkbox",
|
|
name: "text",
|
|
label: "Text CSS",
|
|
container: "buttonContainer"
|
|
});
|
|
// Making available outside the anonymous function so these can be
|
|
// introspected in FireBug if desired:
|
|
YAHOO.example.buttons = [borderButton, backgroundButton, textButton];
|
|
|
|
// Checkbox buttons are either checked or unchecked; when their state
|
|
// changes, their "onCheckedChange" event fires. We'll use that
|
|
// event to trigger the loading and unloading of CSS using the Get
|
|
// Utility.
|
|
var onCheckedChange = function() {
|
|
//Which button was actuated?
|
|
var name = this.get("name");
|
|
//The button's checked state has already been updated, so if
|
|
//true we load the necessary CSS:
|
|
if(this.get("checked")) {
|
|
// We'll use the 'data' parameter to pass through the name
|
|
// of the CSS file to our onSuccess handler. This allows
|
|
// us to have access to the purge method when we want
|
|
// to remove the CSS.
|
|
//
|
|
// In addition, we use the 'insertBefore' property to specify
|
|
// the id of a style block we want to insert the new nodes
|
|
// before. By doing this, we can ensure that any style overrides
|
|
// for the dynamically loaded CSS will be applied in the correct
|
|
// order.
|
|
Get.css("../get/assets/" + name + ".css", {
|
|
data: name,
|
|
insertBefore: "styleoverrides",
|
|
onSuccess: onSuccess
|
|
});
|
|
} else {
|
|
// In onSuccess, we save a reference to the callback object
|
|
// in an associative array (tIds) indexed by the CSS name. That
|
|
// allows us here, when the CSS needs to be removed, to simply
|
|
// call the purge method corresponding to the item we want to
|
|
// remove. Purge clears all the link nodes that were created
|
|
// as part of the transaction (in this case, just a single
|
|
// link node).
|
|
tIds[this.get("name")].purge();
|
|
YAHOO.log("CSS was successfully purged; our object containing transaction ids now looks like this: " + YAHOO.lang.dump(tIds, 1), "info", "example");
|
|
|
|
// Some A-Grade browsers won't repaint automatically when CSS link nodes
|
|
// are removed. You can nudge these browsers to repaint by adding
|
|
// a blank CSS stylesheet to the page:
|
|
Get.css("../get/assets/neutral.css");
|
|
}
|
|
};
|
|
|
|
// Now we can subscribe our onCheckedChange function to each
|
|
// of our three YUI Buttons' "checkedChange" event:
|
|
borderButton.on("checkedChange", onCheckedChange);
|
|
backgroundButton.on("checkedChange", onCheckedChange);
|
|
textButton.on("checkedChange", onCheckedChange);
|
|
|
|
// As noted above, in onSuccess we want to save the callback
|
|
// object in an associative array indexed by CSS file name so that
|
|
// we can purge the link nodes later if the CSS file needs to be
|
|
// removed.
|
|
var onSuccess = function(o) {
|
|
tIds[o.data] = o;
|
|
YAHOO.log("CSS was successfully returned; our object containing transaction ids now looks like this: " + YAHOO.lang.dump(tIds, 1), "info", "example");
|
|
}
|
|
|
|
})();
|
|
</script>
|
|
|
|
<script src="../get/assets/getNews.js" type="text/javascript"></script>
|
|
|
|
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
|
|
|
|
</body>
|
|
</html>
|