Skip to content

Instantly share code, notes, and snippets.

@jupiterjs

jupiterjs/jquerytab.html

Created July 18, 2011 23:23
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jupiterjs/1090937 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jupiterjs/1090937 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. JupiterJS revised this gist Jul 19, 2011. 1 changed file with 70 additions and 0 deletions.
    70 changes: 70 additions & 0 deletions jquerytab.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,70 @@
    <html>
    <body>
    <ul id='tabs'>
    <li><a href='#starcraft'>Starcraft</a></li>
    <li><a href='#rua'>Robot Unicorn Attack</a></li>
    <li><a href='#fallout'>Fallout</a></li>
    </ul>
    <div id='starcraft'></div>
    <div id='rua'></div>
    <div id='fallout'></div>



    <script type='text/javascript'
    src='jquery.js'></script>
    <script type='text/javascript'>

    $.fn.tabs = function(){
    var getPanelFromButton = function(li){
    return $( $(li).children().attr("href") );
    }

    var lis = this.find('li:nth-child(n+2)');
    lis.each(function(i, li){
    getPanelFromButton(li).hide();
    })
    var firstLi = this.find('li:first-child').addClass("active")
    var firstDiv = getPanelFromButton(firstLi[0]),
    url = firstDiv[0].id+".html";

    $.ajax({
    url: url,
    type: "GET",
    success : function(text){
    firstDiv.html(text);
    },
    dataType :"text"
    })

    var ul = this;

    this.delegate('li','click', function(ev){
    var oldActive = ul.find('.active');
    getPanelFromButton( oldActive[0] ).hide()
    oldActive.removeClass('active')
    getPanelFromButton( this ).show();
    $(this).addClass('active');
    ev.preventDefault();
    })
    };






    $('#tabs').tabs();

    $('#foo').bind('scroll', function(){

    if($(this).scrollTop() + this.clientHeight == this.scrollHeight){
    $(this).append("<p>Keep going</p>")
    }
    })

    //console.log(content.text() );
    //content.text("<li> tags are my favorite")
    </script>
    </body>
    </html>
  2. JupiterJS revised this gist Jul 19, 2011. 1 changed file with 62 additions and 14 deletions.
    76 changes: 62 additions & 14 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,61 @@
    <html>
    <body>
    <ul>
    <li>Item 1 </li>
    <li>Item 2 </li>
    <ul id='tabs'>
    <li><a href='#starcraft'>Starcraft</a></li>
    <li><a href='#rua'>Robot Unicorn Attack</a></li>
    <li><a href='#fallout'>Fallout</a></li>
    </ul>
    <ul>
    <li>Item 1 </li>
    <li>Item 2 </li>
    </ul>
    <input type='text' class='age' />
    <input type='text' class='age' />
    <p id='content'>Hello <span>World</span>!</p>
    <div id='starcraft'>Info about starcraft</div>
    <div id='rua'>Info about Robot unicorn attack</div>
    <div id='fallout'>Info about Fallout</div>

    <script type='text/javascript'>


    my$ = function( selector ) {
    if(this.constructor !== my$){
    return new my$(selector);
    }
    var elements;
    if( typeof selector === 'string' ) {
    elements = document.querySelectorAll(selector);
    } else {
    } else if( selector.length ){
    elements = selector;
    } else {
    elements = [selector];
    }

    this.length =0;
    [].push.apply(this, elements); //[Element1, Element2, Element3]
    [].push.apply(this, my$.makeArray( elements ) ); //[Element1, Element2, Element3]
    }
    my$.makeArray = function(arraylike){
    var arr = [];
    for(var i =0; i < arraylike.length; i++){
    arr[i] = arraylike[i]
    }
    return arr;
    }
    my$.fn = my$.prototype;

    // my$('#tabs').tabs()
    my$.fn.tabs = function(){
    var lis = this.find('li:nth-child(n+2)');
    lis.each(function(i, li){
    var href = my$(li).children().attr("href");
    my$(href).hide()
    })
    }


    // my$('ul').find('li:gt(0)') ->

    my$.prototype.find = function(selector){
    return my$( this[0].querySelectorAll(selector) )
    }
    my$.fn.show = function(){
    return this.css('display','')
    }
    my$.fn.hide = function(){
    return this.css('display','none')
    }

    var getAndSet = function(name, get, setter){
    @@ -127,7 +159,23 @@

    return new my$(current ? [current] : []);
    }
    new my$('li').parent();

    my$.prototype.each = function(callback){
    for(var i =0; i < this.length; i++){
    callback.call(this[i], i, this[i])
    }
    }

    my$.prototype.bind = function(event, callback){
    this.each(function(i, el){
    el.addEventListener(event, callback, false)
    })
    }

    my$('#tabs').tabs();



    //console.log(content.text() );
    //content.text("<li> tags are my favorite")
    </script>
  3. JupiterJS revised this gist Jul 19, 2011. 1 changed file with 79 additions and 20 deletions.
    99 changes: 79 additions & 20 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,44 +1,59 @@
    <html>
    <body>
    <ul>
    <li>Item 1 </li>
    <li>Item 2 </li>
    </ul>
    <ul>
    <li>Item 1 </li>
    <li>Item 2 </li>
    </ul>
    <input type='text' class='age' />
    <input type='text' class='age' />
    <p id='content'>Hello <span>World</span>!</p>
    <script type='text/javascript'>


    my$ = function(selector){
    var elements = document.querySelectorAll(selector);

    my$ = function( selector ) {
    var elements;
    if( typeof selector === 'string' ) {
    elements = document.querySelectorAll(selector);
    } else {
    elements = selector;
    }

    this.length =0;
    [].push.apply(this, elements); //[Element1, Element2, Element3]
    }

    var getAndSet = function(name, get, setter){

    my$.prototype[name] = function(newVal){
    if( newVal !== undefined ){

    if( arguments.length >= setter.length ){
    for(var i =0; i < this.length; i++){
    setter(this[i], newVal)
    setter.apply(this[i], arguments)
    }
    return this;
    } else {
    return get(this[0])
    return get.apply(this[0], arguments)
    }
    }
    };
    getAndSet("val",
    function(el){
    return el.value
    function(){
    return this.value
    },
    function(el, newVal){
    el.value = newVal;
    function( newVal){
    this.value = newVal;
    });

    getAndSet("html",
    function(el){
    return el.innerHTML
    function(){
    return this.innerHTML
    },
    function(el, newHTML){
    el.innerHTML = newHTML;
    function(newHTML){
    this.innerHTML = newHTML;
    });

    var getTextNodes = function(el, callback){
    @@ -54,21 +69,65 @@
    }

    getAndSet("text",
    function(el){
    function(){
    var text = "";
    getTextNodes(el, function(txt){
    getTextNodes(this, function(txt){
    text = text + txt
    });
    return text;
    },
    function(el, newText){
    el.innerHTML ="";
    function( newText){
    this.innerHTML ="";
    var textNode = document.createTextNode(newText);
    el.appendChild(textNode);
    this.appendChild(textNode);
    });

    getAndSet("attr",
    function(attrName){
    return this.getAttribute(attrName)
    },
    function(attrName, attrValue){
    return this.setAttribute(attrName, attrValue)
    })

    getAndSet("css",
    function(styleProp){
    return document
    .defaultView
    .getComputedStyle( this, null )
    .getPropertyValue( styleProp )
    },
    function(styleProp, styleValue){
    return this.style[styleProp] = styleValue;
    })


    my$.prototype.children = function(){
    var el = this[0],
    arr = [],
    children = el.childNodes;
    for(var i =0; i < children.length; i++){
    if(children[i].nodeType === 1){
    arr.push(children[i])
    }
    }
    return new my$( arr );
    };



    new my$('.age').val(28);
    my$.prototype.parent = function(){
    return new my$([this[0].parentNode])
    }
    my$.prototype.next = function(){
    var current = this[0].nextSibling;
    while(current && current.nodeType !== 1){
    current = current.nextSibling;
    }

    return new my$(current ? [current] : []);
    }
    new my$('li').parent();
    //console.log(content.text() );
    //content.text("<li> tags are my favorite")
    </script>
  4. JupiterJS created this gist Jul 18, 2011.
    76 changes: 76 additions & 0 deletions gistfile1.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    <html>
    <body>
    <input type='text' class='age' />
    <input type='text' class='age' />
    <p id='content'>Hello <span>World</span>!</p>
    <script type='text/javascript'>


    my$ = function(selector){
    var elements = document.querySelectorAll(selector);

    this.length =0;
    [].push.apply(this, elements); //[Element1, Element2, Element3]
    }

    var getAndSet = function(name, get, setter){
    my$.prototype[name] = function(newVal){
    if( newVal !== undefined ){
    for(var i =0; i < this.length; i++){
    setter(this[i], newVal)
    }
    return this;
    } else {
    return get(this[0])
    }
    }
    };
    getAndSet("val",
    function(el){
    return el.value
    },
    function(el, newVal){
    el.value = newVal;
    });

    getAndSet("html",
    function(el){
    return el.innerHTML
    },
    function(el, newHTML){
    el.innerHTML = newHTML;
    });

    var getTextNodes = function(el, callback){
    var childNodes = el.childNodes;
    for(var i =0; i < childNodes.length; i++){
    var childNode = childNodes[i];
    if(childNode.nodeType === 3){
    callback(childNode.nodeValue)
    } else {
    getTextNodes(childNode, callback)
    }
    }
    }

    getAndSet("text",
    function(el){
    var text = "";
    getTextNodes(el, function(txt){
    text = text + txt
    });
    return text;
    },
    function(el, newText){
    el.innerHTML ="";
    var textNode = document.createTextNode(newText);
    el.appendChild(textNode);
    });


    new my$('.age').val(28);
    //console.log(content.text() );
    //content.text("<li> tags are my favorite")
    </script>
    </body>
    </html>