Aspire
Koineks
  • 14-08-2013, 17:47:24
    #1
    1/2
    HTML-Kodu:
    <link rel="stylesheet" href="css/style.css">
        <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
        <script src="js/organictabs.jquery.js"></script>
        <script>
            $(function() {
        
                $(".example-one").organicTabs({
                    "speed": 200
                });
        
            });
        </script>
    <pre><script type="text/javascript">// <![CDATA[
    $(document).ready(function(){
        var counter = 3;
        $("#addButton").click(function () {
        <!-- en fazla kaç tane text kutusu oluşturulabilir -->
        if(counter>10){
                alert("En fazla 10 tane");
                return false;
        }
        var newTextBoxDiv = $(document.createElement('div'))
             .attr("class", 'TextBoxDiv' + counter);
        <!-- text kutusunun eklendigi HTML kodları -->
        newTextBoxDiv.after().html( '<div class="example-one"><ul class="nav"><li class="nav-one"><a href="#featured" class="current">Featured</a></li><li class="nav-two"><a href="#core">Core</a></li><li class="nav-three"><a href="#jquerytuts">jQuery</a></li><li class="nav-four last"><a href="#classics">Classics</a></li> </ul><div class="list-wrap"><ul id="featured">1asdasd</ul> <ul id="core" class="hide" style="position: relative; top: 0px; left: 0px; display: none;"> 1asdasd</ul> <ul id="jquerytuts" class="hide" style="position: relative; top: 0px; left: 0px; display: none;">1 asdasfdsafgdsa43q</ul><ul id="classics" class="hide" style="position: relative; top: 0px; left: 0px; display: none;">1asdfsadfdsaf </ul></div> </div>');
        newTextBoxDiv.appendTo("#TextBoxesGroup");
        counter++;
         });
         $("#removeButton").click(function () {
        if(counter==1){
              alert("No more textbox to remove");
              return false;
           }
        counter--;
            $(".TextBoxDiv" + counter).remove();
         });
         $("#getButtonValue").click(function () {
        var msg = '';
        for(i=1; i<counter; i++){          msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();  }         alert(msg);      });   });
    // ]]></script></pre>
    <div id="TextBoxesGroup">
    	<div class="TextBoxDiv1">
    			<div class="example-one"><ul class="nav"><li class="nav-one"><a href="#featured" class="current">Featured</a></li><li class="nav-two"><a href="#core">Core</a></li><li class="nav-three"><a href="#jquerytuts">jQuery</a></li><li class="nav-four last"><a href="#classics">Classics</a></li> </ul><div class="list-wrap"><ul id="featured">1asdasd</ul> <ul id="core" class="hide"> 1asdasd</ul> <ul id="jquerytuts" class="hide">1 asdasfdsafgdsa43q</ul><ul id="classics" class="hide">1asdfsadfdsaf </ul></div> </div>
    	</div>
    		<div class="TextBoxDiv2">
    			<div class="example-one"><ul class="nav"><li class="nav-one"><a href="#featured" class="current">Featured</a></li><li class="nav-two"><a href="#core">Core</a></li><li class="nav-three"><a href="#jquerytuts">jQuery</a></li><li class="nav-four last"><a href="#classics">Classics</a></li> </ul><div class="list-wrap"><ul id="featured">1asdasd</ul> <ul id="core" class="hide"> 1asdasd</ul> <ul id="jquerytuts" class="hide">1 asdasfdsafgdsa43q</ul><ul id="classics" class="hide">1asdfsadfdsaf </ul></div> </div>
    	</div>
    </div>
    <pre><input id="addButton" type="button" value="Ekle" />
    <input id="removeButton" type="button" value="Sil" />
    <input id="getButtonValue" type="button" value="Text kutulari goster" />
    Elimiz ile birden fazla tab oluşturduğumuzda yukarıdaki gibi hiçbir sıkıntı yok ama dinamik olarak jQuery tab oluşturduğumuzda yeni oluşan tablar çalışmıyor.

    Üzerinde uzunca süre çalıştım ancak cevabı bulamadım farklı bir gözden bakmak faydalı olacaktır yardımcı olursanız sevinirim arkadaşlar



    (function($) {
    
        $.organicTabs = function(el, options) {
        
            var base = this;
            base.$el = $(el);
            base.$nav = base.$el.find(".nav");
                    
            base.init = function() {
            
                base.options = $.extend({},$.organicTabs.defaultOptions, options);
                
                // Accessible hiding fix
                $(".hide").css({
                    "position": "relative",
                    "top": 0,
                    "left": 0,
                    "display": "none"
                }); 
                
                base.$nav.delegate("li > a", "click", function() {
                
                    // Figure out current list via CSS class
                    var curList = base.$el.find("a.current").attr("href").substring(1),
                    
                    // List moving to
                        $newList = $(this),
                        
                    // Figure out ID of new list
                        listID = $newList.attr("href").substring(1),
                    
                    // Set outer wrapper height to (static) height of current inner list
                        $allListWrap = base.$el.find(".list-wrap"),
                        curListHeight = $allListWrap.height();
                    $allListWrap.height(curListHeight);
                                            
                    if ((listID != curList) && ( base.$el.find(":animated").length == 0)) {
                                                
                        // Fade out current list
                        base.$el.find("#"+curList).fadeOut(base.options.speed, function() {
                            
                            // Fade in new list on callback
                            base.$el.find("#"+listID).fadeIn(base.options.speed);
                            
                            // Adjust outer wrapper to fit new list snuggly
                            var newHeight = base.$el.find("#"+listID).height();
                            $allListWrap.animate({
                                height: newHeight
                            });
                            
                            // Remove highlighting - Add to just-clicked tab
                            base.$el.find(".nav li a").removeClass("current");
                            $newList.addClass("current");
                                
                        });
                        
                    }   
                    
                    // Don't behave like a regular link
                    // Stop propegation and bubbling
                    return false;
                });
                
            };
            base.init();
        };
        
        $.organicTabs.defaultOptions = {
            "speed": 300
        };
        
        $.fn.organicTabs = function(options) {
            return this.each(function() {
                (new $.organicTabs(this, options));
            });
        };
        
    })(jQuery);
  • Sponsor Reklam
  • 24-08-2013, 10:20:47
    #2
    1/2
    öyle bir fonksiyon oluştur ve :
                function tabla() {
                    $(".example-one").organicTabs({
                        "speed": 200
                    });
                }
    $(document).ready(function(){
    hemen sonrasına ekle :
     tabla();
    bunun da hemen sonrasına ekle :
    newTextBoxDiv.appendTo("#TextBoxesGroup");
      tabla();