easyUI研究ノート

1.参照JSファイル

    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui / jquery.min.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui / jquery.easyui.min.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui /ロケール/ easyui-LANG-zh_CN.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = "index.js" > </ スクリプト>  <！ - カスタムJS - >

コードの表示

2.リファレンスCSSファイル

< リンクのrel = "スタイルシート"   のhref = "jqueryの-easyui /テーマ/デフォルト/ easyui.css" > 
    < リンクのrel = "スタイルシート"   のhref = "jqueryの-easyui /テーマ/ icon.css" >

コードの表示

3.最初のデモ

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
    < タイトル> easyui学习</ タイトル> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui / jquery.min.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの」SRC = jqueryの-easyui / jquery.easyui.min.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui /ロケール/ easyui-LANG-zh_CNに。 スクリプト> 
    < リンクのrel = "スタイルシート"   のhref = "jqueryの-easyui /テーマ/デフォルト/ easyui.css" > 
    < リンクのrel = "スタイルシート"   のhref = "jqueryの-easyui /テーマ/ icon.css" > 
</ ヘッド> 
< 身体> 
< divのクラス= "easyui-ダイアログ" スタイル= "幅：500pxなど;高さ：500pxなど、" データ・オプション= "タイトル： '标题'、折りたたみ可能：真、iconCls： 'アイコン-OK'" > 
内容部分< / DIV > 

</ ボディ> 
</ HTML >

コードの表示

4.jsコールダイアログ

   < 本部ID = "ボックス" タイトル= "タイトル" スタイル= "幅：500pxなど;高さ：500pxなど" > 
        コンテンツ部分
  </ DIV >

コードの表示

$（関数（）{ 
    $（ '#box' ）.dialog（）; 
}）

コードの表示

5.ドラッグ可能

$（関数（）{ 

         $（ '＃ボックス'）（ドラッグ）;。

}）

コードの表示

6.ドラッグ＆ドロップドロップ可

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
    < タイトル> easyui学习</ タイトル> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui / jquery.min.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの」SRC = jqueryの-easyui / jquery.easyui.min.js >  </ スクリプト> 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = jqueryの-easyui /ロケール/ easyui-LANG-zh_CNに。 スクリプト> 

    < スクリプトタイプ= "テキスト/ javascriptの" SRC = "index.js" > </ スクリプト>   <！ - 自定义JS - > 

    < リンクのrel = "スタイルシート"   のhref = "jqueryの-easyui /テーマ/デフォルト/easyui.css " > 
    < リンクのrel = "スタイルシート"   のhref = "jqueryの-easyui /テーマ/ icon.css" > 
</ ヘッド> 
< 身体> 
< div要素のid = "DD"   スタイル="幅：600PX;高さ： 600PX;背景色：赤;」  > </ DIV >

  < DIV ID = "ボックス" タイトル= "标题" スタイル= "幅：500pxなど;高さ：500pxなど;背景色：緑;" > 
        < スパンID = "スパン" >内容部分</ スパン> 
  </ divの> 

<！ -     <のdivのid = "ボックス"タイトル= "标题"スタイル= "幅：500pxなど;高さ：500pxなど"> 
        内容部分
  < / DIV> - > 
</ DIV > 
        
</ ボディ> 
</ HTML >

コードの表示

$（関数（）{ 
$（ "#dd" ）.droppable（{ 
受け入れる： '#box' 、
onDragEnter：機能（例えば、ソース）{ 
  $（この）の.css（ "背景色"、 '青' ） ; 
}、
onDragLeave：機能（例えば、ソース）{ 
  $（この）の.css（ "背景色"、 '赤' ）; 
} 
}）; 

    $（ '#box' ）.draggable（）; 
}）

コードの表示

おすすめ