zoukankan      html  css  js  c++  java
  • 1. EasyUI 学习总结(一)——对话框dialog

    文章参考来源:http://www.cnblogs.com/xdp-gacl/p/4075079.html 

    感谢博主的分享,写得非常精细,我在这边给看过的做一个记录。

    一、EasyUI下载

    使用easyui开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。

    EasyUI官方 http://www.jeasyui.com
    EasyUI论坛 http://bbs.btboys.com

      EasyUI官方下载地址:http://www.jeasyui.com/download/index.php,目前最新的版本是:jQuery EasyUI 1.5

    解压后的压缩包

    二、EasyUI入门

    建一个demo

    导入easyUI的所需的东西

    新创建一个01.jsp页面,在01.jsp页面中使用EasyUI,代码:

    <%@ page language="java" pageEncoding="UTF-8"%>
    <!DOCTYPE HTML>
    <html>
         <head>
             <title>EasyUI入门——创建EasyUI的Dialog</title>
     <!-- 引入JQuery -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.min.js"></script>
    <!-- 引入EasyUI -->
     <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js"></script>
    <!-- 引入EasyUI的中文国际化js,让EasyUI支持中文 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
    <!-- 引入EasyUI的样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/default/easyui.css" type="text/css"/>
    <!-- 引入EasyUI的图标样式文件-->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/icon.css" type="text/css"/>
    <script type="text/javascript">
         $(function(){
              //console.info($('#dd2'));
              /*使用JavaScript动态创建EasyUI的Dialog的步骤:
              1、定义一个div,并给div指定一个id
              2、使用Jquery选择器选中该div,然后调用dialog()方法就可以创建EasyUI的Dialog
              */
                  $('#dd2').dialog();//使用默认的参数创建EasyUI的Dialog
               //使用自定义参数创建EasyUI的Dialog
               $('#dd3').dialog({
                   title: '使用JavaScript创建的Dialog',
                    400,
                   height: 200,
                   closed: false,
                   cache: false,
                   modal: true
               });
           });
      </script>
       
      </head>
      
       <body>
           <%--使用纯html的方式创建创建EasyUI的Dialog的步骤:
           1、定义一个div
           2、将div的class样式属性设置成easyui-dialog,这样就可以将普通的div变成EasyUI的Dialog了
            --%>
         <div class="easyui-dialog" id="dd1" title="EasyUI Dialog" style=" 500px;height: 300px;">
             Hello World!
        </div>
         <div id="dd2">Dialog Content</div>
        <div id="dd3">Dialog Content</div>
     </body>
    </html>

    运行结果截图:

    除了用上面的javascript的方式去选择当前控件的id,还可以直接让该控件的class属性为

    class="easyui-dialog"来直接对其进行easyui的渲染

    打开火狐的Firebugs的html可以对当前的id查看当前的id元素是div还是span,还可以查看引用的文件是否有引用进来。

  • 相关阅读:
    【华为云技术分享】使用keil5打开GD32F450i的MDK项目出现的问题以及J-Link无法烧录程序对应的解决方案
    【华为云技术分享】不为人知的稠密特征加入CTR预估模型的方法
    205. 判断两个字符串的模式是否相同 Isomorphic Strings
    541. 反转字符串2 Reverse String II
    插入排序,二分查找插入排序,使用二叉树的插入排序
    二分查找,求mid值的类型溢出问题
    二叉搜索树类的C#实现
    二叉搜索树,删除节点
    二叉搜索树的前驱节点和后继节点
    438. 匹配字符串(顺序不同但个数相同的字符串) Find All Anagrams in a String
  • 原文地址:https://www.cnblogs.com/chenxiaomeng/p/5804004.html
Copyright © 2011-2022 走看看