настроить вкладки jquery

Я хочу настроить вкладки jQuery по умолчанию. Я добавил Добавить вкладки кнопка в навигационной панели.настроить вкладки jquery

Я хочу добавить новые вкладки до этой кнопки: как я могу это сделать?

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#tabs").tabs(); 
    }); 
    </script> 
</head> 
<body style="font-size:62.5%;"> 

<div id="tabs"> 
    <ul> 
     <li><a href="#fragment-1"><span>One</span></a></li> 
     <li><a href="#fragment-2"><span>Two</span></a></li> 
     <li><input type='button' id='addTab' value='Add Tab'></li> 
    </ul> 

    <div id="fragment-1"> 
     <p>First tab is active by default:</p> 
     <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    <div id="fragment-2"> 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 

    <input type='button' id='removeTab' value='RemoveTab'> 
</body> 
</html>

JS:

$('#addTab').live('click', function() { 
    $("#tabs").tabs("add", "http://google.com", "A newTab", [2]) 
}); 
$('#removeTab').live('click', function() { 
    $("#tabs").tabs("remove", "http://google.com", "A newTab", [2]) 
});

jsFiddle: http://jsfiddle.net/6VrwD/14/

источник

2012-05-09 Muhammad Usman

Что именно не работает? На странице скрипта я вижу, что кнопки для добавления новых вкладок работают нормально. – arma

Я хочу добавить вкладки перед кнопкой ... –

http://jsfiddle.net/armababy/6VrwD/17/ – arma

У меня была такая же проблема. Я нашел немного сложный способ избежать этого. Я не уверен, что он работает в любой среде браузера, но, пожалуйста, попробуйте, как вам нравится, ниже:

Сначала укажите имя класса последнему тегу <li>, где вы поместите кнопку «Добавить вкладку».

<ul id="mytabs"> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
    <li><a href="#fragment-2"><span>Two</span></a></li> 
    <li class='list_btn'><input type='button' id='addTab' value='Add Tab'></li> 
</ul>

И далее, в функции щелчка, просто добавьте вкладку в последнюю позицию. После добавления новой вкладки в последнюю позицию вы можете переключить порядок последней вкладки и кнопку «Добавить вкладку».

$('#addTab').live('click', function() { 
    // add a tab to the last position. 
    $("#tabs").tabs("add", "http://google.com", "A newTab"); 

    // switch the order of the last tab and the "Add Tab" button. 
    $(".list_btn").clone().appendTo("#mytabs"); 
    $(".list_btn:first").remove(); 
});

Вы сможете переписать код более сложный путь, особенно в последней части, где переключая порядок вкладок. Спасибо.

источник

2012-05-09 11:12:11 naota

настроить вкладки jquery

ответ

Смежные вопросы