Oldal: 1 / 2 12 UtolsóUtolsó
Eredmény: 1 - 10 (11) összesen

Téma: Javascript Tabos menü for mindenkinek ^^

  1. #1
    MinderBinder edem logója
    Csatlakozott
    09-09-02
    Hely
    Budapest
    Hozzászólás
    1.093
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás Javascript Tabos menü for mindenkinek ^^

    Sziasztok!

    Nemrégiben alkottam egy kis javascriptes megoldást hosszabb form-ok kategorizálására. A lényeg csak annyi, hogy a kategóriákat külön div-ekbe teszem, amiknek adok egy id-et, az egész felé pedig teszek egy listát (menüt), ami ezekre az id-ekre mutat. a js betöltése után mindig csak a kiválasztott div lesz látható. Akit érdekel, így néz ki:

    Kód:
    var Tabs =
    {
    // properties
      tabs: [],
      tabList: [],
      tabLinks: [],
      listItems: [],
    // methods
      init: function()
      {
        Tabs.tabs = Core.getElementsByClass("tab");
        Tabs.tabList = Core.getElementsByClass("tab-list");
    // set event listeners
        for (var i = 0; i < Tabs.tabList.length; i++)
        {
            Tabs.listItems = Tabs.tabList[i].getElementsByTagName("li");
            Tabs.tabLinks = Tabs.tabList[i].getElementsByTagName("a");
            for (var j = 0; j < Tabs.tabLinks.length; j++)
            {
                Core.addEventListener(Tabs.tabLinks[j], "click", Tabs.clickListener);
            }
            if (location.hash.length > 1)
            {
                var activeTab = document.getElementById(location.hash.substring(1));
                if (activeTab)
            {
                Tabs.show(activeTab);
            }
            }
          // check if there is a selected element
            var selected = Core.getElementsByClass("selected-tab");
            if (selected == '')
            {
                Core.addClass(Tabs.tabs[0], "shown");
                Core.addClass(Tabs.listItems[0], "selected-tab");
            }
        }
      },
      hide: function(tab)
      {
        Core.removeClass(tab, "shown");
        Core.addClass(tab, "hidden");
        return;
      },
      show: function(tab)
      {
        Core.removeClass(tab, "hidden");
        Core.addClass(tab, "shown");
        return;
      },
      clickListener: function(event)
      {
        for (var k = 0; k < Tabs.tabs.length; k++)
        {
            if (Tabs.tabs[k].id == this.hash.substring(1))
            {
              Tabs.show(Tabs.tabs[k]);
              Core.addClass(Tabs.listItems[k], "selected-tab");
            }
            else
            {
              Tabs.hide(Tabs.tabs[k]);
              Core.removeClass(Tabs.listItems[k], "selected-tab");
            }
            Core.preventDefault(event);
        }
        return;
      }
    };
    Core.start(Tabs);
    A Core az egy kis library, ami csak megold pár cross-browser problémlát (ezt nem én írtam):

    Kód:
    var Core = {};
    
    // W3C DOM 2 Events model
    if (document.addEventListener)
    {
      Core.addEventListener = function(target, type, listener)
      {
        target.addEventListener(type, listener, false);
      };
    
      Core.removeEventListener = function(target, type, listener)
      {
        target.removeEventListener(type, listener, false);
      };
    
      Core.preventDefault = function(event)
      {
        event.preventDefault();
      };
    
      Core.stopPropagation = function(event)
      {
        event.stopPropagation();
      };
    }
    // Internet Explorer Events model
    else if (document.attachEvent)
    {
      Core.addEventListener = function(target, type, listener)
      {
        // prevent adding the same listener twice, since DOM 2 Events ignores
        // duplicates like this
        if (Core._findListener(target, type, listener) != -1) return;
    
        // listener2 calls listener as a method of target in one of two ways,
        // depending on what this version of IE supports, and passes it the global
        // event object as an argument
        var listener2 = function()
        {
          var event = window.event;
    
          if (Function.prototype.call)
          {
            listener.call(target, event);
          }
          else
          {
            target._currentListener = listener;
            target._currentListener(event)
            target._currentListener = null;
          }
        };
    
        // add listener2 using IE's attachEvent method
        target.attachEvent("on" + type, listener2);
    
        // create an object describing this listener so we can clean it up later
        var listenerRecord =
        {
          target: target,
          type: type,
          listener: listener,
          listener2: listener2
        };
    
        // get a reference to the window object containing target
        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
    
        // create a unique ID for this listener
        var listenerId = "l" + Core._listenerCounter++;
    
        // store a record of this listener in the window object
        if (!targetWindow._allListeners) targetWindow._allListeners = {};
        targetWindow._allListeners
    [listenerId] = listenerRecord;
    
        // store this listener's ID in target
        if (!target._listeners) target._listeners = [];
        target._listeners[target._listeners.length] = listenerId;
    
        // set up Core._removeAllListeners to clean up all listeners on unload
        if (!targetWindow._unloadListenerAdded)
        {
          targetWindow._unloadListenerAdded = true;
          targetWindow.attachEvent("onunload", Core._removeAllListeners);
        }
      };
    
      Core.removeEventListener = function(target, type, listener)
      {
        // find out if the listener was actually added to target
        var listenerIndex = Core._findListener(target, type, listener);
        if (listenerIndex == -1) return;
    
        // get a reference to the window object containing target
        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
    
        // obtain the record of the listener from the window object
        var listenerId = target._listeners
    [listenerIndex];
        var listenerRecord = targetWindow._allListeners
    [listenerId];
    
        // remove the listener, and remove its ID from target
        target.detachEvent("on" + type, listenerRecord.listener2);
        target._listeners.splice(listenerIndex, 1);
    
        // remove the record of the listener from the window object
        delete targetWindow._allListeners
    [listenerId];
      };
    
      Core.preventDefault = function(event)
      {
        event.returnValue = false;
      };
    
      Core.stopPropagation = function(event)
      {
        event.cancelBubble = true;
      };
    
      Core._findListener = function(target, type, listener)
      {
        // get the array of listener IDs added to target
        var listeners = target._listeners;
        if (!listeners) return -1;
    
        // get a reference to the window object containing target
        var targetDocument = target.document || target;
        var targetWindow = targetDocument.parentWindow;
    
        // searching backward (to speed up onunload processing), find the listener
        for (var i = listeners.length - 1; i >= 0; i--)
        {
          // get the listener's ID from target
          var listenerId = listeners[i];
    
          // get the record of the listener from the window object
          var listenerRecord = targetWindow._allListeners
    [listenerId];
    
          // compare type and listener with the retrieved record
          if (listenerRecord.type == type && listenerRecord.listener == listener)
          {
            return i;
          }
        }
        return -1;
      };
    
      Core._removeAllListeners = function()
      {
        var targetWindow = this;
    
        for (id in targetWindow._allListeners)
        {
          var listenerRecord = targetWindow._allListeners[id];
          listenerRecord.target.detachEvent(
              "on" + listenerRecord.type, listenerRecord.listener2);
          delete targetWindow._allListeners[id];
        }
      };
    
      Core._listenerCounter = 0;
    }
    
    Core.addClass = function(target, theClass)
    {
      if (!Core.hasClass(target, theClass))
      {
        if (target.className == "")
        {
          target.className = theClass;
        }
        else
        {
          target.className += " " + theClass;
        }
      }
    };
    
    Core.getElementsByClass = function(theClass)
    {
      var elementArray = [];
    
      if (typeof document.all != "undefined")
      {
        elementArray = document.all;
      }
      else
      {
        elementArray = document.getElementsByTagName("*");
      }
    
      var matchedArray = [];
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      for (var i = 0; i < elementArray.length; i++)
      {
        if (pattern.test(elementArray[i].className))
        {
          matchedArray[matchedArray.length] = elementArray[i];
        }
      }
    
      return matchedArray;
    };
    
    Core.hasClass = function(target, theClass)
    {
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      if (pattern.test(target.className))
      {
        return true;
      }
    
      return false;
    };
    
    Core.removeClass = function(target, theClass)
    {
      var pattern = new RegExp("(^| )" + theClass + "( |$)");
    
      target.className = target.className.replace(pattern, "$1");
      target.className = target.className.replace(/ $/, "");
    };
    
    Core.getComputedStyle = function(element, styleProperty)
    {
      var computedStyle = null;
    
      if (typeof element.currentStyle != "undefined")
      {
        computedStyle = element.currentStyle;
      }
      else
      {
        computedStyle = document.defaultView.getComputedStyle(element, null);
      }
    
      return computedStyle[styleProperty];
    };
    
    Core.start = function(runnable)
    {
      Core.addEventListener(window, "load", runnable.init);
    };
    A css, amit használok hozzá:

    HTML kód:
    .tab {
        margin: 0;
        padding: 5px;
        position: absolute;
        left: -10000px;
    }
    .tab-list {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-left: 20px;
        float: left;
    }
        .tab-list li {
            margin: 0;
            margin-bottom: 10px;
            height: 67px;
            width: 193px;
        }
        .tab-list li.selected-tab a {
            display: block;
            background: url('/img/prop-btn-hover.png') no-repeat;
            color: white;
            height: 67px;
            line-height: 67px;
        }
        .tab-list a {
            text-decoration: none;
            display: block;
            color: #00c;
            text-align: center;
            height: 67px;
            line-height: 67px;
            font-size: 13px;
            color: #655d52;
            background: url('/img/prop-btn.png') no-repeat;
            padding: 0 5px;
        }
        .tab-list a:hover {
            background: url('/img/prop-btn-hover.png') no-repeat;
            color: white;
        }
    .hidden {
        position: absolute;
        left: -10000px;
    }
    
    .shown {
        position: static;
    }

    És végül a HTML:

    HTML kód:
     <ul class="tab-list">
                            <li>
                                <a href="#hosszu-leiras">Hosszú leírás</a>
                            </li>
                                                                            
                            <li>
                                <a href="#div-1">1. div</a>
                            </li>
                                                    
                            <li>
                                <a href="#div-2">2. div</a>
                            </li>
                                                    
                        </ul>
    
                                    <div id="hosszu-leiras" class="tab">
                                        <p>Leírás</p>
                                    </div>
                                                                    
                                    <div id="div-1" class="tab">
                                        1. div tartalma
                                    </div>
                                    
                                    <div id="div-2" class="tab">
                                        2. div tartalma
                                    </div>
    
    Ha valakinek van ötlete, jelezzen!
    Hasznlájátok egészséggel.


    // Only illogics can find
    // hidden flaws in a straight logic line

  2. #2
    Szerkesztő
    Csatlakozott
    09-05-09
    Hozzászólás
    205
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Én jQuery-vel írtam volna. Egész jól kijövök vele De ez a natív JS nem szimpatikus pont a cross-browser h*lyeségek miatt.. Egyébként ha az összes fül tartalmát akarod elküldeni, akkor ezt a HTML kód részletet beteszed egy FORM tagba?



  3. #3
    MinderBinder edem logója
    Csatlakozott
    09-09-02
    Hely
    Budapest
    Hozzászólás
    1.093
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Idézet mallee eredeti hozzászólása Hozzászólás megtekintése
    Én jQuery-vel írtam volna. Egész jól kijövök vele De ez a natív JS nem szimpatikus pont a cross-browser h*lyeségek miatt.. Egyébként ha az összes fül tartalmát akarod elküldeni, akkor ezt a HTML kód részletet beteszed egy FORM tagba?
    Ez a js lefut minden böngészőben, pont azért van hozzá a library...egyébként én úgy szoktam csinálni, hogy van egy form és abban vannak benne a div-ek, a div-eken kívül pedig a submit gomb.



  4. #4
    Szerkesztő
    Csatlakozott
    09-05-09
    Hozzászólás
    205
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Idézet edem eredeti hozzászólása Hozzászólás megtekintése
    Ez a js lefut minden böngészőben, pont azért van hozzá a library...
    Akkor úgy fogalmazok, ha van jQuery (vagy más keretrendszer), akkor az ilyen libraryk teljesen fölöslegesek lesznek (sőt kifejezetten hátrány).



  5. #5
    MinderBinder edem logója
    Csatlakozott
    09-09-02
    Hely
    Budapest
    Hozzászólás
    1.093
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    És mit fogsz tenni akkor, ha odamegy hozzád egy ügyfél és azt mondja, hogy: "Tessék, itt van egy kész rendszer (natív JS-el), szeretném, ha 'ezt' és 'ezt' megcsinálnáld benne, fizetek érte 500.000 HUF-ot?

    Jquery nélkül meg leszel lőve. Félreértés ne essék, nincs bajom a jquery-vel, sőt én is szoktam hasznláni, de azért túlzásokba ne essünk.



  6. #6
    a pulykakakas Kvarclovag logója
    Csatlakozott
    10-08-20
    Hely
    Budapest
    Hozzászólás
    1.018
    Begyűjtött 11 köszönetet
    11 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Nem próbáltam, mert most épp nem kell, de megjegyeztem, és kösz a közzétételt.
    Az ilyen menük használatát nálam az dönti el van-e valamilyen vészmegoldása a js kikapcsolása esetére. Persze csinálhatok én is neki, de biztos segítene, ha a fejlesztő, akár csak kommentben is leírná mi a teendőm.



  7. #7
    Hekker 0xFF logója
    Csatlakozott
    09-08-21
    Hozzászólás
    1.078
    Begyűjtött 168 köszönetet
    118 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Egy regisztrációs formnál hasznos lehet, főleg ha a vércsoporton kívül mindent meg kell adni, nemrég seobazis kollégánál találkoztam egy brutális formal valami kekszes oldalon.

    De jó lenne azt is megoldani, hogy csak az aktuális fül jelenjen meg, és lehessen lapozgatni, előre és hátra, persze csak a form validáció után, amit a kliens oldalon szintén a JS oldana meg.



  8. #8
    MinderBinder edem logója
    Csatlakozott
    09-09-02
    Hely
    Budapest
    Hozzászólás
    1.093
    Begyűjtött 0 köszönetet
    0 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Idézet Kvarclovag eredeti hozzászólása Hozzászólás megtekintése
    Nem próbáltam, mert most épp nem kell, de megjegyeztem, és kösz a közzétételt.
    Az ilyen menük használatát nálam az dönti el van-e valamilyen vészmegoldása a js kikapcsolása esetére. Persze csinálhatok én is neki, de biztos segítene, ha a fejlesztő, akár csak kommentben is leírná mi a teendőm.
    Igaz...ha nincs js, akkor látszik az összes div szimplán.


    Idézet KForum eredeti hozzászólása Hozzászólás megtekintése
    Egy regisztrációs formnál hasznos lehet, főleg ha a vércsoporton kívül mindent meg kell adni, nemrég seobazis kollégánál találkoztam egy brutális formal valami kekszes oldalon.

    De jó lenne azt is megoldani, hogy csak az aktuális fül jelenjen meg, és lehessen lapozgatni, előre és hátra, persze csak a form validáció után, amit a kliens oldalon szintén a JS oldana meg.
    Nekem szerver oldalon van validálva, kliens oldalra még nem készítettem megoldást, de már tervben van.



  9. #9
    Hekker 0xFF logója
    Csatlakozott
    09-08-21
    Hozzászólás
    1.078
    Begyűjtött 168 köszönetet
    118 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Természetesen, hogy szerver oldalon kell validálni, de pl egy e-mail vagy bármilyen mezőt le lehet ellenőrizni js oldalon is, és a ha valami gond van akkor szólni a júzernek



  10. #10
    Mentor arth2o logója
    Csatlakozott
    10-03-11
    Hely
    Győr
    Hozzászólás
    408
    Begyűjtött 7 köszönetet
    2 hozzászólásával

    Alapbeállítás re: Javascript Tabos menü for mindenkinek ^^

    Jó az űrlap varázslós plugined, de szerintem a kereket találtad fel újra
    Ráadásul elég sokat dolgoztál vele, ahogy elnézem.

    Sokszor gondolkoztam rajta, de ha egy hosszú űrlapod van, akkor megette a fene.
    Minimális adatkérése kell szorítkozni, mert a felhasználók nagyon nem szeretnek irogatni.

    pl.: tetszik a WP-ben hogy 2 mezőt töltesz ki és kész.

    Pl: ez ellenőrzi is az emailt:
    _http://thecodemine.org/#_demoForm=first
    _http://opendir.hu/?freedom=/tartalom/javascript/tobblepcsos_html_form-ok_jquery-vel



Oldal: 1 / 2 12 UtolsóUtolsó

A téma címkéi:

Könyvjelzők

Hozzászólás szabályai

  • Új témákat nem hozhatsz létre
  • Válaszokat nem küldhetsz
  • Fájlokat nem csatolhatsz
  • A hozzászólásaidat nem módosíthatod
  •