JavaScript DHTML/GUI Components/Toggle — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 07:44, 26 мая 2010
Содержание
Create custom page and replace current document with it
<!-- ***********************************************************
Example 5-2
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Welcome Page</title>
<script language="JavaScript" type="text/javascript">
// create custom page and replace current document with it
function rewritePage(form) {
// accumulate HTML content for new page
var newPage = "<html>\n<head>\n<title>Page for ";
newPage += form.entry.value;
newPage += "</title>\n</head>\n<body bgcolor="cornflowerblue">\n";
newPage += "<h1>Hello, " + form.entry.value + "!</h1>\n";
newPage += "</body>\n</html>";
// write it in one blast
document.write(newPage);
// close writing stream
document.close();
}
</script>
<body>
<h1>Welcome!</h1>
<hr>
<form onsubmit="return false;">
<p>Enter your name here: <input type="text" name="entry" id="entry"></P>
<input type="button" value="New Custom Page" onclick="rewritePage(this.form);">
</form>
</body>
</html>
Dynamic Content: click show and re-click disappear (IE)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Dynamic Content</title>
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/dynamic_content.htm
//*********************************************
//* Dynamic Content *
//* (c) Premshree Pillai, *
//* http://www.qiksearch.ru *
//* E-mail : premshree@hotmail.ru *
//* Use the script freely as long as this *
//* message is intact *
//*********************************************
document.write("<form name="form1">");
document.write("<input type="hidden" name="cont1" value="ONE">");
document.write("<input type="hidden" name="cont2" value="TWO">");
document.write("<input type="hidden" name="cont3" value="THREE">");
document.write("</form>");
function showContent(name)
{
val = name;
if(document.all.prem.innerText!=eval("this.document.form1." + val + ".value"))
{
document.all.prem.innerText = eval("this.document.form1." + val + ".value");
}
else
{
document.all.prem.innerText = "";
}
}
</script>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:10pt; color:#C00000; font-weight:bold; text-decoration:none}
.link:hover{font-family:verdana,arial,helvetica; font-size:10pt; color:#FA5D00; font-weight:bold; text-decoration:underline + overline}
.header{font-family:verdana,arial,helvetica; font-size:25pt; color:#000000; font-weight:bold; text-decoration:none}
.prem{font-family:verdana,arial,helvetica; font-size:10pt; color:#FF0000; font-weight:bold; text-decoration:none}
.premshree{font-family:verdana,arial,helvetica; font-size:8pt; color:#003399; font-weight:normal; text-decoration:underline}
.premshree:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#0099FF; font-weight:normal; text-decoration:underline}
</style>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Dynamic Content</span>
<br><br>
<a href="javascript:showContent("cont1");" class="link">Content1</a> | <a href="javascript:showContent("cont2");" class="link">Content2</a> | <a href="javascript:showContent("cont3");" class="link">Content3</a>
<div id="prem" class="prem"></div>
</center>
<table align="center" width="400" cellspacing="5"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#404040">
This JavaScript displays different content for different links. On clicking on the link the content becomes visible and on clicking
on it again it becomes hidden.
<br><br>
Here only a single <div> tag has been used. The contents of each link is stored in the form of a hidden element.
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="premshree">© Premshree Pillai</a></center>
</body>
</html>
Toggle Multi select Widget
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>Multi-select Widget</title>
<script language="JavaScript" type="text/javascript">
<!--
/* ***** BEGIN LICENSE BLOCK *****
* Version: MPL 1.1/GPL 2.0/LGPL 2.1
*
* The contents of this file are subject to the Mozilla Public License Version
* 1.1 (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
* http://www.mozilla.org/MPL/
*
* Software distributed under the License is distributed on an "AS IS" basis,
* WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
* for the specific language governing rights and limitations under the
* License.
*
*
* The initial developer of the code is Andy Edmonds.
* Portions created by the Initial Developer are Copyright (C) 2001
* the Initial Developer. All Rights Reserved.
*
* Contributor(s):
* Andy Edmonds <andy@uzilla.net>
*
* Alternatively, the contents of this file may be used under the terms of
* either the GNU General Public License Version 2 or later (the "GPL"), or
* the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
* in which case the provisions of the GPL or the LGPL are applicable instead
* of those above. If you wish to allow use of your version of this file only
* under the terms of either the GPL or the LGPL, and not to allow others to
* use your version of this file under the terms of the MPL, indicate your
* decision by deleting the provisions above and replace them with the notice
* and other provisions required by the GPL or the LGPL. If you do not delete
* the provisions above, a recipient may use your version of this file under
* the terms of any one of the MPL, the GPL or the LGPL.
*
* ***** END LICENSE BLOCK ***** */
// CUSTOMIZABLE VALUES
var multis = "methods,datasources,lifecycle";
var isEdit = false; // Using numeric count for number of specified values
var inSequence = true; // Set to false to disable auto-sequential expansion
var autoCollapse = true; // Only allow one container to be expanded at a time
// TRACKING VARIABLES -- do not change
var arMultis = multis.split(",");
var curOpen = false;
var sequenceNum = 0; //Tracker for auto-sequential expansion
var isOpen = -1; // Currently open element for auto-collapse
//,activity,agent,condition";
function initMultiSelect() {
var isEdit = false;
var i, viewSummary, viewOptions;
for(i=0;i<arMultis.length;i++) {
viewSummary = document.getElementById("summary_" + arMultis[i]);
viewOptions = document.getElementById("options_" + arMultis[i]);
// In edit default to all collapsed
// In new mode, default to editing first element
// If any checkbox is selected, dont reset edit flag
if(!isEdit) {
isEdit = populateSummary(viewSummary, viewOptions);
} else {
populateSummary(viewSummary, viewOptions);
}
if(isEdit) inSequence = false;
showSummary(viewSummary, viewOptions);
}
// If it"s an edit
if(!isEdit && inSequence) {
var firstField = arMultis[0];
// Show first option panel
showOptions(
document.getElementById("summary_" + firstField),
document.getElementById("options_" + firstField)
)
}
}
function populateSummary(sum,opt) {
var editString = "<input type="button" value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);">";
var curNode;
var numChecked = 0;
var sumStr = "";
// Get all checkboxes inside current div
var inputs = opt.getElementsByTagName("input");
//alert(inputs.length + " inputs in " + opt.id);
for(var i=0;i<inputs.length;i++) {
curNode = inputs.item(i);
//alert(i);
if(curNode.nodeName == "INPUT" && curNode.getAttribute("type") == "checkbox") {
if(curNode.checked) {
if(numChecked > 0) sumStr += "; ";
numChecked++;
sumStr += curNode.getAttribute("value") + "";
//alert("At " + i + " of " + curNode.getAttribute("value"));
}
}
}
// Options selected? summarize. Otherwise? instruct.
if(sumStr.length) {
sum.innerHTML = sumStr + ".<br/>" + editString;
} else {
// No current selectiongs, provide help msg
sum.innerHTML = "Please click Edit Selections to specify" + ".<br/>" + editString;
}
// Pass back positive if items are already checked
return numChecked;
}
function showSummary(sum, opt) {
sum.style.display = "inline";
opt.style.display = "none";
isOpen = -1;
}
function showOptions(sum, opt) {
sum.style.display = "none";
opt.style.display = "inline";
if(isOpen > -1 && autoCollapse) {
showSummary(
document.getElementById("summary_" + arMultis[isOpen]),
document.getElementById("options_" + arMultis[isOpen])
)
}
isOpen = getOffset(sum.getAttribute("id"));
}
function getOffset(label) {
for(var i=0;i<arMultis.length;i++) {
if(label.indexOf(arMultis[i]) > -1) return i;
}
}
function saveOptions(optNode) {
var sumNode = document.getElementById("summary_" +optNode.getAttribute("id").split("_")[1]);
populateSummary(sumNode,optNode);
showSummary(sumNode,optNode);
if(inSequence) {
// check to see if the user is editing sequentialy
if(optNode.id.indexOf(arMultis[sequenceNum]) > -1) {
// They"re editing in sequence
sequenceNum++;
// Is there a next element to show?
if(sequenceNum < arMultis.length) {
var nextField = arMultis[sequenceNum];
showOptions(
document.getElementById("summary_" + nextField),
document.getElementById("options_" + nextField)
)
}
} else {
inSequence = false;
}
}
}
//-->
</script></head>
<body onload="initMultiSelect()">
<table cellpadding="8" cellspacing="0" width="942">
<tbody><tr>
<td valign="top" width="12%">Usability Methods</td>
<td bgcolor="#ffffff" width="88%">
<div style="display: inline;" id="options_methods"><table><tbody><tr><td valign="top">
<input name="methods" value="Card Sorting" id="cardsort" type="checkbox"><label for="carsort">Card Sorting</label><br>
<input name="methods" value="Contextual Task Analysis" id="cta" type="checkbox"><label for="cta">Contextual Task Analysis</label> <br>
<input name="methods" value="Ethnography" id="ethno" type="checkbox"><label for="ethno">Ethnography</label><br>
</td><td valign="top">
<input name="methods" value="Heuristic Review" id="heur" type="checkbox"><label for="heur">Heuristic Review</label><br>
<input name="methods" value="Remote Usability Testing" id="remote" type="checkbox"><label for="remote">Remote Usability Testing</label><br>
<input name="methods" value="Usability Testing" id="ut" type="checkbox"><label for="ut">Usability Testing</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: none;" id="summary_methods">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
</tr>
<tr bgcolor="#dddddd">
<td id="label_activity" valign="top">Datasources</td>
<td valign="top">
<div style="display: none;" id="options_datasources">
<table><tbody><tr><td valign="top">
<input name="methods" value="Competitive Review" ic="comp" type="checkbox"><label for="comp">Competitive Review</label><br>
<input name="methods" value="Performance Data" id="perf" type="checkbox"><label for="perf">Performance Data</label><br>
<input name="methods" value="Verbal Protocol" label="protocol" type="checkbox"><label for="protocol">Verbal Protocol</label><br>
</td><td valign="top">
<input name="methods" value="User Surveys" id="survey" type="checkbox"><label for="survey">User Surveys</label><br>
<input name="methods" value="Support Requests" id="support" type="checkbox"><label for="support">Support Requests</label><br>
<input name="methods" value="Usage Data" id="usage" type="checkbox"><label for="usage">Usage Data</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_datasources">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
</tr><tr><td valign="top">Lifecycle </td>
<td valign="top">
<div style="display: none;" id="options_lifecycle">
<table><tbody><tr><td valign="top">
<input name="methods" value="Acceptance Testing" id="at" type="checkbox"><label for="at">Acceptance Testing</label><br>
<input name="methods" value="Iterative Design" id="iterative" type="checkbox"><label for="iterative">Iterative Design</label><br>
<input name="methods" value="Needs Analysis" id="needs" type="checkbox"><label for="needs">Needs Analysis</label><br>
</td><td valign="top">
<input name="methods" value="Rapid Prototyping" id="proto" type="checkbox"><label for="proto">Rapid prototyping</label><br>
<input name="methods" value="Requirements Definition" id="reqs" type="checkbox"><label for="reqs">Requirements Definition</label><br>
<input name="methods" value="Specification" id="spec" type="checkbox"><label for="spec">Specification</label><br>
</td></tr></tbody></table>
<input value="Close" style="float: left;" onclick="saveOptions(this.parentNode);" type="button"></div><div style="display: inline;" id="summary_lifecycle">Please click Edit Selections to specify.<br><input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"></div>
</td>
</tr>
</tbody></table>
</body></html>
Toggle page
<!-- ***********************************************************
Example 5-14
"Dynamic HTML:The Definitive Reference"
2nd Edition
by Danny Goodman
Published by O"Reilly & Associates ISBN 0-596-00316-1
http://www.oreilly.ru
Copyright 2002 Danny Goodman. All Rights Reserved.
************************************************************ -->
<html>
<head>
<title>Today in Jollywood</title>
<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif;
background-color:#ffffff}
#banner {font-family:Comic Sans MS, Helvetica, sans-serif;
font-size:22px}
#date {font-family:Comic Sans MS, Helvetica, sans-serif;
font-size:20px}
.wrapper {display:none}
.unwrapper {display:block}
.headline {}
.story {}
#filter {position:absolute; top:10; left:330; width:400;
border:solid red 3px; padding:2px;
font-size:12px; background-color:coral}
</style>
<script language="JavaScript" type="text/javascript">
// Global variables and object constructor
var keywords = new Array();
var foundStories = new Array();
function story(id, weight) {
this.id = id;
this.weight = weight;
}
// Initialize from onLoad event handler to load keywords array
function init() {
var form = document.filterer;
for (var i = 0; i < form.elements.length; i++) {
keywords[i] = form.elements[i].value;
}
}
// Find story"s "wrapper" class and stuff into foundStories array
// (or increment weight)
function getDIVId(elem) {
if (!elem.className) {
return;
}
while (elem.className != "wrapper") {
elem = elem.parentNode;
}
if (elem.className != "wrapper") {
return;
}
for (var i = 0; i < foundStories.length; i++) {
if (foundStories[i].id == elem.id) {
foundStories[i].weight++;
return;
}
}
foundStories[foundStories.length] = new story(elem.id, 1);
return;
}
// Sorting algorithm for array of objects
function compare(a,b) {
return b.weight - a.weight;
}
// Look for keyword match(es) in a div"s text range
function searchAndWeigh(div) {
var txtRange, txt, start;
var isW3C = (typeof Range != "undefined") ? true : false;
var isIE = (document.body.createTextRange) ? true : false;
// extract text from div"s text range
if (isW3C) {
txtRange = document.createRange();
txtRange.selectNode(div);
txt = txtRange.toString();
} else if (isIE) {
txtRange = document.body.createTextRange();
txtRange.moveToElementText(div);
txt = txtRange.text;
} else {
return;
}
// search text for matches
for (var i = 0; i < keywords.length; i++) {
// But only for checkmarked keywords
if (document.filterer.elements[i].checked) {
start = 0;
// use indexOf(), advancing start index as needed
while (txt.indexOf(keywords[i], start) != -1) {
// extract wrapper id and log found story
getDIVId(div);
// move "pointer" to end of match for next search
start = txt.indexOf(keywords[i], start) + keywords[i].length;
}
}
}
}
// Main function finds matches and displays stories
function filter() {
var divs, i;
var news = document.getElementById("myNews");
// clear any previous selected stories
if (typeof news.childNodes == "undefined") {return;}
while (news.hasChildNodes()) {
news.removeChild(news.firstChild);
}
// look for keyword matches
divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className && divs[i].className == "wrapper") {
searchAndWeigh(divs[i]);
}
}
if (foundStories.length == 0) {
// no matches, so grab all stories as delivered
// start by assembling an array of all DIV elements
divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
if (divs[i].className && divs[i].className == "wrapper") {
foundStories[foundStories.length] = new story(divs[i].id);
}
}
} else {
// sort selected stories by weight
foundStories.sort(compare);
}
var oneStory = "";
for (i = 0; i < foundStories.length; i++) {
oneStory = document.getElementById(foundStories[i].id).cloneNode(true);
oneStory.className = "unwrapper";
document.getElementById("myNews").appendChild(oneStory);
}
foundStories.length = 0;
}
</script>
</head>
<body onLoad="init();filter();">
<h1 id="banner">Today in Jollywood</h1>
<h2 id="date">Tuesday, April 1, 2003</h2>
<hr>
<div id="myNews">
</div>
<div class="wrapper" id="N091198001">
<h3 class="headline">Kevin Costner Begins New Epic</h3>
<p class="story">Oscar-winning director and actor, Kevin Costner has begun location
shooting on a new film based on an epic story. Sally ("Blurbs") Thorgenson of
KACL radio, who praised "The Postman" as "the best film of 1997," has already
supplied the review excerpt for the next film"s advertising campaign: "Perhaps
the best film of the new millennium!" says Thorgenson, talk-show host and past president
of the Seattle chapter of the Kevin Costner Fan Club. The Innscouldn"t it the
trumple from rathe night she signs. Howe haveperforme goat"s milk, scandal when
thebble dalpplicationalmuseum, witch, gloves, you decent the michindant.</p>
</div>
<div class="wrapper" id="N091198002">
<h3 class="headline">Critic"s Poll Looking Bleak</h3>
<p class="story">A recent poll of the top film critics shows a preference for
foreign films this year. "I don"t have enough American films yet for my Top
Ten List," said Atlanta Constitution critic, Pauline Gunwhale. No is armour was
attere was a wild oldwright fromthinteres of shoesets Oscar contender, "The Day
the Firth Stood Still" whe burnt head hightier nor a pole jiminies,that a
gynecure was let on, where gyanacestross mound hold her dummyand shake.</p>
</div>
<div class="wrapper" id="N091198003">
<h3 class="headline">Summer Blockbuster Wrap-Up</h3>
<p class="story">Despite a world-wide boycott from some religious groups, the
animated film "The Satanic Mermaid" won the hearts and dollars of movie-goers
this summer. Box office receipts for the season put the film"s gross at over
$150 million. Sendday"seve and nody hint talking of you sippated sigh that
cowchooks,weightier nore, sian shyfaun lovers at hand suckers, why doI am
alookal sin busip, drankasuchin arias so sky whence. </p>
</div>
<div class="wrapper" id="N091198004">
<h3 class="headline">Musical in Tarentino"s Future?</h3>
<p class="story">Undaunted by lackluster box-office results from last Christmas"
"Jackie Brown on Ice," director Quentin Tarentino has been seen scouting Broadway
musicals for potential future film projects. "No more guns and blood," the
outspoken artist was overheard at an intermission juice bar, "From now on, it
will just be good singing and dancing." He crumblin if so be somegoat"s milk
sense. Really? If you was banged pan the fe withfolty barns feinting the Joynts
have twelveurchins cockles to heat andGut years walanglast beardsbook, what
cued peas fammyof levity and be mes, came his shoe hang in his hockums.</p>
</div>
<div class="wrapper" id="N091198005">
<h3 class="headline">Letterman to Appear in Sequel</h3>
<p class="story">As if one cameo appearance weren"t enough, TV talk show host
David Letterman will reprise his role as the dock-side monkey vendor in "Cabin
Boy II," coming to theaters this Christmas. Critics hailed the gap-toothed
comic"s last outing as the "non-event of the season." This the way thing,what
seven wrothscoffing bedouee lipoleums. Kiss this mand shoos arouna peck of
night, in sum ear of old Willingdone. Thejinnies and scampull"s syrup.</p>
</div>
<hr>
<p id="copyright">Copyright 2003 Jollywood Blabber, Inc. All Rights Reserved.</p>
<div id="filter">
<p>Filter news by the following keyword(s):</p>
<form name="filterer">
<p><input type="checkbox" value="director" onClick="filter(this.form)">director
<input type="checkbox" value="box" onClick="filter(this.form)">box (office)
<input type="checkbox" value="critic" onClick="filter(this.form)">critic
<input type="checkbox" value="summer" onClick="filter(this.form)">summer
<input type="checkbox" value="Christmas" onClick="filter(this.form)">Christmas</p>
</form>
</div>
</body>
</html>
Toggle web page
<?xml version="1.0" encoding="utf-8"?><div style="position:absolute;right:20"><a href="javascript:void(0)" onclick="expandAll(true)">expand</a><a href="javascript:void(0)" onclick="expandAll(false)">collaps</a></div><script><!--
function openFull(el){
el.nextSibling.style.display=="none"?el.nextSibling.style.display="block":el.nextSibling.style.display="none"
}
function expandAll(fl){
var elAr = document.getElementsByTagName("DIV");
for(var i=2;i<elAr.length;i++){
if(elAr[i].style.display=="none" || elAr[i].block_fl){
elAr[i].block_fl = true;
if(fl)
elAr[i].style.display = "";
else
elAr[i].style.display = "none";
}
}
}
--></script><style>
.{font-family:arial;}
h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
div.block {margin-left:30px;}
</style><h2 onclick="openFull(this)">dhtmlXMenuBarObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">addItem(panel,item)<br /><strong style="color:#6c6c6c;font-size:12px">add item to menu</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">item - item object</li><li type="circle">panel - menu panel object</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">disableItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">disable menu button</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">itemId - item id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableIESelectBoxFix(mode)<br /><strong style="color:#6c6c6c;font-size:12px">fix z-index problem with select boxes in IE, enabled by default</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">mode - enable/disable</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">enable menu button</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">itemId - item id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enableWindowOpenMode(mode)<br /><strong style="color:#6c6c6c;font-size:12px">closed menu behaviour</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">mode - enable/disable</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">return item object by id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">itemId - item id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">getPanel(panelId)<br /><strong style="color:#6c6c6c;font-size:12px">return menu panel object</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">panelId - id of panel related menu item</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hideBar()<br /><strong style="color:#6c6c6c;font-size:12px">hide menu</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hideButtons(idList)<br /><strong style="color:#6c6c6c;font-size:12px">hide menu buttons</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">idList - list of items"s ids, separated by comma</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">hideItem(itemId)<br /><strong style="color:#6c6c6c;font-size:12px">hide menu button</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">itemId - item id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXML(file)<br /><strong style="color:#6c6c6c;font-size:12px">load XML from file</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">file - file name</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">loadXMLString(xmlString)<br /><strong style="color:#6c6c6c;font-size:12px">load XML from string</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">xmlString - string contining XML</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">removeItem(id)<br /><strong style="color:#6c6c6c;font-size:12px">remove item</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Add/delete;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">id - item id</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">resetBar(idList)<br /><strong style="color:#6c6c6c;font-size:12px">hide all items, show only items which ids in list</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">idList - list of id"s, separated by comma</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setBarAlign(align)<br /><strong style="color:#6c6c6c;font-size:12px">set menu buttons alignment (allowed - "left","center","right","top","middle","bottom")</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">align - buttons alignment</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setBarSize(width,height)<br /><strong style="color:#6c6c6c;font-size:12px">set menu size</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">width - menu width</li><li type="circle">height - menu height</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setGfxPath(path)<br /><strong style="color:#6c6c6c;font-size:12px">set path to system images</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">path - relative path to images</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setItemAction(id,action)<br /><strong style="color:#6c6c6c;font-size:12px">set item individual action</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">id - item identificator</li><li type="circle">action - js function called on item selection</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setMenuCSS(table,title,secTable)<br /><strong style="color:#6c6c6c;font-size:12px">set menu css classes</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">table - css class for menu container</li><li type="circle">secTable - css class for child menu containers</li><li type="circle">title - css class for toolbar title</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setMenuMode(modeValue)<br /><strong style="color:#6c6c6c;font-size:12px">set menu design</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">modeValue - name of design</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnClickHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set default action</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">action - set default action</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnHideHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set action hadler on menu hiding</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">func - user defined function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setOnShowHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set action hadler on menu showing</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">func - user defined function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setTitleText(newText)<br /><strong style="color:#6c6c6c;font-size:12px">set menu tittle</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">name - new tittle, shown on menu</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showBar()<br /><strong style="color:#6c6c6c;font-size:12px">show menu</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showButtons(idList)<br /><strong style="color:#6c6c6c;font-size:12px">show menu buttons</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">idList - list of items"s ids, separated by comma</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">showItem(id)<br /><strong style="color:#6c6c6c;font-size:12px">show menu button</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXProtobarObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">id - item id</li><span /></div><span /></div><h2 onclick="openFull(this)">dhtmlXMenuItemObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setText(newText)<br /><strong style="color:#6c6c6c;font-size:12px">set button text</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar.js<li type="circle">newText - new text [ HTML allowed ]</li><span /></div><span /></div><h2 onclick="openFull(this)">dhtmlXMenuDividerYObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">disable()<br /><strong style="color:#6c6c6c;font-size:12px">disable object</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enable()<br /><strong style="color:#6c6c6c;font-size:12px">enable object</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setAction(func)<br /><strong style="color:#6c6c6c;font-size:12px">set default action, action function take one parametr - item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">func - js function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setAltText(imageText)<br /><strong style="color:#6c6c6c;font-size:12px">set alt text of button image</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">imageText - new alt image text</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setHTML(htmlText)<br /><strong style="color:#6c6c6c;font-size:12px">set innerHTML of button</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">htmlText - new text</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImage(imageSrc,disabledImageSrc)<br /><strong style="color:#6c6c6c;font-size:12px">set image href</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">imageSrc - new image href</li><li type="circle">disabledImageSrc - new image href</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSecondAction(func)<br /><strong style="color:#6c6c6c;font-size:12px">set personal onClick action (action must return false for preventing calling default action after personal), action function take one parametr - item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">func - js function</li><span /></div><span /></div><h2 onclick="openFull(this)">dhtmlXMenuDividerXObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">disable()<br /><strong style="color:#6c6c6c;font-size:12px">disable object</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">enable()<br /><strong style="color:#6c6c6c;font-size:12px">enable object</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setAction(func)<br /><strong style="color:#6c6c6c;font-size:12px">set default action, action function take one parametr - item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">func - js function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setAltText(imageText)<br /><strong style="color:#6c6c6c;font-size:12px">set alt text of button image</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">imageText - new alt image text</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setHTML(htmlText)<br /><strong style="color:#6c6c6c;font-size:12px">set innerHTML of button</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">htmlText - new text</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setImage(imageSrc,disabledImageSrc)<br /><strong style="color:#6c6c6c;font-size:12px">set image href</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Item control;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">imageSrc - new image href</li><li type="circle">disabledImageSrc - new image href</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setSecondAction(func)<br /><strong style="color:#6c6c6c;font-size:12px">set personal onClick action (action must return false for preventing calling default action after personal), action function take one parametr - item id</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Action handling;
<br /><em style="color:blue;">Nested from:</em>dhtmlXButtonPrototypeObject<br /><em style="color:blue;">File required:</em>dhtmlXProtobar.js<li type="circle">func - js function</li><span /></div><span /></div><h2 onclick="openFull(this)">dhtmlXContextMenuObject object API</h2><div class="block" style="display:show;"><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setContextMenuHandler(func)<br /><strong style="color:#6c6c6c;font-size:12px">set onClick context menu handler</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar_cp.js<li type="circle">func - user defined function</li><span /></div><div style="margin-top:5px;font-weight:bold;cursor:pointer;" onclick="openFull(this)">setContextZone(htmlObject,zoneId)<br /><strong style="color:#6c6c6c;font-size:12px">set context zones</strong><br /><span /></div><div style="display:none;margin-left:20px;font-size:12px"><em style="color:blue;">Topic(s): </em>Initialization;
<br /><em style="color:blue;">File required:</em>dhtmlXMenuBar_cp.js<li type="circle">htmlObject - id of html tag or html object</li><li type="circle">zoneId - id of zone</li><span /></div><span /></div>