JavaScript DHTML/YUI Library/Layout
Содержание
- 1 Full Page Layout
- 2 Layout components as border layout
- 3 Nested Layout - Example
- 4 Using a Layout with Grids CSS
- 5 YUI: CSS Grid Builder
- 6 Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)
- 7 Example: Website Left Nav With Submenus From JavaScript (YUI Library)
- 8 Example: Website Top Nav With Submenus From JavaScript (YUI Library)
Full Page Layout
<source lang="html4strict">
<!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=ISO-8859-1" /> <title>Full Page Layout - Example</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;
}
- toggle {
text-align: center; padding: 1em;
}
- toggle a {
padding: 0 5px; border-left: 1px solid black;
}
- tRight {
border-left: none !important;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script>
</head> <body class=" yui-skin-sam">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Right 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
<a href="#" id="tRight">Toggle Right</a><a href="#" id="tLeft">Toggle Left</a><a href="#" id="closeLeft">Close Left</a><a href="#" id="padRight">Add Gutter to Right</a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var layout = new YAHOO.widget.Layout({ units: [ { position: "top", height: 50, body: "top1", header: "Top", gutter: "5px", collapse: true, resize: true }, { position: "right", header: "Right", width: 300, resize: true, gutter: "5px", footer: "Footer", collapse: true, scroll: true, body: "right1", animate: true }, { position: "bottom", header: "Bottom", height: 100, resize: true, body: "bottom1", gutter: "5px", collapse: true }, { position: "left", header: "Left", width: 200, resize: true, body: "left1", gutter: "5px", collapse: true, close: true, collapseSize: 50, scroll: true, animate: true }, { position: "center", body: "center1" } ] }); layout.on("render", function() { layout.getUnitByPosition("left").on("close", function() { closeLeft(); }); }); layout.render(); Event.on("tLeft", "click", function(ev) { Event.stopEvent(ev); layout.getUnitByPosition("left").toggle(); }); Event.on("tRight", "click", function(ev) { Event.stopEvent(ev); layout.getUnitByPosition("right").toggle(); }); Event.on("padRight", "click", function(ev) { Event.stopEvent(ev); var pad = prompt("CSS gutter to apply: ("2px" or "2px 4px" or any combination of the 4 sides)", layout.getUnitByPosition("right").get("gutter")); layout.getUnitByPosition("right").set("gutter", pad); }); var closeLeft = function() { var a = document.createElement("a"); a.href = "#"; a.innerHTML = "Add Left Unit"; Dom.get("closeLeft").parentNode.appendChild(a); Dom.setStyle("tLeft", "display", "none"); Dom.setStyle("closeLeft", "display", "none"); Event.on(a, "click", function(ev) { Event.stopEvent(ev); Dom.setStyle("tLeft", "display", "inline"); Dom.setStyle("closeLeft", "display", "inline"); a.parentNode.removeChild(a); layout.addUnit(layout.get("units")[3]); layout.getUnitByPosition("left").on("close", function() { closeLeft(); }); }); }; Event.on("closeLeft", "click", function(ev) { Event.stopEvent(ev); layout.getUnitByPosition("left").close(); }); });
})(); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Layout components as border layout
<source lang="html4strict">
<!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=ISO-8859-1" /> <title>Simple Application - Layout Example</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/container/assets/skins/sam/container.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/button/assets/skins/sam/button.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/calendar/assets/skins/sam/calendar.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/editor/assets/skins/sam/editor.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <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;
}
- demo .yui-resize-handle-br {
height: 11px; width: 11px; background-position: -20px -60px; background-color: transparent;
}
- demo .yui-calcontainer,
- demo .yui-editor-container {
border: none;
}
- demo .yui-layout {
background-color: transparent;
}
- status img {
padding: 4px; float: left;
}
- demo textarea {
visibility: hidden;
}
- demo .yui-toolbar .bd {
padding: 0; border: none; background-color: #fff;
} </style> <script type="text/javascript" src="yui_2.7.0b-lib/utilities/utilities.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/calendar/calendar-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/editor/simpleeditor-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script> </head> <body class=" yui-skin-sam">
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, layout = null, cal = null, editor = null, conn = null, panel = null, dateSelected = null, editorData = {}; panel = new YAHOO.widget.Panel("demo", { width: "700px", underlay: "none", close: false, xy: [100, 100] }); panel.setHeader("Editor");panel.setBody("");
panel.renderEvent.subscribe(function() { Event.onAvailable("layout", function() { layout = new YAHOO.widget.Layout("layout", { height: 400, units: [ { position: "top", height: 25, header: "Date Editor", gutter: "2" }, { position: "left", width: 205, body: "", gutter: "0 5 0 2" }, { position: "bottom", height: 25, id: "status", body: "Status", gutter: "2" }, { position: "center", body: "Select a date..", gutter: "0 2 0 0" } ] }); layout.on("render", function() { var c = layout.getUnitByPosition("center"); c.set("body", "<textarea id="caleditor"></textarea>"); editor = new YAHOO.widget.SimpleEditor("caleditor", { height: "305px", width: c.get("width") + "px", dompath: false, animate: false, focusAtStart: true, toolbar: { grouplabels: false, buttons: [ { group: "textstyle", label: "Font Style", buttons: [ { type: "select", label: "Arial", value: "fontname", disabled: true, menu: [ { text: "Arial", checked: true }, { text: "Arial Black" }, { text: "Comic Sans MS" }, { text: "Courier New" }, { text: "Lucida Console" }, { text: "Tahoma" }, { text: "Times New Roman" }, { text: "Trebuchet MS" }, { text: "Verdana" } ] }, { type: "spin", label: "13", value: "fontsize", range: [ 9, 75 ], disabled: true }, { type: "separator" }, { type: "push", label: "Bold", value: "bold" }, { type: "push", label: "Italic", value: "italic" }, { type: "push", label: "Underline", value: "underline" }, { type: "separator" }, { type: "color", label: "Font Color", value: "forecolor", disabled: true }, { type: "color", label: "Background Color", value: "backcolor", disabled: true } ] } ] } }); editor.on("editorContentLoaded", function() { var d = new Date(); var today = d.getMonth() + 1 + "/" + d.getDate() + "/" + d.getFullYear(); dateSelected = [today]; layout.getUnitByPosition("top").set("header", "Editing Date: " + today); cal.cfg.setProperty("selected", today); cal.render(); }); editor.render(); var l = layout.getUnitByPosition("left"); var el = document.createElement("div"); l.body.appendChild(el); cal = new YAHOO.widget.Calendar(el); cal.selectEvent.subscribe(function(ev, args) { if (dateSelected) { //Connection Manager layout.getUnitByPosition("bottom").set("body", "<img src="yui_2.7.0b-assets/layout-assets/progress.gif"> Sending Data..."); var html = editor.getEditorHTML(); var url = "yui_2.7.0b-assets/layout-assets/post4.php?html=" + html; editorData[dateSelected] = html; conn = YAHOO.util.Connect.asyncRequest("POST", url, { success: function() { layout.getUnitByPosition("bottom").set("body", "Data Saved.."); }, failure: function() { } }); editor.setEditorHTML(" "); } var d = args[0][0]; dateSelected = d[1] + "/" + d[2] + "/" + d[0]; layout.getUnitByPosition("top").set("header", "Editing Date: " + d[1] + "/" + d[2] + "/" + d[0]); if (dateSelected && editorData[dateSelected]) { editor.setEditorHTML(editorData[dateSelected]); } var dates = [dateSelected]; for (var i in editorData) { dates[dates.length] = i; } cal.cfg.setProperty("selected", dates.join(",")); cal.render(); }); cal.render(); }); layout.render(); }); }); panel.render(document.body); resize = new YAHOO.util.Resize("demo", { handles: ["br"], autoRatio: true, status: true, proxy: true, useShim: true, minWidth: 700, minHeight: 400 }); resize.on("resize", function(args) { var h = args.height; var hh = this.header.clientHeight; var padding = ((10 * 2) + 2); //Sam"s skin applied a 10px padding and a 1 px border to the element.. var bh = (h - hh - padding); Dom.setStyle(this.body, "height", bh + "px"); layout.set("height", bh); layout.set("width", (args.width - padding)); layout.resize(); //Editor Resize var th = (editor.toolbar.get("element").clientHeight + 2); //It has a 1px border.. var eH = (h - th); editor.set("width", args.width + "px"); editor.set("height", eH + "px"); }, panel, true); resize.on("endResize", function() { //Fixing IE"s calculations this.innerElement.style.height = ""; //Focus the Editor so they can type. editor._focusWindow(); }, panel, true);
})(); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Nested Layout - Example
<source lang="html4strict">
<!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=ISO-8859-1" />
<title>Nested Layout - Example</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;
}
- toggle {
text-align: center; padding: 1em;
}
- toggle a {
padding: 0 5px; border-left: 1px solid black;
}
- tRight {
border-left: none !important;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/resize/assets/skins/sam/resize.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/skins/sam/layout.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo/yahoo-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/event/event-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dom/dom-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/dragdrop/dragdrop-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/resize/resize-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script>
</head> <body class=" yui-skin-sam">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Right 1
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse justo nibh, pharetra at, adipiscing ullamcorper.
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var layout = new YAHOO.widget.Layout({ minWidth: 1000, minHeight: 500, units: [ { position: "top", height: 50, resize: false, body: "top1", header: "Top", gutter: "5px", collapse: true, resize: true, maxHeight: 100 }, { position: "right", header: "Right", width: 300, resize: true, gutter: "2px 5px", footer: "Footer", collapse: true, scroll: true, body: "right1", maxWidth: 400 }, { position: "bottom", header: "Bottom", height: 100, resize: true, body: "bottom1", gutter: "5px", collapse: true, maxHeight: 130 }, { position: "left", header: "Left", width: 200, resize: true, body: "left1", gutter: "2px 5px", collapse: true, collapseSize: 50, scroll: true, maxWidth: 300 }, { position: "center", minWidth: 400, minHeight: 200 } ] }); layout.on("render", function() { var el = layout.getUnitByPosition("center").get("wrap"); var layout2 = new YAHOO.widget.Layout(el, { parent: layout, minWidth: 400, minHeight: 200, units: [ { position: "top", header: "Top 2", height: 30, gutter: "2px", maxHeight: 80 }, { position: "right", header: "Right 2", width: 90, resize: true, proxy: false, body: "Right Content Data", collapse: true, gutter: "2px 2px 2px 5px", maxWidth: 200 }, { position: "left", header: "Left 2", width: 90, resize: true, proxy: false, body: "Left Content Data", gutter: "2px 5px 2px 2px", collapse: true, maxWidth: 200 }, { position: "center", body: "center2", gutter: "2px", scroll: true } ] }); layout2.render(); }); layout.render(); });
})(); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
Using a Layout with Grids CSS
<source lang="html4strict">
<!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=ISO-8859-1" />
<title>Using a Layout with Grids CSS</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;
}
- hd, .yui-layout-unit-top {
background-color: blue; color: white;
}
- bd, .yui-layout-unit-center {
background-color: #f2f2f2;
}
- ft, .yui-layout-unit-bottom {
background-color: red; color: #fff;
}
- nav, .yui-layout-unit-left {
background-color: #808080;
} </style> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css" /> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/layout/assets/layout-core.css" /> <script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/element/element-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/selector/selector-min.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/layout/layout-min.js"></script> </head> <body class="yui-skin-sam">
YUI: CSS Grid Builder
<script> (function() {
var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event; Event.onDOMReady(function() { var layout = new YAHOO.widget.Layout("doc1", { height: Dom.getClientHeight(), //Height of the viewport width: Dom.get("doc1").offsetWidth, //Width of the outer element minHeight: 150, //So it doesn"t get too small units: [ { position: "top", height: 45, body: "hd" }, { position: "left", width: 160, body: "nav", grids: true }, { position: "bottom", height: 25, body: "ft" }, { position: "center", body: "bd", grids: true } ] }); layout.on("beforeResize", function() { Dom.setStyle("doc1", "height", Dom.getClientHeight() + "px"); }); layout.render(); //Handle the resizing of the window Event.on(window, "resize", layout.resize, layout, true); });
})(); </script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<source lang="html4strict">
<!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>Example: Website Left Nav Using Animation With Submenus From JavaScript (YUI Library)</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<style type="text/css"> div.yui-b p { margin: 0 0 .5em 0; color: #999; } div.yui-b p strong { font-weight: bold; color: #000; } div.yui-b p em { color: #000; } h1 { font-weight: bold; margin: 0 0 1em 0; padding: .25em .5em; background-color: #ccc; } #productsandservices { position: static; }
/* For IE 6: trigger "haslayout" for the anchor elements in the root Menu by setting the "zoom" property to 1. This ensures that the selected state of MenuItems doesn"t get dropped when the user mouses off of the text node of the anchor element that represents a MenuItem"s text label. */ #productsandservices .yuimenuitemlabel { _zoom: 1; } #productsandservices .yuimenu .yuimenuitemlabel { _zoom: normal; } </style>
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/animation/animation.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<script type="text/javascript"> /* Initialize and render the Menu when its elements are ready to be scripted. */ YAHOO.util.Event.onContentReady("productsandservices", function () { /* Instantiate a Menu: The first argument passed to the constructor is the id for the Menu element to be created, the second is an object literal of configuration properties. */ var oMenu = new YAHOO.widget.Menu( "productsandservices", { position: "static", hidedelay: 750, lazyload: true, effect: { effect: YAHOO.widget.ContainerEffect.FADE, duration: 0.25 } } );
/* Define an array of object literals, each containing the data necessary to create a submenu. */ var aSubmenuData = [ { id: "communication", itemdata: [ { text: "360", url: "http://360.yahoo.ru" }, { text: "Alerts", url: "http://alerts.yahoo.ru" }, { text: "Avatars", url: "http://avatars.yahoo.ru" }, { text: "Groups", url: "http://groups.yahoo.ru " }, { text: "Internet Access", url: "http://promo.yahoo.ru/broadband" }, { text: "PIM", submenu: { id: "pim", itemdata: [ { text: "Yahoo! Mail", url: "http://mail.yahoo.ru" }, { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" }, { text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" }, { text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" } ] } }, { text: "Member Directory", url: "http://members.yahoo.ru" }, { text: "Messenger", url: "http://messenger.yahoo.ru" }, { text: "Mobile", url: "http://mobile.yahoo.ru" }, { text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }, ] }, { id: "shopping", itemdata: [ { text: "Auctions", url: "http://auctions.shopping.yahoo.ru" }, { text: "Autos", url: "http://autos.yahoo.ru" }, { text: "Classifieds", url: "http://classifieds.yahoo.ru" }, { text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" }, { text: "Real Estate", url: "http://realestate.yahoo.ru" }, { text: "Travel", url: "http://travel.yahoo.ru" }, { text: "Wallet", url: "http://wallet.yahoo.ru" }, { text: "Yellow Pages", url: "http://yp.yahoo.ru" } ] }, { id: "entertainment", itemdata: [ { text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" }, { text: "Games", url: "http://games.yahoo.ru" }, { text: "Kids", url: "http://www.yahooligans.ru" }, { text: "Music", url: "http://music.yahoo.ru" }, { text: "Movies", url: "http://movies.yahoo.ru" }, { text: "Radio", url: "http://music.yahoo.ru/launchcast" }, { text: "Travel", url: "http://travel.yahoo.ru" }, { text: "TV", url: "http://tv.yahoo.ru" } ] }, { id: "information", itemdata: [ { text: "Downloads", url: "http://downloads.yahoo.ru" }, { text: "Finance", url: "http://finance.yahoo.ru" }, { text: "Health", url: "http://health.yahoo.ru" }, { text: "Local", url: "http://local.yahoo.ru" }, { text: "Maps & Directions", url: "http://maps.yahoo.ru" }, { text: "My Yahoo!", url: "http://my.yahoo.ru" }, { text: "News", url: "http://news.yahoo.ru" }, { text: "Search", url: "http://search.yahoo.ru" }, { text: "Small Business", url: "http://smallbusiness.yahoo.ru" }, { text: "Weather", url: "http://weather.yahoo.ru" } ] } ];
// Subscribe to the Menu instance"s "beforeRender" event oMenu.subscribe("beforeRender", function () { var nSubmenus = aSubmenuData.length, i;
if (this.getRoot() == this) { for (i = 0; i < nSubmenus; i++) { this.getItem(i).cfg.setProperty("submenu", aSubmenuData[i]); } } });
/* Call the "render" method with no arguments since the markup for this Menu instance is already exists in the page. */ oMenu.render(); }); </script> </head> <body class="yui-skin-sam" id="yahoo-com">
NOTE: This example demonstrates how to add animation effects to a menu with submenus built using JavaScript.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<source lang="html4strict">
<!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>Example: Website Left Nav With Submenus From JavaScript (YUI Library)</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css"> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<style type="text/css"> div.yui-b p { margin: 0 0 .5em 0; color: #999; } div.yui-b p strong { font-weight: bold; color: #000; } div.yui-b p em { color: #000; } h1 { font-weight: bold; margin: 0 0 1em 0; padding: .25em .5em; background-color: #ccc; }
#productsandservices { position: static; }
/* For IE 6: trigger "haslayout" for the anchor elements in the root Menu by setting the "zoom" property to 1. This ensures that the selected state of MenuItems doesn"t get dropped when the user mouses off of the text node of the anchor element that represents a MenuItem"s text label. */ #productsandservices .yuimenuitemlabel { _zoom: 1; } #productsandservices .yuimenu .yuimenuitemlabel { _zoom: normal; } </style>
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<script type="text/javascript"> /* Initialize and render the Menu when its elements are ready to be scripted. */ YAHOO.util.Event.onContentReady("productsandservices", function () { /* Instantiate a Menu: The first argument passed to the constructor is the id for the Menu element to be created, the second is an object literal of configuration properties. */ var oMenu = new YAHOO.widget.Menu("productsandservices", { position: "static", hidedelay: 750, lazyload: true });
/* Define an array of object literals, each containing the data necessary to create a submenu. */ var aSubmenuData = [ { id: "communication", itemdata: [ { text: "360", url: "http://360.yahoo.ru" }, { text: "Alerts", url: "http://alerts.yahoo.ru" }, { text: "Avatars", url: "http://avatars.yahoo.ru" }, { text: "Groups", url: "http://groups.yahoo.ru " }, { text: "Internet Access", url: "http://promo.yahoo.ru/broadband" }, { text: "PIM", submenu: { id: "pim", itemdata: [ { text: "Yahoo! Mail", url: "http://mail.yahoo.ru" }, { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" }, { text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" }, { text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" } ] } }, { text: "Member Directory", url: "http://members.yahoo.ru" }, { text: "Messenger", url: "http://messenger.yahoo.ru" }, { text: "Mobile", url: "http://mobile.yahoo.ru" }, { text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }, ] }, { id: "shopping", itemdata: [ { text: "Auctions", url: "http://auctions.shopping.yahoo.ru" }, { text: "Autos", url: "http://autos.yahoo.ru" }, { text: "Classifieds", url: "http://classifieds.yahoo.ru" }, { text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" }, { text: "Real Estate", url: "http://realestate.yahoo.ru" }, { text: "Travel", url: "http://travel.yahoo.ru" }, { text: "Wallet", url: "http://wallet.yahoo.ru" }, { text: "Yellow Pages", url: "http://yp.yahoo.ru" } ] }, { id: "entertainment", itemdata: [ { text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" }, { text: "Games", url: "http://games.yahoo.ru" }, { text: "Kids", url: "http://www.yahooligans.ru" }, { text: "Music", url: "http://music.yahoo.ru" }, { text: "Movies", url: "http://movies.yahoo.ru" }, { text: "Radio", url: "http://music.yahoo.ru/launchcast" }, { text: "Travel", url: "http://travel.yahoo.ru" }, { text: "TV", url: "http://tv.yahoo.ru" } ] }, { id: "information", itemdata: [ { text: "Downloads", url: "http://downloads.yahoo.ru" }, { text: "Finance", url: "http://finance.yahoo.ru" }, { text: "Health", url: "http://health.yahoo.ru" }, { text: "Local", url: "http://local.yahoo.ru" }, { text: "Maps & Directions", url: "http://maps.yahoo.ru" }, { text: "My Yahoo!", url: "http://my.yahoo.ru" }, { text: "News", url: "http://news.yahoo.ru" }, { text: "Search", url: "http://search.yahoo.ru" }, { text: "Small Business", url: "http://smallbusiness.yahoo.ru" }, { text: "Weather", url: "http://weather.yahoo.ru" } ] } ];
// Subscribe to the Menu instance"s "beforeRender" event oMenu.subscribe("beforeRender", function () { var nSubmenus = aSubmenuData.length, i;
if (this.getRoot() == this) { for (i = 0; i < nSubmenus; i++) { this.getItem(i).cfg.setProperty("submenu", aSubmenuData[i]); } } }); /* Call the "render" method with no arguments since the markup for this Menu instance is already exists in the page. */ oMenu.render(); }); </script> </head> <body class="yui-skin-sam" id="yahoo-com">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>
<source lang="html4strict">
<!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>Example: Website Top Nav With Submenus From JavaScript (YUI Library)</title> <link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/reset-fonts-grids/reset-fonts-grids.css">
<link rel="stylesheet" type="text/css" href="yui_2.7.0b-lib/menu/assets/skins/sam/menu.css">
<style type="text/css"> div.yui-b p { margin: 0 0 .5em 0; color: #999; } div.yui-b p strong { font-weight: bold; color: #000; } div.yui-b p em { color: #000; } h1 { font-weight: bold; margin: 0 0 1em 0; padding: .25em .5em; background-color: #ccc; } #productsandservices { margin: 0 0 10px 0; } </style>
<script type="text/javascript" src="yui_2.7.0b-lib/yahoo-dom-event/yahoo-dom-event.js"></script> <script type="text/javascript" src="yui_2.7.0b-lib/container/container_core.js"></script>
<script type="text/javascript" src="yui_2.7.0b-lib/menu/menu.js"></script>
<script type="text/javascript"> /* Initialize and render the MenuBar when its elements are ready to be scripted. */ YAHOO.util.Event.onContentReady("productsandservices", function () { /* Instantiate a MenuBar: The first argument passed to the constructor is the id for the Menu element to be created, the second is an object literal of configuration properties. */ var oMenuBar = new YAHOO.widget.MenuBar("productsandservices", { autosubmenudisplay: true, hidedelay: 750, lazyload: true }); /* Define an array of object literals, each containing the data necessary to create a submenu. */ var aSubmenuData = [ { id: "communication", itemdata: [ { text: "360", url: "http://360.yahoo.ru" }, { text: "Alerts", url: "http://alerts.yahoo.ru" }, { text: "Avatars", url: "http://avatars.yahoo.ru" }, { text: "Groups", url: "http://groups.yahoo.ru " }, { text: "Internet Access", url: "http://promo.yahoo.ru/broadband" }, { text: "PIM", submenu: { id: "pim", itemdata: [ { text: "Yahoo! Mail", url: "http://mail.yahoo.ru" }, { text: "Yahoo! Address Book", url: "http://addressbook.yahoo.ru" }, { text: "Yahoo! Calendar", url: "http://calendar.yahoo.ru" }, { text: "Yahoo! Notepad", url: "http://notepad.yahoo.ru" } ] } }, { text: "Member Directory", url: "http://members.yahoo.ru" }, { text: "Messenger", url: "http://messenger.yahoo.ru" }, { text: "Mobile", url: "http://mobile.yahoo.ru" }, { text: "Flickr Photo Sharing", url: "http://www.flickr.ru" }, ] }, { id: "shopping", itemdata: [ { text: "Auctions", url: "http://auctions.shopping.yahoo.ru" }, { text: "Autos", url: "http://autos.yahoo.ru" }, { text: "Classifieds", url: "http://classifieds.yahoo.ru" }, { text: "Flowers & Gifts", url: "http://shopping.yahoo.ru/b:Flowers%20%26%20Gifts:20146735" }, { text: "Real Estate", url: "http://realestate.yahoo.ru" }, { text: "Travel", url: "http://travel.yahoo.ru" }, { text: "Wallet", url: "http://wallet.yahoo.ru" }, { text: "Yellow Pages", url: "http://yp.yahoo.ru" } ] }, { id: "entertainment", itemdata: [ { text: "Fantasy Sports", url: "http://fantasysports.yahoo.ru" }, { text: "Games", url: "http://games.yahoo.ru" }, { text: "Kids", url: "http://www.yahooligans.ru" }, { text: "Music", url: "http://music.yahoo.ru" }, { text: "Movies", url: "http://movies.yahoo.ru" }, { text: "Radio", url: "http://music.yahoo.ru/launchcast" }, { text: "Travel", url: "http://travel.yahoo.ru" }, { text: "TV", url: "http://tv.yahoo.ru" } ] }, { id: "information", itemdata: [ { text: "Downloads", url: "http://downloads.yahoo.ru" }, { text: "Finance", url: "http://finance.yahoo.ru" }, { text: "Health", url: "http://health.yahoo.ru" }, { text: "Local", url: "http://local.yahoo.ru" }, { text: "Maps & Directions", url: "http://maps.yahoo.ru" }, { text: "My Yahoo!", url: "http://my.yahoo.ru" }, { text: "News", url: "http://news.yahoo.ru" }, { text: "Search", url: "http://search.yahoo.ru" }, { text: "Small Business", url: "http://smallbusiness.yahoo.ru" }, { text: "Weather", url: "http://weather.yahoo.ru" } ] } ];
/* Subscribe to the "beforerender" event, adding a submenu to each of the items in the MenuBar instance. */ oMenuBar.subscribe("beforeRender", function () { var nSubmenus = aSubmenuData.length, i;
if (this.getRoot() == this) { for (i = 0; i < nSubmenus; i++) { this.getItem(i).cfg.setProperty("submenu", aSubmenuData[i]); } } });
/* Call the "render" method with no arguments since the markup for this MenuBar instance is already exists in the page. */ oMenuBar.render(); }); </script> </head> <body class="yui-skin-sam" id="yahoo-com">
NOTE: This example demonstrates how to add submenus via JavaScript to a menu bar built from existing markup. The menu bar is constructed using markup and enables the user to navigate to different landing pages for each product category. If JavaScript is enabled, submenus are constructed and appended to the items in the menu bar. This allows the user to skip the product landing pages and proceed directly to a given property.
<form name="example"> <select name="test"> <option value="one">One</option> <option value="two">Two</option> <option value="three">Three</option> </select> </form>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat dolor, id aliquam leo tortor eget odio. Pellentesque orci arcu, eleifend at, iaculis sit amet, posuere eu, lorem. Aliquam erat volutpat. Phasellus vulputate. Vivamus id erat. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc gravida. Ut euismod, tortor eget convallis ullamcorper, arcu odio egestas pede, ut ornare urna elit vitae mauris. Aenean ullamcorper eros a lacus. Curabitur egestas tempus lectus. Donec et lectus et purus dapibus feugiat. Sed sit amet diam. Etiam ipsum leo, facilisis ac, rutrum nec, dignissim quis, tellus. Sed eleifend.
FOOTER: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet metus. Nunc quam elit, posuere nec, auctor in, rhoncus quis, dui. Aliquam erat volutpat. Ut dignissim, massa sit amet dignissim cursus, quam lacus feugiat.
</body>
</html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/yui_2.7.0b.zip">yui_2.7.0b.zip( 4,431 k)</a>