JavaScript DHTML/HTML/List Bullets

Материал из Web эксперт
Перейти к: навигация, поиск

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()">&nbsp;&nbsp;
<INPUT TYPE="button" VALUE="Restore LI List" onClick="restore()">&nbsp;&nbsp;
<INPUT TYPE="button" VALUE="Swap First/Last" onClick="swap()">&nbsp;&nbsp;
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/List_Bullets&oldid=2583»