JavaScript DHTML/HTML/List Bullets
Содержание
Add bullets (item)
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>insertBefore() Method</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function doInsert(form) {
if (form.newText) {
var newChild = document.createElement("LI")
newChild.innerHTML = form.newText.value
var choice = form.itemIndex.options[form.itemIndex.selectedIndex].value
var insertPoint = (isNaN(choice)) ?
null : document.getElementById("myUL").childNodes[choice]
document.getElementById("myUL").insertBefore(newChild, insertPoint)
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>insertBefore() Method</H1>
<HR>
<FORM onSubmit="return false">
<P>Enter text or HTML for a new list item:
<INPUT TYPE="text" NAME="newText" SIZE=40 VALUE=""></P>
<P>Before which existing item?
<SELECT NAME="itemIndex">
<OPTION VALUE=null>None specified
<OPTION VALUE=0>1
<OPTION VALUE=1>2
<OPTION VALUE=2>3
</SELECT></P>
<INPUT TYPE="button" VALUE="Insert Item" onClick="doInsert(this.form)">
</FORM>
<OL ID="myUL">
<LI>Originally the First Item
<LI>Originally the Second Item
<LI>Originally the Third Item
</OL>
</BODY>
</HTML>
Change Bullets
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>appendChild(), removeChild(), and replaceChild() Methods</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function append(form) {
if (form.input.value) {
var newItem = document.createElement("LI")
newItem.appendChild(document.createTextNode(form.input.value))
document.getElementById("myUL").appendChild(newItem)
}
}
function replace(form) {
if (form.input.value) {
var newItem = document.createElement("LI")
var lastChild = document.getElementById("myUL").lastChild
newItem.appendChild(document.createTextNode(form.input.value))
document.getElementById("myUL").replaceChild(newItem, lastChild)
}
}
function restore() {
var oneChild
var mainObj = document.getElementById("myUL")
while (mainObj.childNodes.length > 2) {
oneChild = mainObj.lastChild
mainObj.removeChild(oneChild)
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Child Methods</H1>
<HR>
Here is a list of items:
<UL ID="myUL"><LI>First Item
<LI>Second Item
</UL>
<FORM>
Enter some text to add/replace in the list:
<INPUT TYPE="text" NAME="input" SIZE=30><BR>
<INPUT TYPE="button" VALUE="Append to List" onClick="append(this.form)">
<INPUT TYPE="button" VALUE="Replace Final Item" onClick="replace(this.form)">
<INPUT TYPE="button" VALUE="Restore List" onClick="restore()">
</BODY>
</HTML>
Change bullet style
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>removeNode(), replaceNode(), and swapNode() Methods</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// store original node between changes
var oldNode
// replace UL node with OL
function replace() {
if (document.all.myUL) {
var newNode = document.createElement("OL")
newNode.id = "myOL"
var innards = document.all.myUL.children
while (innards.length > 0) {
newNode.insertBefore(innards[0])
}
oldNode = document.all.myUL.replaceNode(newNode)
}
}
// restore OL to UL
function restore() {
if (document.all.myOL && oldNode) {
var innards = document.all.myOL.children
while (innards.length > 0) {
oldNode.insertBefore(innards[0])
}
document.all.myOL.replaceNode(oldNode)
}
}
// swap first and last nodes
function swap() {
if (document.all.myUL) {
document.all.myUL.firstChild.swapNode(document.all.myUL.lastChild)
}
if (document.all.myOL) {
document.all.myOL.firstChild.swapNode(document.all.myOL.lastChild)
}
}
// remove last node
function remove() {
if (document.all.myUL) {
document.all.myUL.lastChild.removeNode(true)
}
if (document.all.myOL) {
document.all.myOL.lastChild.removeNode(true)
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Node Methods</H1>
<HR>
Here is a list of items:
<UL ID="myUL">
<LI>First Item
<LI>Second Item
<LI>Third Item
<LI>Fourth Item
</UL>
<FORM>
<INPUT TYPE="button" VALUE="Change to OL List" onClick="replace()">
<INPUT TYPE="button" VALUE="Restore LI List" onClick="restore()">
<INPUT TYPE="button" VALUE="Swap First/Last" onClick="swap()">
<INPUT TYPE="button" VALUE="Remove Last" onClick="remove()">
</BODY>
</HTML>
"compact" Example
<html>
<body>
<dl id="myDL">
<dt>Definition List:</dt>
<dt>1.</dt><dd>Definition 1.</dd>
<dt>2.</dt><dd>Definition 2.</dd>
<dt>3</dt><dd>Definition 3.</dd>
</dl>
<button onclick="myDL.rupact=true;">Compact</button>
<button onclick="myDL.rupact=false;">De-Compact</button>
</body>
</html>
List Start property
<html>
<body>
<ol id="myList">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
</ol>
<button onclick="document.all.myList.start=12;">Set Start</button>
</body>
</html>
List type
<html>
<body>
<ol id="myOl">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
</ol>
<script language="JavaScript">
document.getElementById("myOl").type = "i"
</script>
</body>
</html>
Using firstChild and lastChild Properties
/*
JavaScript Bible, Fourth Edition
by Danny Goodman
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>firstChild and lastChild Properties</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// helper function for prepend() and append()
function makeNewLI(txt) {
var newItem = document.createElement("LI")
newItem.innerHTML = txt
return newItem
}
function prepend(form) {
var newItem = makeNewLI(form.input.value)
var firstLI = document.getElementById("myList").firstChild
document.getElementById("myList").insertBefore(newItem, firstLI)
}
function append(form) {
var newItem = makeNewLI(form.input.value)
var lastLI = document.getElementById("myList").lastChild
document.getElementById("myList").appendChild(newItem)
}
function replaceFirst(form) {
var newItem = makeNewLI(form.input.value)
var firstLI = document.getElementById("myList").firstChild
document.getElementById("myList").replaceChild(newItem, firstLI)
}
function replaceLast(form) {
var newItem = makeNewLI(form.input.value)
var lastLI = document.getElementById("myList").lastChild
document.getElementById("myList").replaceChild(newItem, lastLI)
}
</SCRIPT>
</HEAD>
<BODY>
<H1>firstChild and lastChild Property Lab</H1>
<HR>
<FORM>
<LABEL>Enter some text to add to or replace in the OL element:</LABEL><BR>
<INPUT TYPE="text" NAME="input" SIZE=50><BR>
<INPUT TYPE="button" VALUE="Insert at Top" onClick="prepend(this.form)">
<INPUT TYPE="button" VALUE="Append to Bottom" onClick="append(this.form)">
<BR>
<INPUT TYPE="button" VALUE="Replace First Item" onClick="replaceFirst(this.form)">
<INPUT TYPE="button" VALUE="Replace Last Item" onClick="replaceLast(this.form)">
</FORM>
<P></P>
<OL ID="myList"><LI>Initial Item 1
<LI>Initial Item 2
<LI>Initial Item 3
<LI>Initial Item 4
<OL>
</BODY>
</HTML>