English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

jQueryプラグインeasyUIを使用してJSでDialogを表示する方法

以下の例では、jQueryプラグインeasyUIを使用してJSでDialogを表示する方法について分析しました。皆様に参考としてご提供します。以下の通りです:

<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <title></title>
  <script src="jquery-easyui-1.3.4/jquery-1.8.0.min.js" type="text/javascript"></script>
  <script src="jquery-easyui-1.3.4/jquery.easyui.min.js" type="text/javascript"></script>
  <script src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  <link href="jquery-easyui-1.3.4/themes/icon.css" rel="stylesheet" type="text/css" />
  <link href="jquery-easyui-1.3.4/themes/default/easyui.css" rel="stylesheet" type="text/css" />
 <script type="text/javascript">
    $(function () {
      $("#myDialog").dialog({
        modal: true,
        collapsible: true,       //折り畳み可能に設定
        toolbar: [{             //ツールバー配列の設定
          text: '追加',
          iconCls: 'icon-add',}}
          handler: function () {
            $.messager.show({ showType: "fade", msg: "データを追加", title: "通知", timeout: 1000 });
          }
        }, {
          text: '保存',
          iconCls: 'icon-save',
          handler: function () {
            $.messager.show({ showType: "fade", msg: "データを保存", title: "通知", timeout: 1000 });
          }
        }],
        buttons: [{          //ボタン配列を設定します
          text: '提出',
          iconCls: 'icon-ok',
          handler: function () {
            $.messager.show({ showType: "fade", msg: "データを提出", title: "通知", timeout: 1000 });
          }
        }, {
          text: 'キャンセル',
          iconCls: 'icon-cancel',
          handler: function () {
          }
        }]
      });
    });
</script>

jQueryに関するさらに詳しい内容に興味を持つ読者は、以下の本サイトの特集をチェックしてください:《jQuery ウィンドウ操作の技術概要》、《jQuery ドラッグ効果と技術概要》、《jQuery 常用プラグインと使い方概要》、《jQuery Ajaxの使い方概要》、《jQuery テーブル(table)操作の技術概要》、《jQuery 拡張技術概要》、《jQuery 常見のクール効果概要》、《jQuery アニメーションと効果の使い方概要》および《jQuery セレクタの使い方概要》

本文の内容が皆様のjQueryプログラムデザインに役立つことを願っています。

声明:本文の内容はインターネットから取得され、著作権者は所有者であり、インターネットユーザーによって自発的に提供され、自己でアップロードされました。本サイトは所有権を持ちません。また、人工編集は行われていません。著作権侵害を疑われる内容が見つかった場合は、以下のメールアドレスまでご連絡ください:notice#oldtoolbag.com(メール送信時、#を@に変更して報告してください。関連する証拠を提供してください。一旦確認がとれましたら、本サイトは即座に侵害を疑われるコンテンツを削除します。)

基本教程
おすすめ