JavaScript DHTML/HTML/List Bullets

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

Add bullets (item)

   <source lang="html4strict">

/* 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>

insertBefore() Method

<FORM onSubmit="return false">

Enter text or HTML for a new list item: <INPUT TYPE="text" NAME="newText" SIZE=40 VALUE="">

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>

<INPUT TYPE="button" VALUE="Insert Item" onClick="doInsert(this.form)"> </FORM>

  1. Originally the First Item
  2. Originally the Second Item
  3. Originally the Third Item

</BODY> </HTML> 

      </source>


Change Bullets

   <source lang="html4strict">

/* 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>

Child Methods

Here is a list of items:

  • First Item
  • Second Item

<FORM> Enter some text to add/replace in the list: <INPUT TYPE="text" NAME="input" SIZE=30>
<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> 


      </source>


Change bullet style

   <source lang="html4strict">

/* 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>

Node Methods

Here is a list of items:

  • First Item
  • Second Item
  • Third Item
  • Fourth Item

<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> 

      </source>


"compact" Example

   <source lang="html4strict">

<html> <body>

Definition List:
1.
Definition 1.
2.
Definition 2.
3
Definition 3.

<button onclick="myDL.rupact=true;">Compact</button> <button onclick="myDL.rupact=false;">De-Compact</button> </body> </html> 


     </source>


List Start property

   <source lang="html4strict">

<html> <body>

  1. Item One
  2. Item Two
  3. Item Three
  4. Item Four
  5. Item Five

<button onclick="document.all.myList.start=12;">Set Start</button> </body> </html> 


     </source>


List type

   <source lang="html4strict">

<html> <body>

  1. Item One
  2. Item Two
  3. Item Three

<script language="JavaScript"> 

   document.getElementById("myOl").type = "i"

</script> </body> </html> 


     </source>


Using firstChild and lastChild Properties

   <source lang="html4strict">

/* 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>

firstChild and lastChild Property Lab

<FORM> <LABEL>Enter some text to add to or replace in the OL element:</LABEL>
<INPUT TYPE="text" NAME="input" SIZE=50>
<INPUT TYPE="button" VALUE="Insert at Top" onClick="prepend(this.form)"> <INPUT TYPE="button" VALUE="Append to Bottom" onClick="append(this.form)">
<INPUT TYPE="button" VALUE="Replace First Item" onClick="replaceFirst(this.form)"> <INPUT TYPE="button" VALUE="Replace Last Item" onClick="replaceLast(this.form)"> </FORM>

  1. Initial Item 1
  2. Initial Item 2
  3. Initial Item 3
  4. Initial Item 4
      </BODY> </HTML> </source>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/List_Bullets&oldid=2583»