検索

ホームページ >ウェブフロントエンド >jsチュートリアル >EasyUIでのabsの使い方を詳しく説明する

EasyUIでのabsの使い方を詳しく説明する

亚连
亚连オリジナル
2018-06-15 16:46:352159ブラウズ

以下に jQuery EasyUI タブパネルのタブの使用例を紹介します。これは良い参考値であり、皆さんの役に立つことを願っています。

1. タブパネル領域に class="easyui-tabs" を設定します

2. 複数の p をタブパネル領域に追加します (各パネルはタイトルを設定する必要があります)

3 、パネルを設定しますfit を true に設定し、親コンテナのサイズに合わせます

4. tab closeable を true に設定し、閉じるボタンを追加します

5. ハイパーリンクをクリックした後に新しいタブを追加します

構文: Page Object.easyui プラグ-in (メソッド名, パラメータ);

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>easyui-选项卡面板tabs的使用</title>
 <!-- 导入jquery核心类库 -->
 <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <!-- 导入easyui类库 -->
 <link id="easyuiTheme" rel="stylesheet" type="text/css" href="../js/easyui/themes/default/easyui.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../js/easyui/themes/icon.css" rel="external nofollow" >
 <link rel="stylesheet" type="text/css" href="../css/default.css" rel="external nofollow" >
 <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js"></script>
 <script type="text/javascript">
  //页面加载后执行
  $(function(){
  //对链接绑定点击事件
  $("#nwtxxb").click(function(){
   //添加一个新的选项卡
   $("#mytabs").tabs(&#39;add&#39;,{
   title:&#39;CSDN博客&#39;,
   content:&#39;学IT，你我他学习吧&#39;
   });
  });
  });
 </script>
 </head>
 <body class="easyui-layout">
 <p data-options="region:&#39;north&#39;,title:&#39;你我他学习吧-学习Java的好博客！&#39;" style="height:100px"></p>
 <p data-options="region:&#39;west&#39;,title:&#39;菜单导航&#39;" style="width:200px">
  <!--折叠面板-->
  <p class="easyui-accordion" data-options="fit:true">
  <p data-options="title:&#39;基础菜单&#39;">
   <a href="javascript:void(0)" rel="external nofollow" id="nwtxxb">你我他学习吧</a>
  </p>
  <p data-options="title:&#39;系统菜单&#39;">你我他学习吧</p>
  </p>
 </p>
 <p data-options="region:&#39;center&#39;,title:&#39;中部区域&#39;">
  <!--选项卡面板-->
  <p id="mytabs" class="easyui-tabs" data-options="fit:true">
  <p data-options="title:&#39;CSDN博客&#39;,closable:true">学Java后台编程，就来你我他学习吧！</p>
  <p data-options="title:&#39;博客园&#39;,closable:true">学前端开发，就来你我他学习吧！</p>
  </p>
 </p>
 <p data-options="region:&#39;east&#39;,title:&#39;东部区域&#39;" style="width:100px"></p>
 <p data-options="region:&#39;south&#39;,title:&#39;南部区域&#39;" style="height:100px"></p>
 </body>
</html>

以上は皆さんのためにまとめたもので、今後皆さんのお役に立てれば幸いです。

関連記事:

vue2.0 コンポーネントで値の受け渡しと通信を実装する方法

webpack 4.0.0-beta.0 バージョンの新機能 (詳細なチュートリアル)

SpringMVC を使用して vue クロスを解決する-ドメインリクエスト

VueコンポーネントとRouteのライフサイクル(詳細なチュートリアル)

Vue2.0でのユーザー権限制御の実装

vue.jsによるWeChat支払いの実装

以上がEasyUIでのabsの使い方を詳しく説明するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：vue-cli での webpack3 速度の最適化に関連する問題次の記事：vue-cli での webpack3 速度の最適化に関連する問題

関連記事

続きを見る