JavaScript DHTML/GUI Components/IFrame

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

Load HTML file to IFrame

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLe>Demo of DHTML Grid V 0.92</title>
  <META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <META http-equiv="Author" content="Charles Dickens">
        <STYLE type="text/css"> 
    A:link {color:#FFFFFF;   font-weight: normal; text-decoration: none;}
    A:visited {color:#FFFFFF; font-weight: normal; text-decoration: none;}
    A:active {color:#FFFFFF; font-weight: normal; text-decoration: none;}
    A:hover {color:#FFFFFF; font-weight: normal; text-decoration:underline;}
    BODY {bottom-Margin:0px; background-color:#003399; left-Margin:20px;
      top-Margin:0px; right-Margin:0px; color:#FFFFFF}
    TD {font-family: "Verdana, Arial"; font-size: 12px;}
    .bigheader {font-family: "Verdana, Arial"; font-size: 28px; font-weight: bold}
    .mnuheader {font-family: "Verdana, Arial"; font-size: 16px;}
    .inputBox { border-style: solid; border-width: 1px; font-family: verdana, arial,
        sans-serif; font-size: 9px; padding: 0px; color:black; backgroundcolor: #FFFFEE}
  </STYLE>
</HEAD>
<BODY> 
  <TABLE width ="600" align="center" cellpadding="0px" cellspacing="1px">
    <TR><TD align="center">
      <U><FONT class="bigheader" color="#FF9933">THE </FONT>
      <FONT class="bigheader" color="#FFFFFF">&lt;DHTML&gt; </FONT>
      <FONT class="bigheader" color="#FF9933">Grid</FONT></U>
    </TD></TR>
    <TR><TD align="center">
    </TD></TR>
    <TR><TD align="center">
      <TABLE cellpadding="1px" cellspacing="0px" bgcolor="#FFFFFF" width="596px">
        <TR><TD>
          <TABLE cellpadding="1px" cellspacing="1px" bgcolor="#003399" width="100%">
            <TR><TD>
              <TABLE cellpadding="1px" cellspacing="2px" bgcolor="#FFFFFF" width="100%">
                <TR><TD>
                  <TABLE cellpadding="8px" cellspacing="1px" bgcolor="#000000" width="100%">
                    <TR><TD>
                      <BR><FONT color="#FF9933">&#164;</FONT> 
                      This is the test area for ver 0.92 which will be released soon.
                      For the latest <i>stable</i> release click on the download link above.
                      <FONT color="#FF9933">&#164;</FONT> 
                    </TD></TR>
                  </TABLE>
                </TD></TR>
                <TR><TD>
                  <TABLE cellpadding="8px" cellspacing="1px" bgcolor="#000000" width="100%">
                    <TR><TD>
                      <IFRAME id="frmGrid1" name="frmGrid1" scrolling="auto" frameborder="0" src="4colGrid.htm" width="601" height="150"></IFRAME>
                      <FONT color="#FFFFFF">Col 1 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Col 2 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Col 3 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Col 4</FONT><BR>
                      <FORM>
        <INPUT id="Col1" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col1">
        <INPUT id="Col2" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col2">
        <INPUT id="Col3" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col3">
        <INPUT id="Col4" style="FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; BORDER-TOP-STYLE: none; FONT-FAMILY: Verdana, Arial; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" type="text" maxLength="6" name="Col4"><BR>
        <INPUT value="ADD" name="cmdAddRow" id="cmdAddRow" title="Add Row" style="FONT-WEIGHT: bold; FONT-SIZE: 8pt; LEFT: 0px; WIDTH: 102px; FONT-FAMILY: Verdana, Arial;" type="button" onclick="javascript: top.frames["frmGrid1"].addRow(Col1.value, Col2.value , Col3.value, Col4.value), Col1.value="", Col2.value="", Col3.value="", Col4.value="";" >
        <INPUT value="Delete" name="cmdDeleteRow" id="cmdDeleteRow" title="Delete Last Row" style="FONT-SIZE: 8pt; LEFT: 93px; WIDTH: 102px; FONT-FAMILY: Verdana, Arial; " type="button" onclick="javascript: return top.frames["frmGrid1"].deleteLastRow()">
        </FORM>
        <BR><BR>
                      <FONT color="#FF9933">&#164;</FONT> The biggest feature of ver 0.92 is that it works both IE 5+ and in Netscape 6+ <BR>
                  <FONT color="#FF9933">&#164;</FONT> Mouseover to select a row. <BR>
                      <FONT color="#FF9933">&#164;</FONT> Select any row and hit Delete key to delete it <BR>
                  <FONT color="#FF9933">&#164;</FONT> Click to edit.... and everything else
</TD></TR>
                  </TABLE>
                </TD></TR>
              </TABLE>
            </TD></TR>
          </TABLE>
        </TD></TR>
      </TABLE>
    </TD></TR>
  </TABLE>
  </BODY>
</HTML>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/LoadHTMLIntoIFrame.zip">LoadHTMLIntoIFrame.zip( 9 k)</a>

Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/GUI_Components/IFrame&oldid=2561»