Scribd Logo
Carica

Benvenuto in Scribd!

  • HTML - Web Development Tab Control

    Caricato da

    info.glcom5161
    24 visualizzazioni3 pagine
    HTML - Web Development Tab Control

    Copyright

    © © All Rights Reserved

    Formati disponibili

    TXT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    HTML - Web Development Tab Control

    Copyright:

    © All Rights Reserved
    Scarica in formato TXT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    24 visualizzazioni3 pagine

    HTML - Web Development Tab Control

    Caricato da

    info.glcom5161
    HTML - Web Development Tab Control

    Copyright:

    © All Rights Reserved
    Scarica in formato TXT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 3

    HTML - Web Development Tab Control

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


    "http://www.w3.org/TR/html4/loose.dtd">
    <head>
    <title>Tab View Script</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <script type="text/javascript">
    function TabView(id, current) {
    if (typeof (TabView.cnt) == "undefined") {
    TabView.init();
    }
    current = (typeof (current) == "undefined") ? 0 : current;
    this.newTab(id, current);
    }
    TabView.init = function() {
    TabView.cnt = 0;
    TabView.arTabView = new Array();
    }
    TabView.switchTab = function(TabViewIdx, TabIdx) {
    TabView.arTabView[TabViewIdx].TabView.switchTab(TabIdx);
    }
    TabView.prototype.newTab = function(id, current) {
    var TabViewElem, idx = 0, el = '', elTabs = '', elPages = '';
    TabViewElem = document.getElementById(id);
    TabView.arTabView[TabView.cnt] = TabViewElem;
    this.TabElem = TabViewElem;
    this.TabElem.TabView = this;
    this.tabCnt = 0;
    this.arTab = new Array();
    // Loop throught the elements till the object with
    // classname 'Tabs' is obtained
    elTabs = TabViewElem.firstChild;
    while (elTabs.className != "Tabs") elTabs = elTabs.nextSibling;
    el = elTabs.firstChild;
    do {
    if (el.tagName == "A") {
    el.href = "javascript:TabView.switchTab(" + TabView.cnt + "," + idx + ");";
    this.arTab[idx] = new Array(el, 0);
    this.tabCnt = idx++;
    }
    } while (el = el.nextSibling);

    // Loop throught the elements till the object with


    // classname 'Pages' is obtained
    elPages = TabViewElem.firstChild;
    while (elPages.className != "Pages") elPages = elPages.nextSibling;
    el = elPages.firstChild;
    idx = 0;
    do {
    if (el.className == "Page") {
    this.arTab[idx][1] = el;
    idx++;
    }
    } while (el = el.nextSibling);
    this.switchTab(current);
    // Update TabView Count
    TabView.cnt++;
    }
    TabView.prototype.switchTab = function(TabIdx) {
    var Tab;
    if (this.TabIdx == TabIdx) return false;
    for (idx in this.arTab) {
    Tab = this.arTab[idx];
    if (idx == TabIdx) {
    Tab[0].className = "ActiveTab";
    Tab[1].style.display = "block";
    Tab[0].blur();
    } else {
    Tab[0].className = "InactiveTab";
    Tab[1].style.display = "none";
    }
    }
    this.TabIdx = TabIdx;

    }
    function init() {
    t1 = new TabView('TabView1');
    t2 = new TabView('TabView2', 1);
    }
    </script>

    <style type="text/css">
    body,div,table{font:normal 11px Verdana, Arial, sans-serif;}
    .TabView{
    width:650px;height:250px;border:1px #CCC solid;margin:25px;
    }
    .TabView .Tabs {
    height:26px;display:block;background:#CCC;
    }
    .TabView .Tabs a {
    display:block;float:left;width:75px;height:25px;line-height:25px;color:#333;text-
    align:center;text-decoration:none;font-weight:bold;border:1px #666
    dashed;margin:0px 2px;
    }
    .TabView .Tabs a.ActiveTab{
    background:#FFF;border:1px #666 solid;border-bottom:1px #FFF solid;
    }
    .TabView .Tabs a.InactiveTab{

    }
    .TabView .Pages{
    width:100%;
    }
    .TabView .Pages .Page{
    border:1px #CCC solid;height:222px;
    }
    </style>
    </head>

    <body onload="init()">
    <table style="width:100%;height:100%;">
    <tr><td>
    <center>
    <!--Begin TabView Block-->
    <div class="TabView" id="TabView1">
    <!--Tabs-->
    <div class="Tabs"><a>Add</a> <a>Delete</a></div>
    <!--Pages-->
    <div class="Pages">
    <!--Page 1-->
    <div class="Page">
    <table cellspacing="0" cellpadding="0" height="100%">
    <tr><td>Some of the features of this script.<br/>
    <ul>
    <li>Search Engine Friendly</li>
    <li>Space saving</li>
    <li>Easy to use.</li>
    <li>User friendly</li>
    </ul></td>
    </table>
    </div>
    <!--Page 2-->
    <div class="Page">
    <table cellspacing="0" cellpadding="0" style="margin:5px;">
    <tr><td><h2>This is the second page.</h2>
    <p>As you can see, the process can be broken down into clearly-identifiable
    segments. There's the connection phase (which opens a connection to the FTP
    server); the authentication phase (where the user identifies himself or herself and
    is permitted access to the FTP site); the transaction phase (which involves
    operations like directory navigation, file listing, and file GET or PUT); and the
    disconnection phase (which terminates the FTP connection cleanly). Nice and
    symmetrical, right?</p>
    <p><B>...In With The New</B><BR>Initiating an FTP connection in PHP follows the
    same basic principles: open an FTP connection, send authentication information, and
    then use built-in PHP functions to navigate through directories or transfer files.
    Let's take a look at the PHP version of the session you just saw.</td>
    </table>
    </div>
    </div>
    </div>

    </form>
    </center></td></tr></table>
    </body>
    </html>

    Potrebbero piacerti anche