Home > JavaScript > JavaScript – Tab

JavaScript – Tab

<script src="http://dpaste.de/QuaL/raw/" ></script>

<body>
    <!-- Main tab holder -->
    <div id ="try" style="position:absolute; top : 50px;left: 50px; width:800px;"></div>

    <!-- page 2 anything... -->
    <div id="page0" style="display:none;">
        Page 1
    </div>
    <!-- page 2 anything... -->
    <div id="page1" style="display:none;">
        Page 2
    </div>	

</body>

<script>

// make tab.
(function($){
    // briefcase
    var _opt = '';
    var _html = '';
    var _css = '';
    var _tmp = '';
    // inside the container put a tab.
    $.fn.shtab  = function (param){
        // keep the original father
        var _root = $(this);
        // prepare the objects
        _opt = $.extend( {} , param, $.fn.shtab.defaults);
        // fire - menus array towards page array and check ajax load or local load
        $.each(_opt.menus, function (i,v){
            // keep in memory total tab indexes
            _opt.howmanytab = i;
            // How many menu to draw plane it
            _tmp = _tmp +  '<li class=' + i + '  ><img src="images/application.png"  /><a>' + v  + '</a> </li>';
        });
        // embed css
        _css  = '\
            <style>\
            .sh-maintab {  }\
            .sh-maintab ul {padding:0;}\
            .sh-maintab li {cursor:pointer; background-color:#EEF2FB;         border:1px solid #AFC1E2;     font-size:11px; text-align:center;     display:block;  float:right;   margin:-25px 10px 0 0;        padding:5px 13px 5px 15px; }\
            .sh-maintab ul li img {         width:20px; height:20px; position:relative;float:left;margin:-10px 0 0 -10px;     }\
            .sh-maintab ul li a { cursor:pointer; color:#000000;}\
			.sh-maintab ul li:hover { background-color:red;}\
            .sh-contents { border-top: solid 1px #AFC1E2; padding-top: 20px; }\
            </style>\
        ';
        // embed html
        _html = '\
            <!-- main tab to multiple tabs -->\
            <div >\
                <!-- main tab main buttons -->\
                <div>\
                    <ul>' + _tmp +
                    '</ul>\
                </div>\
                <!-- selected tab items..... -->\
                <div></div>\
            </div>\
        ';
        // paint it
        $(this).empty().append(_css + _html);

        // Now on click, load contents to viewport
        _root.find('.sh-maintab li').click(function(){
            _tmp = $(this).attr('class');
            _tmp = _opt.page [_tmp];
            //console.log ( _tmp );

            // check which viewmode is on.
            switch (_opt.ajaxpage){
                case true:
                    // apply the page to get via ajax path
                    $.ajax({
                        data:'',
                        url:'',
                        dataType:'',
                        success:function(msg){

                        }
                    })
                    break;

                case false:
                    // take the div or class id and append it.
                    //$(_tmp).append( _root.find('.sh-contents').empty() );
					_root.find('.sh-contents').empty().append( $(_tmp).html() );
					switch(_opt.cache){
						case true:
							// spaar
							_root.find('.sh-contents').change(function(){
								alert( $(this).html() );
								$(_tmp).html( $(this).html() );
							});
							break;

						case false:
							// nee spaar
							break;
					}

                    break;
                case 'both':
                    break;
            }// end of the switch and case, break;
        });

    }

    // Outside to inside execute
    $.fn.shtab.defaults = {
        howmanytab: 0,
        callmeback: function() { }
    };
})(jQuery);

// tiren / roepen.
$('#try').shtab({
    // Tab0, Tab1, Tab2
    menus: ['Home','About us','Test drive'],
    //load contents: false, true for ajax, both for auto sence
    ajaxpage: false,
    //#divid or .classname or folder/page.php
    page: ['#page0','#page1','#page2'],
	// true or false, to changes made
	cache: true
});

</script>

download:
http://dpaste.de/bobx/

Advertisements
Categories: JavaScript Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: