EasyUI学习

1.什么是EasyUI
   EasyUI是一套富客户端的前台框架，所谓的富客户端是指相对于传统静态、朴素的页面而言，有着丰富的组件来展示页面上的元素，如table，tree，form等；
   
   EasyUI是基于Jquery的(Jquery是基于javascript的)，Jquery目前在很多网站中使用，也是很多人学习前台框架的首选。
   
2.为什么要前台框架
   先来看看我们平时在使用页面时的操作，有时会点击一个按钮来搜索过去的订单，跳转到另一个页面中，在表单中填写基本信息......
   
   所有的这些在页面上的操作，试图来找一个最抽象的词汇来表征web的本质（web由前台和后台组成的）：事件、请求、响应。
   事件就是你单击某个按钮，或者点击一个超链接等等；
   请求就是你操作后，得由后台来处理，如查看最近一个的订单，就要发送这个请求；
   响应就是后台处理后，将处理的结果呈现到页面上。
   
   前台框架是用户与后台交互的界面，它的主要功能有哪些呢？
   1）获取你操作元素的属性，进而改变它（如根据你登录用户权限的不同，展示的文字也不一样）；
   2）传递事件，如你单击一个按钮，它其实是不断在监控你所有的操作，把你的操作记录下来，调用相应的函数来处理；
   3）接收从后台返回的结果，能够自动地调用后台逻辑，和接收后台处理的结果。
   
   说白了，前台框架就是封闭对页面元素的操作、传递事件、接收数据的功能。
   
3.如何来学
  这个还得逆向来考虑，学起来才会得心应手，框架的东西，不外乎三点：功能、结构、实现。这也决定的学习深浅的不同层次，功能就是应用它，结构就是了解它，实现就是看它的源代码，看它如何来实现的。
  
  言归正传，说说如何来学，上面说到EasyUI是基于Jquery,Jquery也是一个前台框架，它也有前台框架的功能，从功能反向就是我们要学习的内容。
  
  1）如何获取页面的元素
     元素都有一个标识符，一般有:id，class，这两个经常用到，它俩的区别是id是唯一的，class是集合的，可以有两个元素有相同的一个class。
引用id的操作只影响这个唯一的元素，而引用class的操作是影响所有相同class的元素。
 
jquery的语法是:$("#id")来表示引用id的元素。
 
获取了这个元素之后，就可以改变它，如获取input的内容就是$("#id").val()就是获取一个id元素的内容，你也可以改变它，如$("#id").val(newvalue).
还有其它的操作，如改变它的大小，位置，内容等等，具体的看一下Jquery的语法，关键你要知道如何去学。
 
  2）事件处理
     大部分我们的操作都是点击等操作，如何来处理这些事件呢？
你点击还是要基于元素的，如上面的按钮，你还得获取这个按钮，就上面第一点所讲的内容。
扯一点计算机的话题，计算机是按照人的思维来做的，它必须先要加载代码，所以在处理事件之前，你得告诉它有哪些事件要处理，写好事件处理的函数。
因而，它得先绑定事件，Jquery就知道了有一个事件将来要处理，所以它一直在监听着。
如处理一个按钮单击的事件，它是这样的：
$("#buttonid").bind("click",function(){
     事件处理逻辑；
});
 
  3）接收数据
     目前页面接收数据就是ajax的方式（异步传输，同步必须等待，异步和中断相似，有数据就接收，没有cpu可以做其它的事，不必一直在等着数据来）。
Ajax是异步传输，在实际的开发中，应用比较常见。看看它在jquery中如何来使用ajax。
     首先要明白几点：我的请求要发送到哪里去(url），请求携带的数据是什么（data），请求的方式是什么(get还是post），响应返回的数据类型是什么(json还是xml），响应成功的函数是什么（success），响应失败的函数是什么(fail)。


      弄清楚以上几点就好了。首先加载jquery库文件的位置，然后写好事件响应代码和$.ajax({});


   
   
   
    Hello Struts


   <!--加载jquery的库文件--&gt
   
   
 
 
 

Struts2+jquery+ajax+json的例子

 

  请输入学号：
 
 

 



  按照上面的思维和方法来学习，可以很快的入门，主要还是传递一种方法思维（从功能逆向来学习）。   
  
4.说说EasyUI
  它使用的格式也有固定的模式。
  1）获取组件对象，如dialog，$("#id").dailog();
  2) 组件里面有属性和方法，还这些组成了一个对象，用{}来表示；
  3）属性和方法都是采用key-value加“：”的形式来写的，如width:200px; 
     上同的$.ajax（）也是一个组件对象，里面有属性和方法，
 type：'post'，这个就是属性，告诉传递的方式是post的方法
 success:function(data)，表示如果成功接收数据，就调用这个方法，返回的数据是data。
  4）调用组件对象方法，一般习惯先定义这个组件对象，如var dialogdemo=$("#id").dailog({
           属性，
  方法//这个方法是框架内部调用的，如上面的success
      });
 dailogdemo(“方法名”,"参数列表"）。//这里的方法一般是修改属性的，与上面框架内部调用的方法还是有不同的。
  
   

来自 “ ITPUB博客 ” ，链接：http://blog.itpub.net/30024515/viewspace-1384022/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/30024515/viewspace-1384022/