JavaScript DHTML/GUI Components/Toggle
Содержание
- 1 Create custom page and replace current document with it
- 2 Hello, " + form.entry.value + "!
- 3 Welcome!
- 4 Today in Jollywood
Create custom page and replace current document with it
<source lang="html4strict">
<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 += "
Hello, " + form.entry.value + "!
\n";newPage += "</body>\n</html>"; // write it in one blast document.write(newPage); // close writing stream document.close();
} </script> <body>
Welcome!
<form onsubmit="return false;">
Enter your name here: <input type="text" name="entry" id="entry">
<input type="button" value="New Custom Page" onclick="rewritePage(this.form);"> </form> </body> </html>
</source>
Dynamic Content: click show and re-click disappear (IE)
<source lang="html4strict">
<!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">
Dynamic Content
<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>
|
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.
|
</body> </html>
</source>
Toggle Multi select Widget
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>Multi-select Widget</title>
<script language="JavaScript" type="text/javascript">
</script></head>
<body onload="initMultiSelect()">
| Usability Methods |
|
||
| Datasources |
Please click Edit Selections to specify.
<input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"> |
||
| Lifecycle |
Please click Edit Selections to specify.
<input value="Edit Selections" onclick="showOptions(this.parentNode,this.parentNode.previousSibling);" type="button"> |
</body></html>
</source>
Toggle page
<source lang="html4strict">
<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();">
Today in Jollywood
Tuesday, April 1, 2003
Kevin Costner Begins New Epic
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.
Critic"s Poll Looking Bleak
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.
Summer Blockbuster Wrap-Up
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.
Musical in Tarentino"s Future?
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.
Letterman to Appear in Sequel
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.
Copyright 2003 Jollywood Blabber, Inc. All Rights Reserved.
Filter news by the following keyword(s):
<form name="filterer">
<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
</form>
</body> </html>
</source>
Toggle web page
<source lang="html4strict"><?xml version="1.0" encoding="utf-8"?>
.{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>dhtmlXMenuBarObject object API
add item to menu
<span />
disable menu button
<span />
fix z-index problem with select boxes in IE, enabled by default
<span />
enable menu button
<span />
closed menu behaviour
<span />
return item object by id
<span />
return menu panel object
<span />
hide menu
<span />
hide menu buttons
<span />
hide menu button
<span />
load XML from file
<span />
load XML from string
<span />
remove item
<span />
hide all items, show only items which ids in list
<span />
set menu buttons alignment (allowed - "left","center","right","top","middle","bottom")
<span />
set menu size
<span />
set path to system images
<span />
set item individual action
<span />
set menu css classes
<span />
set menu design
<span />
set default action
<span />
set action hadler on menu hiding
<span />
set action hadler on menu showing
<span />
set menu tittle
<span />
show menu
<span />
show menu buttons
<span />
show menu button
<span />
dhtmlXMenuItemObject object API
set button text
<span />
dhtmlXMenuDividerYObject object API
disable object
<span />
enable object
<span />
set default action, action function take one parametr - item id
<span />
set alt text of button image
<span />
set innerHTML of button
<span />
set image href
<span />
set personal onClick action (action must return false for preventing calling default action after personal), action function take one parametr - item id
<span />
dhtmlXMenuDividerXObject object API
disable object
<span />
enable object
<span />
set default action, action function take one parametr - item id
<span />
set alt text of button image
<span />
set innerHTML of button
<span />
set image href
<span />
set personal onClick action (action must return false for preventing calling default action after personal), action function take one parametr - item id
<span />
dhtmlXContextMenuObject object API
set onClick context menu handler
<span />
set context zones
<span />
</source>
