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,还可以查看引用的文件是否有引用进来。

  • 相关阅读:
    【刷题】BZOJ 4059 [Cerc2012]Non-boring sequences
    【刷题】BZOJ 3745 [Coci2015]Norma
    【刷题】BZOJ 2734 [HNOI2012]集合选数
    【刷题】BZOJ 2287 【POJ Challenge】消失之物
    【刷题】BZOJ 2151 种树
    【刷题】BZOJ 2134 单选错位
    【刷题】BZOJ 1924 [Sdoi2010]所驼门王的宝藏
    【刷题】BZOJ 1823 [JSOI2010]满汉全席
    【刷题】BZOJ 1124 [POI2008]枪战Maf
    编程之美 ---> 1.2中国象棋将帅问题
  • 原文地址:https://www.cnblogs.com/chenxiaomeng/p/5804004.html
Copyright © 2011-2022 走看看