前の記事では、EasyUIを使用して、バックエンドページのフレームワークを構築しました。表示するにはここをクリックしてください。このセクションでは、主にEasyUIテクノロジーを使用して、バックエンドメニューを実装するだけです。最初に単純な関数を作成し、後でそれらを豊かにし続けます。
1.左メニューを実装します
最初にレンダリングを見てください：
「基本操作」と「その他の操作」をクリックして、メニューオプションを切り替えることができます。特定のオプションで、異なる接続をクリックすると、右側に表示されます。最初に左側のメニューを作りましょう。
左側にメニューには、「カテゴリ管理」と「製品管理」という2つの主要な内容があります。前のセクションでは、背景ページのフレームワークをaindex.jspに構築する必要があるため、これら2つのハイパーリンクを作成して、aindex.jspの対応するdivに配置する必要があることがわかっています。そのため、最初にWebrootフォルダーに新しいTemp.jspファイルを一時的な開発ファイルとして作成します。これは、JSPをここに書くことで直接測定できるためです。効果が利用可能になったら、Aindex.jspの対応する場所にコンテンツをコピーします。
Temp.jspページは次のとおりです。
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <！doctype HTML public " - // w3c // dtd html 4.01 transitional // en"幅：200px; /*border：1px solid red;*/} #menu ul {list-style：none;パディング：0px;マージン：0px; } #menu ul li {border-bottom：1px solid #fff; } #menu ul li a { /*aタグを最初にブロックレベルの要素に変換して、幅と内側の間隔を設定します* / display：block;バックグラウンドカラー：＃00A6AC;色：#fff;パディング：5px;テキスト装置：なし; } #menu ul li A：hover {background-color：＃008792; } </style> </head> <body> <div id = "menue"> <ul> <li> <a href = "＃">カテゴリ管理</a> <li> <a href = "＃">製品管理</a> </ul> </div> </body> </html>temp.jspには2つのリンクのみがあり、Liでカプセル化され、divに配置されています。上記のCSSは、これら2つのリンクのスタイルを設定し、Tomcatを有効にし、次のように効果をテストします。
これら2つのハイパーリンクを作成した後、カプセル化された2つのハイパーリンクのULを、aindex.jspの左側のメニューコンテンツの表示位置にコピーし、次のように簡単に変更します。
CSS部分は、aindex.jspのヘッドタグに直接移動できます。 hrefではなくタイトル属性を含む上記のタグを見てください。新しいページにジャンプしていないため、EasyUIはこのページであるため、右側のタブにクリックされたディスプレイを配置するので、最初にタイトル属性にジャンプアクションを書き、後で変更します。次に、カテゴリ管理をクリックして、右側のタブ内の特定のカテゴリの関数をポップアップします。
2。右にタブタブを実装します
左メニューバーをクリックして[右]タブをポップアップする機能を実現するには、JSコードを追加する必要があります。 EasyUIを使用するというアイデアは次のとおりです。最初にハイパーリンクをクリックしてハイパーリンクの名前を取得します。これは、ポップアップタブのタイトルは「カテゴリ管理」などのハイパーリンクの名前と同じでなければならないためです。次に、名前の変更タブが既に存在するかどうかを判断し、存在する場合は表示し、存在しない場合は作成し、表示するコンテンツを表示します。 JSパーツのコードを見てみましょう。
<script type = "text/javascript"> $（function（）{$（ "a [title]"）。click（function（）{var text = $（this）.text（）; var href = $（this）.attr（ "title"）; // Judgen $（ "＃tt"）。tabs（ "select"、text）; URLアドレスですが、それはボディパートのみです。 </script>このJSコードを分析しましょう。まず、Aタグを取得します。これは、上記の「カテゴリ管理」ハイパーリンクであるタイトル属性を備えたタグであり、クリックするとクリックすることに注意してください。この機能は何をしますか？まず、現在のリンクの名前、つまりテキストを取得し、タイトル属性を介してURLを取得します（タイトル属性にURLを書いただけです）。次に、この名前にオプション（タブ）があるかどうかを判断します。ある場合、その名前のオプションが表示され、noがある場合はそれを作成します。
IFの声明を見てみましょう。まず、「#TT」を使用して右側のjQueryオブジェクトを取得し、次にタブ構造方法を呼び出してタブオブジェクトを取得します。ある場合、それはtrueを返し、それ以外の場合はfalseを返します。では、タブ（）の2つのパラメーターはどういう意味ですか？まず、最初のパラメーターはメソッド名で、2番目のパラメーターは最初のパラメーター（メソッド）の対応するパラメーターです。タブ（「存在」、テキスト）とは、easyUIの存在方法を呼び出すことを意味します。パラメーターはテキストです。つまり、名前テキストのタブが存在するかどうかを決定します。同様に、次のタブ（ "select"、テキスト）は、表示する名前のテキストを使用してタブを選択することを意味します。タブ（ "add"、{}）は新しいタブの作成を意味し、新しく追加されたタブの一部のプロパティが{}に追加されます：閉じていることを意味します。その後、ページのコンテンツは<iframe>タグでパッケージ化されます。このページには直接アクセスできず、アクションを通じてリダイレクトされます。アクションの名前から、Web-inf/category/query.jspページに導入されていることがわかります。ページのボディタグに何気なく何かを書いてから、左側のメニューバーをクリックすると、コンテンツが右のタブに表示されます。次のように：
最後に、aindex.jspにコードをここに配置します。
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <！doctype HTML public " - // w3c // dtd html 4.01 transitional // en"幅：60px; /*border：1px solid red;*/} #menu ul {list-style：none;パディング：0px;マージン：0px; } #menu ul li {border-bottom：1px solid #fff; } #menu ul li a { /*aタグを最初にブロックレベルの要素に変換して、幅と内側の間隔を設定します* / display：block;バックグラウンドカラー：＃00A6AC;色：#fff;パディング：5px;テキスト装置：なし; } #menu ul li A：hover {background-color：＃008792; } </style> <script type = "text/javascript"> $（function（）{$（ "a [title]"）。click（function（）{var text = $（this）.text（）; var href = $（this）.attr（ "title"）; $（ "＃tt"）。tabs（ "select"、text）;しかし、それはボディパートのみです//href:'send_category_query.action '}}）; }）; </script> </head> <body> <div data-options： 'north'、title： 'welcome to yigou backend management'、split：true "style =" height： "height：100px;"> </div> <div dat-options = "" west '、title：' system operation '、split：true "> < data-options = "iconcls： 'icon-save'"> <ul> <li> <a href = "＃">カテゴリ管理</a> <li> <a href = "＃"> div> <div data-options = "iconcls： 'icon-reload'"> <ul> <ul> <ul> <ul> <ul> <ul> <ul> <ul> <li> <a href = "＃">製品管理</a> </ul> </div> </div> </div> <div data-options = "region： 'center'、title： 'backend操作ページ'" style = "padding：1px;将来表示されます（現在のオペレーティングシステムのタイプ、現在のプロジェクトのドメイン名、ハードウェア関連の構成またはディスプレイレポート</div> </div> </div> </body> </html>明らかに、コードは抽出されておらず、CSSとJSは同じJSPページに混合されています。それは問題ではありません、それは後で一緒に抽出されます。
これまでに、EasyUIメニューの実装を完了しています。ここでは、実装方法のみを完了しており、特定のニーズに応じて特定の表示コンテンツが改善されます。
ソースコードのダウンロードプロジェクト全体のアドレス：//www.vevb.com/article/86099.htm
元のアドレス：http：//blog.csdn.net/eson_15/article/details/51297705
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。