この記事では、jQuery EasyUI Layout の tabs タグの実装例に関する関連情報を中心に紹介しますので、必要な方は参考にしていただければ幸いです。
タブ ラベルを実装する jQuery EasyUI レイアウトの例
1. 概要:
1. jquery.js と easyUi 関連ファイルを導入します
2 効果は次のとおりです。
2. レイアウトのホーム ページを作成します:
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML > <html> <head> <title>SSHE DEMO</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jslib/jquery-easyui-1.3.1/jquery.easyui.min.js"></script> <script type="text/javascript" src="jslib/jquery-easyui-1.3.1/locale/easyui-lang-zh_CN.js"></script> <link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/default/easyui.css" rel="external nofollow" type="text/css"></link> <link rel="stylesheet" href="jslib/jquery-easyui-1.3.1/themes/icon.css" rel="external nofollow" type="text/css"></link> <script type="text/javascript" src="jslib/syUtil.js"></script> </head> <body class="easyui-layout"> <p data-options="region:'north'" style="height: 60px;"></p> <p data-options="region:'south'" style="height: 20px;"></p> <p data-options="region:'west'" style="width: 200px;"> <jsp:include page="layout/west.jsp"></jsp:include> </p> <p data-options="region:'east',title:'east',split:true" style="width: 200px;"></p> <p data-options="region:'center',title:'欢迎使用SSHE示例系统'" style="overflow: hidden;"> <jsp:include page="layout/center.jsp"></jsp:include> </p> <jsp:include page="user/login.jsp"></jsp:include> <jsp:include page="user/reg.jsp"></jsp:include> </body> </html>
3. 中央のページを作成します:
<%@ page language="java" pageEncoding="UTF-8"%> <script type="text/javascript"> function addTab(opts) { var t = $('#layout_center_tabs'); if (t.tabs('exists', opts.title)) { t.tabs('select', opts.title); } else { t.tabs('add', opts); } } </script> <p id="layout_center_tabs" class="easyui-tabs" data-options="fit:true,border:false" style="overflow: hidden;"> <p title="首页"></p> </p>
4. メニュー ページ:west.jsp
りぃ
関連推奨事項;
タブを実装するための div+css のサンプル コード tag_html/css_WEB-ITnose
jQuery EasyUI API 中国語ドキュメント - タブ ラベル ページ/tab_jquery
タブを動的に追加および削除する JavaScript メソッド tags_JavaScript スキル
以上がeasyUIの詳細説明 タブラベルのレイアウト実装例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。