小型バックオフィスシステムのUIフレームワーク--EasyUI

その他 2019-10-13 23:17:21 訪問数: null

    背景の開発者は、フロントエンドのUIインターフェイスが得意ではない、と小さなソフトウェア会社は、開発者は、既存のコンポーネント、完全なユーザーインターフェイスを再利用し、オープンソースのUIフレームワークを使用することができ、フルタイムのアーティストを投稿しないでください。EasyUIは、jQueryのUIプラグインのコレクションに基づいており、開発者は簡単にWebページを構築することができます。

    公式住所：http://www.jeasyui.com/

、引用EasyUI

        公式サイトはEasyUIコンポーネントjqueryの-easyui-1。*。*。郵便番号、プロジェクトのインポートロケールフォルダ、テーマフォルダ、jquery.easyui.min.js、jquery.min.jsファイルをダウンロードします。

第二に、システムのホーム・ページのユーザーは、例えば、EasyUIを使用します

     1）ユーザのログインシステム、ホーム・インタフェース

                                   

       2）home.jspをコーディングデザイン

<％@ページ言語= "javaの"インポート= pageEncodingはは= "UTF-8" ％ "java.utilの*。"> 
<DOCTYPE用HTML PUBLIC " - // W3C // DTD XHTML 1.0過渡// EN"「のhttp！ //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> 
<HTMLのxmlns =" http://www.w3.org/1999/xhtml "> 
    <HEAD> 
    <META HTTP-当量= "Content-Typeの"コンテンツ= "text / htmlの;のcharset = UTF-8" /> 
    <タイトル>管理系统</ TITLE>     
    <リンクのrel = "スタイルシート"のhref = "プラグイン/ easyui /テーマ/ icon.css" / > 
    <リンクのrel = "スタイルシート"のhref = "プラグイン/ easyui /テーマ/デフォルト/ easyui.css" /> 
    <リンクのrel = "スタイルシート"のhref = "CSS / home.css" /> 
    <スクリプトタイプ= "テキスト/ javascriptの" SRC = "プラグイン/ easyui / jquery.min.js"> </ SCRIPT> 
    ます。<script type = "text / javascriptの" SRC = "プラグイン/ easyui / jquery.easyui.min.js" > </ SCRIPT>スクリプトタイプ= "テキスト/ javascriptの" SRC = "プラグイン/ easyui / jquery.min.js"> </ SCRIPT> 
    ます。<script type = "text / javascriptの" SRC = "プラグイン/ easyui /ロケール/ easyui-LANG-zh_CNに。 JS "> </ SCRIPT> 
        ます。<script type = "text / javascriptの" SRC = "JS / pathurl.js"> </スクリプト> 
    ます。<script type = "text / javascriptの" SRC = "JS / home.js？V = 1.01"> </ SCRIPT> 
    ます。<script type = "text / javascriptの" SRC = "JS / head.js"> </スクリプト> 
    </ HEAD> 
    <！ - $ {userNameに} - > 
<身体クラス= "easyuiレイアウト"スタイル= "オーバーフロー-Y：隠された"スクロール= "いいえ"> 
  <入力されたID = "logUser"タイプ= "隠し"値= "$ {userNameに}" /> 
  <入力されたID = "userNotice"タイプ= "隠れた"値= "$ {userNotice}"/> 
<divの地域= "北"スプリット= "true"の国境= "false"のスタイル= "オーバーフロー：隠された;高さ：35px; 
        背景：のURL（画像/ header.jpg）＃1 7f99be繰り返し-Xセンター50％;
        行の高さ：30px;色：#FFF。フォントファミリ：MS Pゴシック、宋体「>  
        <スパンのスタイル=」パディング左：5pxの; フォントサイズ：18px; 「>管理系统</ span>の
        <スパンのスタイル=」フロート：右; パディング右：20ピクセル; フォントサイズ：18px; "クラス= "ヘッド"> 
        は、<a href = "javascriptの：無効（0）" ID = "menub"クラス= "easyui-メニューボタン"      
        データオプション="メニュー： '＃1 USERFUNC'、iconCls ： 'アイコン-usermgrに' "> $ {userNameに} </a>の   
        </ span>を
        </ div> 
    <divの地域="南"スプリット= "true"のスタイル="高さ：30px; 背景：＃1 D2E0F2。"> 
      <DIV CLASS ="フッタ">著作権©2010-2017スタート、すべての権利を保有。</ div> 
    </ div> 
<divの地域="西」隠す= "true"を スプリット= "true" のタイトル= "导航菜单" スタイル= "幅：180ピクセル;" 
  ID = "西"> <div要素のid = "menunav"クラス= "easyui-アコーディオン"フィット= "true"の国境= "偽"> 
    <！ -导航内容- >
    
  </ DIV> 
<DIV ID = "mainPanle"領域= "中心"スタイル= "背景：#eee;オーバーフローY：隠された"> 
      <DIV ID = "タブ"クラス= "easyui-タブ"フィット= "true"に国境= "偽"> 
    <divのタイトル= "首页"スタイル= "パディング：20ピクセル;オーバーフロー：隠された;色：青;"> 
          <H1スタイル= "フォントサイズ：20ピクセル;" = "センター"を合わせる>欢迎使用管理系统</ H1> 
        </ div> 
  </ div> 
    </ div> 

<！ -修改密码窗口- > 
<= "easyui-ウィンドウ"のdivのid = "W"クラスタイトル= "修改密码"折りたためる= "false"を最小化可能= "false"を
        最大化= "false"のアイコン= "アイコン-保存"スタイル=」幅：300ピクセル; 高さ：150ピクセル; パディング：5pxの; 
        背景：#fafafa; "> 
      <divのクラスには、=" easyuiレイアウト」フィット= ""真>
    <DIV地域= "センター"国境= "false"のスタイル= "パディング：10pxの;背景：#FFF;国境：1pxの固体#CCC;"> 
        </ div> 
       <テーブルCELLPADDING = 3>
        <TR> 
              <TD>旧密码</ TD> 
              <TD> <入力されたID = "txtOldPass"タイプ= "パスワード"クラス= "easyui-テキストボックス" /> </ TD> 
        </ TR> 
        <TR> 
              <TD >新密码</ TD> 
              <TD> <入力されたID = "txtNewPass"タイプ= "パスワード"クラス= "easyui-テキストボックス" /> </ TD> 
        </ TR> 
        <TR> 
              <TD>确认密码< / TD> 
              <TD> <入力されたID = "txtRePass"タイプ= "パスワード"クラス= "easyui-テキストボックス" /> </ TD> 
        </ TR> 
      </ TABLE>
    <DIV地域= "南"国境= "false"のスタイル= "テキスト整列：右;高さ：30px;行の高さ：30px;"> <ID = "btnEp"クラス= "easyui-LinkBut​​tonコントロール"アイコン=」ボイド（0）：アイコン-OK "のhref = "javascriptの：アイコンキャンセル"HREF =" javascriptを無効（0）">确定</a>の<ID = "btnCancel"クラス= "easyui-のLinkBut​​ton"=アイコン" ">取消</a>の</ DIV> 
  </ DIV> 
</ DIV> 
<DIV ID =" MM "クラス= "easyuiメニュー"スタイル= "幅：150ピクセル;"> 
      の<divのid =" MM-tabupdate ">刷新</ DIV> 
      <DIV CLASS ="メニュー月"> </ div> 
      <DIV ID =" MM-tabclose ">关闭</ DIV> 
      <DIV ID ="MM-tabcloseall ">すべて閉じる</ DIV> 
      <DIV = ID" MM-tabcloseother ">すべて閉じ除く</ div> 
      <divのクラス=" 9月-MENUオン"> </ div> 
      <divのID =" MM-tabcloseright ">現在のページのすべての権利</ div>閉じる
      <DIV ID =" MM-tabcloseleft「>を閉じる現在のページのすべての左</ div>
      <DIV CLASS = "メニュー9月"> </ div> 
      <divのID = "mmの出口">退出</ DIV> 
    </ DIV> 
<DIV ID = "USERFUNC"スタイル= "幅：150ピクセル;">    
    < DIV ID = "editpass"データ・オプション= "iconCls： 'アイコン編集'">修改密码</ div>    
    <divのID = "LOGINOUT"データ・オプション= "iconCls： 'アイコンストップ'">注销</ DIV>     
</ DIV>    
</ BODY> 
</ HTML>

 　　3）easyUI部品によれば、機能メニューのUIを書きます

$（関数（）{ 
			InitLeftMenu（）; 
			tabClos​​e（）; 
			tabClos​​eEven（）; 
		}）; 

//初始化左侧菜单
機能InitLeftMenu（）{ 

	$（ "＃のmenunav"）アコーディオン（{。
				アニメーション：偽
			}）; 

	$アヤックス（{ 
		URL： "ユーザー/ getusermenu.do"、
		種類： "POST"、
		データ型： "JSON"、
		成功：機能（データ）{ 
			はconsole.log（ "菜单数据：" + JSON.stringify（データ） ）; 
			$ .each（data.menus、関数（I、N）{ 
						VARのメニューリスト= ''; 
						メニューリスト+ = '<UL>'; 
						$ .each（n.menus、関数（J、O）{ 
									メニューリスト+ = '<LI>の<div> <REF = "' 
											+ O。
						VAR menuID属性= $（この）.ATTR（ "参照"）。
						addTab（tabTitle、URL）;




						。$（ 'easyui-アコーディオンのliのdiv'）removeClass（ "選択"）; 
						$（この）.parent（）addClass（ "選択"）。
					}）ホバー（関数（）{ 
						$（この）.parent（）addClass（ "ホバー"）; 
					}、関数（）{ 
						$（この）.parent（）removeClass（ "ホバー"）; 
					}）; 
			//选中第一个
			。VARパネル= $（ '＃のmenunav'）アコーディオン（ 'パネル'）; 
			VARさt =パネル[0] .panel（ 'オプション'）の表題。
			$（ '＃のmenunav'）アコーディオン（ '選択'、t）とします。; 
		} 
	}）。
} 

//添加选项卡
関数addTab（サブタイトル、URL）{ 
	するif（！$（ '＃タブ'）。タブ（ '存在'、字幕））{ 
		$（ '＃タブ'）。タブ（ '追加'、
			}）; 
	}他{ 
		$（ '＃タブ'）、タブ（ 'SELECT'、SUBTITLE）;. 
		$（ '＃Tabupdate-MM'）をクリックします（）; 
	} 
	tabclose（）; 
} 

メニューが開いているときに、//は、クリックを作成します。フレーム
関数createFrame（URL）{ 
	VARのS = '<インラインフレームスクロール= "オート" FRAMEBORDER = "0" SRC =「' + URL 
			+ ' "スタイル= "幅：100％;高さ：100％;"> </インラインフレーム>「; 
	Sを返す; 
} 

タブのクローズ// 
関数tabclose（）{ 
	/ *ダブルオフタブタブ* / 
	。$ DBLCLICK（関数（）{（ "インナータブ"）
				するvar字幕= $（this）を。子供（ "閉鎖可能-タブ。"）、テキスト（）;. 
				$（ '＃タブ'）、タブ（ '閉じる'、SUBTITLE）。
			}）
	/ *バインド右* /タブとして 
							左：e.pageX、 
	$（ "タブインナー" ）。バインド（ 'コンテキストメニュー'、関数（E）{
				$（ '＃MM'）メニュー（ '表示'、{。
							上部：e.pageY 
						}）。

				VaRのサブタイトル= $（この）.children（ "タブを閉鎖可能な。"）、テキスト（）; 

				。$（ '＃MM'）のデータ（ "currtab"、サブタイトル）。
				$（ '＃タブ'）、タブ（ '選択'、サブタイトル）。
				falseを返します。
			}）; 
} 
//绑定右键菜单事件
機能tabClos​​eEven（）{ 
	//刷新
	$（ '＃MM-tabupdate'）をクリック（関数（）{ 
				VAR currTab = $（ '＃タブ'）タブ（） 'getSelected'。
				VAR URL = $（currTab.panel（ 'オプション'）コンテンツ。）.ATTR（ 'SRC'）; 
				$（ '＃タブ'）、タブ（ '更新'、{。
							タブ：currTab、
							オプション：{ 
								コンテンツ：
				currtab_title $ = VAR（ '＃1ミリメートル'）のデータ（ "currtab"）;. 
				$（ '＃タブ'）、タブ（ '閉じる'、currtab_title）; 
			}）
	//全て閉じる
	$（ '＃のMM-tabcloseall' ） .click（関数（）{ 
				$（ 'インナースパンタブ'）それぞれ（関数（I、N-）{ 
							VAR = $ T（N）は.text（）; 
							。$（ '＃タブ'）タブ（」近隣'T）; 
						}）; 
			}）; 
	// TABのより現在の他の閉じ
	$（' ＃1 tabcloseother-MM '）をクリックして（関数（）{ 
				＃1 tabcloseright-MM'）をクリック（）$を（」。 ; 
				$（ '＃1 tabcloseleft-MM'）をクリック（）;. 
			}）; 
	// TAB用の現在の右閉じ
	$を（ '＃1 tabcloseright-MM'）をクリックして（関数（）{ 
				nextAll VAR = $（「タブ。 。-selected「）nextAll（）;  （）;
				IF（nextall.length == 0）{
					$。messager.alert（ 'プロンプトが表示'、 'オフ'、 'エラー'）; 
					falseに戻ります。
				} 
				nextall.each（関数（I、N）{ 
							VARのT = $（ '：当量（0）スパン'、N $（））のテキスト（）; 
							$（ '＃タブ'）タブ（ '近いです'。 、T）; 
						}）; 
				falseを返します。
			}）; 
	//关闭当前左侧的TABの
	。$（ '＃MM-tabcloseleft'）をクリックします（関数（）{ 
				VAR prevall = $（）prevAll（） 'のタブを選択した。';。
				もし（prevall.length == 0） { 
					; falseを返す
				} 
				prevall.each（関数（I、N）{ 
							'：当量（0）スパン'、N $（））のテキスト（）; VAR T = $を（
							$（ '＃タブ'）タブ。 （ 'クローズ'、t）は; 
						}）; 
				falseを返します; 
			}）; 

	//退出 
	$（ "＃ミリメートル出口"）。（（クリック機能）{
				$（ '＃MM'）のメニュー（ '隠します'）。
			}）
}

　　4）オブジェクトデータフォーマットメニューJSON

{ "メニュー"：[{ "アイコン"：ヌル、 "menuID属性"： "A"、 "MENUNAME"： "机构管理"、 "メニュー"：[{ "menuID属性"： "A1"、 "MENUNAME"： "部门机构 " "PARENTID"： "A"、 "メニューURL"： "DEPT / index.do"、 "のSerialNo"：ヌル、 "アイコン"：NULL}]}、{ "アイコン"： "アイコンの概要"、" menuID属性 "：" H」、 "MENUNAME"： "系统管理"、 "メニュー"：[{ "menuID属性"： "H1"、 "MENUNAME"： "用户管理"、 "PARENTID"： "H"、 "メニューURL" "システム/ユーザ/ index.do"、 "のSerialNo"：ヌル、 "アイコン"： "アイコンの概要"}、{ "menuID属性"： "H2"、 "MENUNAME"： "角色管理"、 "PARENTID"： "H"、 "メニューURL"： "システム/ロール/インデックス。" "菜单管理PARENTID "：ヌル、 "アイコン"： "アイコンの概要"}、{ "menuID属性"： "H3"、 "MENUNAME""「、" のSerialNoを行う"： "H"、 "メニューURL"： "システム/メニュー/ index.do"、 "のSerialNo"：ヌル、 "アイコン"： "アイコンの概要"}、{ "menuID属性"： "H4"、 "MENUNAME"： "岗位成员"、 "PARENTID"：」 H " "メニューURL"： "システム/ rolemember / index.do"、 "のSerialNo"：ヌル、 "アイコン"：NULL}、{ "menuID属性"： "H5"、 "MENUNAME"： "系统日志"、" PARENTID "：" H」、 "メニューURL"： "システム/ログ/ index.do"、 "のSerialNo"：ヌル、 "アイコン"： "アイコンの概要"}、{ "menuID属性"： "H6"、 "MENUNAME"： "数据字典"、 "PARENTID"：」H」、 "メニューURL"： "システム/ PARAM / index.do"、 "のSerialNo"：ヌル、 "アイコン"： "アイコンの概要"}]}]}
コードの表示

 三、APIマニュアル

 1）公式サイトのコンポーネント（英語）住所：http://www.jeasyui.com/documentation/index.php#

 2）jQueryのEasyUI APIドキュメントの公式中国語版、ダウンロードアドレス：のhttp：//download.csdn.net/album/detail/343

     

おすすめ

転載: www.cnblogs.com/walkwithmonth/p/11667901.html
おすすめ
Face Wall Intelligence が Eurux-8x22B オープンソース大型モデルをリリース - 「科学のチャンピオン」と呼ぶにふさわしいモデル
Kaiyuan Daily | Google は、Hongmeng のオープンソース Android 携帯電話を Docker がサポート、オープンプラットフォームを閉鎖。
ランキング
Swiper を使用する際の落とし穴、どの落とし穴に陥りましたか?
データ構造基盤のリンクリスト（1）
Vue3 は Excel のアップロードと JSON データへの解析を実装し、自動ダウンロード用の JSON ファイルを生成します。
LG4721 [テンプレート]パーティションFFT
C ++のコンストラクタとデストラクタの実行順序
c3新特性多列
ライブラリのリソース
Unityエディタの拡張機能? PropertyDrawerとは何ですか? カスタムスクリプト変数のプロット?
2つのノード間のパスを見つけるのNeo4j
Linuxのnginxのを使用してCDNサーバの設定を行います
アーカイブ
もっと
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)

コードワールド

© 2018 codetd.com