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 1

 

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

EasyUI 2

解压后的压缩包

EasyUI 3

二、EasyUI入门

建一个demo

导入easyUI的所要的物

EasyUI 4

乍创建一个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',
               width: 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="width: 500px;height: 300px;">
         Hello World!
    </div>
     <div id="dd2">Dialog Content</div>
    <div id="dd3">Dialog Content</div>
 </body>
</html>

运转结果截图:

EasyUI 5

除却用者的javascript的艺术去挑选时控件的id,还好一直叫该控件的class属性为

class=”easyui-dialog”来一直针对该展开easyui的渲染

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