<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);