jQuery EasyUI レイアウトは tabs_jquery を動的に追加します

以下を読む前に、easyui 関連の知識について簡単にご紹介します。

easyui は、jQuery に基づいたユーザー インターフェイス プラグインのコレクションです。 ddd

easyui は、最新のインタラクティブな JavaScript アプリケーションを作成するために必要な機能を提供します。

easyui を使用すると、多くのコードを記述する必要はありません。ユーザー インターフェイスを定義するために必要なのは、いくつかの簡単な HTML タグだけです。

easyui は、HTML5 Web ページを完全にサポートする完全なフレームワークです。

easyui は、Web 開発の時間と規模を節約します。

easyui は非常にシンプルですが強力です。

タブはjQuery EasyUIを使用して簡単に追加できます。 「add」メソッドを呼び出すだけです。

このチュートリアルでは、iframe を使用してページに表示されるタブを動的に追加します。 「追加」ボタンをクリックすると、新しいタブが追加されます。タブがすでに存在する場合はアクティブになります。

ステップ 1: タブを作成する

 <div style="margin-bottom:10px">
 <a href="#" class="easyui-linkbutton" onclick="addTab('google','http://www.google.com')">google</a>
 <a href="#" class="easyui-linkbutton" onclick="addTab('jquery','http://jquery.com/')">jquery</a>
 <a href="#" class="easyui-linkbutton" onclick="addTab('easyui','http://jeasyui.com/')">easyui</a>
 </div>
 <div id="tt" class="easyui-tabs" style="width:400px;height:250px;">
 <div title="Home">
 </div>
 </div>

この HTML コードは非常に単純で、「ホーム」という名前のタブ パネルを含むタブを作成します。 js コードを記述する必要がないことに注意してください。

ステップ 2: 'addTab' 関数を実装する

 function addTab(title, url){
 if ($('#tt').tabs('exists', title)){
  $('#tt').tabs('select', title);
 } else {
  var content = '<iframe scrolling="auto" frameborder="0" src="'+url+'" style="width:100%;height:100%;"></iframe>';
  $('#tt').tabs('add',{
  title:title,
  content:content,
  closable:true
  });
 }
 }

「exists」メソッドを使用してタブがすでに存在するかどうかを判断し、すでに存在する場合はタブをアクティブにします。存在しない場合は、「add」メソッドを呼び出して新しいタブ パネルを追加します。

さて、このチュートリアルはここで終わります。皆さんのお役に立てれば幸いです。