検索

ホームページ >ウェブフロントエンド >jsチュートリアル >EasyUI タブに右クリック メニューを追加する方法 label_jquery

EasyUI タブに右クリック メニューを追加する方法 label_jquery

WBOY
WBOYオリジナル
2016-05-16 17:52:011372ブラウズ

初期段階の準備作業:
1. DEMO ソース コードをダウンロードし、最新バージョン (jquery 1.7.2、Easyui 1.2.6) にアップグレードするだけです。easyui をアップグレードする場合は、すべての CSS を置き換える必要があります。 js テーマ
2. ホームページの HTML コード内: コード

を次のコードにコピーします: < ; div id="mm" class="easyui-menu" style="width:150px;">
更新
< ="menu-sep">

閉じる

すべて閉じる< ;/div>
これ以外をすべて閉じる
現在のページの右側をすべて閉じる

現在のページの左側をすべて閉じるページを閉じる


終了
;/div>


は次のように変更されます:



コードをコピーします

コードは次のとおりです。
更新
閉じる
"> ;すべて閉じる
これ以外をすべて閉じる

現在のページの右側をすべて閉じる

現在のページの左側をすべて閉じる< ;/div>

終了



次のように、outlook2.js に新しいメソッドを追加します。




コードをコピーします


コードは次のとおりです。
function closeTab(action) { var alltabs = $('#tabs').tabs('tabs'); var currentTab =$( '#tabs').tabs(' getSelected'); var allTabtitle = [];
$.each(alltabs,function(i,n){
allTabtitle.push($(n). panel('options').title) ;
})
switch (action) {
case "refresh":
var iframe = $(currentTab.panel('options').content) ;
var src = iframe.attr('src');
$('#tabs').tabs('update', {
タブ: currentTab,
オプション: {
content: createFrame(src)
}
})
break;
case "close":
var currtab_title = currentTab.panel('options').title; '#tabs').tabs(' close', currtab_title);
break;
case "closeall":
$.each(allTabtitle, function (i, n) {
if (n) !=onlyOpenTitle){
$ ('#tabs').tabs('close', n);
break "closeother":
var currtab_title = currentTab.panel(' options').title;
$.each(allTabtitle, function (i, n) {
if (n != currtab_title && n !=onlyOpenTitle)
{
$('#tabs' ).tabs('close', n);
break;
case "closeright":
var tabIndex = $ ('#tabs').tabs( 'getTabIndex', currentTab);
if (tabIndex == alltabs.length - 1){
alert('親愛なる、その背後には何もありません^@^!!' );
return false;
}
$.each(allTabtitle, function (i, n) {
if (i > tabIndex) {
if (n !=onlyOpenTitle){
$('#tabs').tabs('close', n);
break "closeleft":
var tabIndex = $('#tabs'). tabs('getTabIndex', currentTab);
if (tabIndex == 1) {
alert('あなた、あなたの前に誰かがいます、私たちはできません彼を怒らせる余裕がある。 ^@^!!');
return false;
}
$.each(allTabtitle, function (i, n) {
if (i < tabIndex) {
if ( n !=onlyOpenTitle){
$('#tabs').tabs('close', n);
}
}); exit":
$('#closeMenu').menu('hide');
break;
}
}


js の tabClos​​eEven メソッドを次のように変更します。




コードをコピー


コードは次のとおりです。


function tabClos​​eEven() {
$ ('# mm').menu({
onClick: function (item) {
closeTab(item.id);
}
});


これで問題ありません。コードは以前よりもはるかにエレガントになりました。
refresh を呼び出して現在のタブを閉じるときは、closeTab('action') を呼び出します //アクションは、refresh (リフレッシュ) または close (close) にすることができます
iframe で使用する場合は、これを実行します top.closeTab('action ');
最新の Easyui アプリケーションのサンプルをダウンロードするにはここをクリックしてください
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jquery (javascript) 自動シリアル番号と属性番号の実装 code_jquery次の記事：jquery (javascript) 自動シリアル番号と属性番号の実装 code_jquery

関連記事

続きを見る