新しいjQueryとjQuery-uiで.tabs（ "add"、link、title）の代わりに

Question

マイクロソフトのビデオでは、レッスン17の「JQueryプラグインのインストールと利用」の05:28:20から始まる「Javascriptの基礎7時間リンクに：

https://youtu.be/JTpjqYjrPyU?t=5h28m20s

jQueryとjQueryの-UIを使用して、タブを実装する方法を説明しています。略しHTMLのソースコードは次のとおりです。

<div class="demo"> 
    <div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li> 
     <li><a href="#tabs-3">Aenean lacinia</a></li> 
    </ul> 
    <div id="tabs-1"> 
    <p>Latin text 1 .... </p> 
    </div> 
    <div id="tabs-2"> 
    <p>Latin text 2 .... </p> 
    </div> 
    <div id="tabs-3"> 
    <p>Latin text 3A .... </p><p>Latin text 3B .... </p> 
    </div> 
</div> 

問題は、ビデオはjQueryとjQueryの-UIの古いバージョンを使用して2012年の周りに作られたということです。時間のほとんどは、これは問題のあまりありませんが、ビデオに動的なタブは、コードを使用して追加された：

$(function() { 
    $("#tabs").tabs().tabs("add", "C9JS_16_html", "Click-a-bob"); 
}); 

残念ながら、この方法のタブ（「追加」、リンク、タイトルは）もはやあり私が使っているjQuery1.12.0とjQuery-UI.1.11.4のバージョンで有効です。

私はリンクを見て：

http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

と多くの成功なしでそれを使用してみました。後のHTML DOM内のリンクを挿入する

$(function() { 
    $('li:last').append('<li><a href="C9JS_16.html">Click-a-bob</a></li>'); 
}); 

：私は、コードを取得することができます

<li><a href="#tabs-3">Aenean lacinia</a></li> 

それだけで、リスト内の通常のリンクとして表示され、私は取得できませんよそのコード行で.tabs（）を使用して新しいタブとして表示するようにスタイルを設定しました。

誰がこの問題を解決する方法を知っていますか？私はどんな助けにも大変感謝しています。

Answer 1

希望はあなたが始められるでしょう：

// The NEW Tab link 
 
$("<li><a href='#tabs-4'>New Tab</a></li>").appendTo("#tabs .ui-tabs-nav"); 
 
// The NEW related Tab Content 
 
$("<div id='tabs-4'><p>Latin text 4 .... </p></div>").appendTo("#tabs"); 
 

 

 

 
// Initiate UI Tabs 
 
$("#tabs").tabs();

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> 
 
<script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 

 
<div id="tabs"> 
 
    
 
    <ul class="ui-tabs-nav"> 
 
    <li><a href="#tabs-1">Nunc tincidunt</a></li> 
 
    <li><a href="#tabs-2">Proin dolor</a></li> 
 
    <li><a href="#tabs-3">Aenean lacinia</a></li> 
 
    </ul> 
 
    
 
    <div id="tabs-1"> 
 
    <p>Latin text 1 .... </p> 
 
    </div> 
 
    <div id="tabs-2"> 
 
    <p>Latin text 2 .... </p> 
 
    </div> 
 
    <div id="tabs-3"> 
 
    <p>Latin text 3A .... </p><p>Latin text 3B .... </p> 
 
    </div> 
 
    
 
</div>

Answer 2

あなたは常にaddNewTabのような新機能でのjQueryを延長することができる

：

$.fn.addNewTab = function (name, title, content) { 
 
    $('ul', this).append('<li><a href="#tab-' + name + '">' + title + '</a></li>'); 
 
    $(this).append("<div id='tab-" + name + "'>" + content + "</div>"); 
 
    $(this).tabs("refresh"); 
 
}; 
 

 

 
$(function() { 
 
    $("#tabs").tabs().addNewTab("C9JS_16_html", "Click-a-bob", 'some text'); 
 
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 

 
<div class="demo"> 
 
    <div id="tabs"> 
 
     <ul> 
 
      <li><a href="#tabs-1">Nunc tincidunt</a></li> 
 
      <li><a href="#tabs-2">Proin dolor</a></li> 
 
      <li><a href="#tabs-3">Aenean lacinia</a></li> 
 
     </ul> 
 
     <div id="tabs-1"> 
 
      <p>Latin text 1 .... </p> 
 
     </div> 
 
     <div id="tabs-2"> 
 
      <p>Latin text 2 .... </p> 
 
     </div> 
 
     <div id="tabs-3"> 
 
      <p>Latin text 3A .... </p><p>Latin text 3B .... </p> 
 
     </div> 
 
    </div> 
 
</div>

Answer 3

さて、実際には、1回目の回答が正確ではないことがわかりました。 "Click-a-bob"タブをクリックすると、そのタグで表示されている内容のテキストが表示されますが、関数のname引数が正しく機能していないため、 bob "タグの場合、リンク：... C9JS_17.html＃tab-C9JS_16.htmlはC9JS_16.htmlだけでなく、ブラウザの下部に表示されるので、リンクをクリックするとそのページに移動しません。

実際、ビデオではタブは元のページに表示され、その下にC9JS_16.htmlの内容が表示されます。 iframeやその他のインクルードが必要なように見えるので、これに関するいくつかのアドバイスをいただければ幸いです。

しかし、暫定的に私は、コードを次のように変更作られた：私はC9JS_16.htmlへのコードの3行目にリンクを追加しました

$.fn.addNewTab = function (name, title, content) { 
    $('ul',this).append('<li><a href="#tab-' + name + '">' + title + '</a></li>'); 
    $(this).append("<div id='tab-" + name + "'><a href='" + name + "'>" + content + "</a></div>"); 
    $(this).tabs("refresh"); 
}; 

$(function() { 
    $('#tabs').tabs().addNewTab('C9JS_16.html', 'Click-a-bob', 'Click here for "Click-a-bob"'); 
}); 

を、そして最後の文言を変更しました無名関数の引数。タブをクリックすると、「Click-a-bob」のテキストが表示され、それをクリックするとC9JS_16.htmlページに移動します。