jquery easyui 動的タブ page_jquery を説明するサンプルコード

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

function addTab(title, href,icon){ 
  var tt = $('#tabs'); 
  if (tt.tabs('exists', title)){//如果tab已经存在,则选中并刷新该tab     
    tt.tabs('select', title); 
    refreshTab({tabTitle:title,url:href}); 
  } else { 
    if (href){ 
      var content = '<iframe scrolling="no" frameborder="0" src="'+href+'" style="width:100%;height:100%;"></iframe>'; 
    } else { 
      var content = '未实现'; 
    } 
    tt.tabs('add',{ 
      title:title, 
      closable:true, 
      content:content, 
      iconCls:icon||'icon-default' 
    }); 
  } 
} 
/**   
 * 刷新tab 
 * @cfg 
 *example: {tabTitle:'tabTitle',url:'refreshUrl'} 
 *如果tabTitle为空，则默认刷新当前选中的tab 
 *如果url为空，则默认以原来的url进行reload 
 */ 
function refreshTab(cfg){ 
  var refresh_tab = cfg.tabTitle&#63;$('#tabs').tabs('getTab',cfg.tabTitle):$('#tabs').tabs('getSelected'); 
  if(refresh_tab && refresh_tab.find('iframe').length > 0){ 
  var _refresh_ifram = refresh_tab.find('iframe')[0]; 
  var refresh_url = cfg.url&#63;cfg.url:_refresh_ifram.src; 
  //_refresh_ifram.src = refresh_url; 
  _refresh_ifram.contentWindow.location.href=refresh_url; 
  } 

上記のコードはシンプルで理解しやすいものです。質問がある場合は、メッセージを残してください。

ps: jQuery Easyui のタブ プラグインには、タブ (タブ) にコンテンツをロードする 2 つの方法があります。「href リモート リクエスト」と「コンテンツ ローカル コンテンツ」です。

両方の特徴:

href モードでのデータ読み込みの特徴:

ロードされたページの body 要素内のコンテンツのみがロードされます。つまり、jQuery の ajax リクエストは HTML フラグメントのみです。
リモート URL をロードするときにマスキング効果、つまり「待機中...」効果があり、ユーザー エクスペリエンスが向上します。
読み込まれるページのレイアウトがより複雑である場合、または実行する必要がある js スクリプトが多い場合、コーディングには注意が必要になることが多く、問題が発生しやすくなります。これについては後で詳しく説明します。

コンテンツ読み込みデータの特徴:

スクリプト内で HTML コードを記述し、それをタブの content 属性に割り当てることはより柔軟です。ただし、この書き方ではコードが読みにくくなります。
iframe をコンテンツに割り当てることができ、iframe を埋め込むことで実現できないことは何もありません。
iframe を使用すると、クライアント js が繰り返しロードされるため、リソースが無駄になります。たとえば、メイン ページが easyui ライブラリを参照する必要がある場合、iframe もそれを参照する必要があり、無駄が発生します。