Using JavaScript + DIV create cascading Schedule

Posted by john
5/12/2007
Related Tags:
CSS DIV  div css  div css Guide  div css layout  div class  div location  div borders  div position  div positioning  div height  div align  div layer  not-for-div trip div span  div background  div layout  div rolling  div select  div effects  div around div width  div ul  div flash  div nbsp  div manuals  div usage  div site  div parameters  div interface  div nested  div top  div width  div border  div style  div onmouseover  div visibility  the body div  div skills  div framework  Cascading Style Sheets  Cascading  div css tutorial  css javascript  css map download div 

  If you are more familiar with HTML, then you believe that the DIV which will certainly not unfamiliar Position markers?    In fact, the schedule is a hidden DIV, it is in fact the outset there, but it was hidden.    When we click on the main table in a specific signs, on the adoption of an event (such as click) will be its home state in order to show we can. 

  Well, you have a Clear principle, and then how to achieve in the end?    We will design the next good form, we know from above, first of all, a good design should be the main form of forms, forms and schedules should be included in the main table in a cell, this can be achieved very good results.    Established forms of the code, should be included in the cycle Douchushuju many records in the table in the process, otherwise no discussion of the potential.    Records show that in the main table, we should create a DIV tags (each marker should have a logo id only), to respond to events, such as: 

<%
  J = 1 
  Do while not rs.eof 
%>
<tr>
  'Definition of an id as main1, main2 sequence DIV marker 
  <Div id = "main <= j%%>" class = "menu" Width = "100%"> 
  'No. response to the incident click 
  <td Height="22"> <a href=# title="点击这里展开/折叠" onclick="expandIt(" &j& ");return false"> <% = rs ( "id ")%></ a > </ td> 
  </ Div> 
'……
  </ Tr> 
<%
  J = j +1 
  Rs.movenext 
  Loop 
%>

  End each show a record of the table, we should read the relevant records schedules, and use another DIV marking the record all relevant details and includes cycle show up.    With the above process, we have the following statement: 

  Do while not rs.eof 
<tr>
  "Definition of an id as main1, main2 sequence class menu for the DIV marker 
  <div Id="main" &j& "" class="menu" width="100%"> 
  'No. response to the incident click 
  <td Height="22"> <a href=# title="点击这里展开/折叠" onclick="expandIt(" &j& ");return false"> <% = rs ( "id ")%></ a > </ td> 
  </ Div> 
  "…… 
  </ Tr> 
  <tr> <td> 
  'Definition of an id as page1, page2 sequence class marker for the child's DIV 
  <div Id="page" &j& "" class="child"> 
  <table Border="1" width="100%"> 
  'Circle here read tables records 
  </ Table> 
  </ Div> 
  </ Td> </ tr> 
  J = j +1 
  Rs.movenext 
  Loop 
  DIV good design mark and after the pages shown in the table, then use Javascript to design response to the incident statements, so as to achieve a start on all pages hide, click one of ID only shows the relevant records to hide the details of other unrelated Details record purposes. 

  Function initIt () ( 
  DivCount = document.all.tags ( "DIV"); 
  For (i = 0; i <divCount.length; i + +) ( 
  Obj = divCount (i); 
  If (obj.className == "child" | | obj.className == "child1") obj.style.display = "none"; 
  ) 
  ) 

  Var priorid = 1000; 
  Function expandIt (el) ( 
  DivCount = document.all.tags ( "DIV"); 
  For (i = 0; i <divCount.length; i + +) ( 
  Obj = divCount (i); 
  If (obj.className == "child" | | obj.className == "child1") 
  If (priorid! = El) ( 
  Obj.style.display = "none";) 
  ) 
  Priorid = el; 
  Obj2 = eval ( "page" + el); 
  Obj4 = eval ( "main" + el); 
  If (obj2.style.display == "none") ( 

  Obj2.style.display = "block"; 
  ) 
  Else ( 
  Obj2.style.display = "none"; 
  ) 
  ) 
  Onload = initIt; 

  Javascript over the specific meaning I will not elaborate grammar, initIt function is the function of loading or refresh the page all the time to hide schedule expandIt function function is to Display the relevant schedules and other unrelated tables will be hidden. 

  Can be seen with Javascript + DIV way to achieve simple and efficient schedule, interface effects also makes it easy for users to accept. 
  Click below to watch detailed results, welcome to all of you corrected. 
Click to enlarge ...


Related articles:

Dreamweaver MX 2004 Video Collection Guide (127)
  Section 127 sets: "Online Store" page production    Curriculum objectives: production "online store" pages    Curriculum points: the use Dreamweaver production "online store" pages.    [Full-screen viewing] | [download video] ...
Venture Vanguard: 23-year-old guys leave school, earn millions Office website
  Not the so-called people like Maung Aye, if Zou Bin stand before you, you certainly think that he was a student, do not believe he actually a monthly income of over 10 million, has reached several million dollars valuation the founder and operator.    This year, only 23-year-old g...
Flash games based on the production in gunfight
  Demonstration effects:  <embed src=http://www.webjx.com/upfiles/20050409/20050409021801_1.swf pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' type='application/x-shockwave-flash' width=500 height=400>   Click here to downloa...
CSS produced by photo Corridor
  CSS code    The following is quoted fragment:    # Info (    Position: relative;    Background: # fff url (../../ updata/pic1b.gif) 175px 44px no-repeat;)    (# Scrollbox    Width: 400px;    Height: 80px;  &nb...
Flash figures in the painting Guide
  1. Opened Flash MX software, the use of lines in the toolbar tools, drawing three lines, displaying an inverted triangle-shaped, and then use the arrow tool lines will be pulled out of a certain arc, to the use of the second arrow tool, which is Bessel tools Drag arc summit.    Upon...