档案

Archive for the ‘jQuery’ Category

jQuery UI 小Demo — 学生选课系统

2009年03月6日 7 条评论

学习jQueryUI也有一个多月了，也写了好几篇文章了，总体学习效果还算不错，所以这几天也利用UI做了一个小小的Demo，整合了ssh，DWR，jQuery，顺便复习了一下ssh，这不错啊！做了好几天了，使用Ajax开发的工作量变大了很多，所以还是没有做完整，还有一些功能没有实现，只是简单的实现了一些crud操作。

　　　　　　　　　　　　　　　Snap1Snap2　　　　　　　　

　　学生管理主界面                                                                              课程管理主界面

Snap5 　　　　　　　　　　　　　　　　　　　　　　　　添加新学生界面

Snap6 　　　　　　　　　　　　　　　　　　　　　点击学生名字弹出课程操作

此还不完善，希望大家有时间可以完善它，主要需要完成的功能有学生课程信息的操作。enjoy it！

感想：这个demo整合dwr和jQuery这两个ajax框架，在使用过程中感觉DWR用在发起Ajax请求，jQuery用在回调操作中这样用起来相对会灵活一下。Dwr的优点在于可以直接调用Java的方法，所以可以直接调用事务方法；jQuery可以快速选择dom节点，所以用在回调函数中比较合适。

最后还要感谢Frank的指导。改准备毕业设计了，当然还会选择一个技术继续加强学习。

分类：jQuery

jQuery UI 学习(四) — Draggable的使用

2009年02月25日 留下评论

一、概述

通过前面几节学习，大家应该都知道了，一个div对象是可以通过拖拉来改变大小，也可以通过拖动来改变其位置的。如何改变大小已经讲解过了，那么怎么实现拖动改变位置呢？现在就开始讲解如何实现拖动 — Draggable。

二、实现三步曲

1、添加css样式文件和js源文件 

   1: <link rel="stylesheet" href="js/themes/flora/flora.all.css"
   2:     type="text/css" media="screen" title="Flora (Default)" />
   3: <style>
   4: .block {
   5:     border: 2px solid #0090DF;
   6:     background-color: #68BFEF;
   7:     width: 150px;
   8:     height: 70px;
   9:     margin: 10px;
  10: }
  11: #contain {
  12:     border: 2px solid #0090DF;
  13:     background-color: red;
  14:     width: 500px;
  15:     height: 140px;
  16:     margin: 10px;
  17: }
  18: </style>
  19: <script type="text/javascript" src="js/jquery.js"></script>
  20: <script type="text/javascript" src="js/ui/ui.core.js"></script>
  21: <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
  22: <script type="text/javascript" src="js/ui/ui.draggable.js"></script>

2、定义一个<div></div> 

   1: <div id="contain"></div>

3、编写js代码，调用draggable() 

   1: $("#contain").draggable();

三、详解 

   1: <script type="text/javascript">
   2: $(document).ready(function(){
   3:     $(".block").draggable({
   4:         //helper: "clone",         //拖动时克隆,默认是 original
   5:         //axis:"x",                //定义拖动方向
   6:         containment:"#contain",    //定义一个容器,div就只能在容器的范围内活动了
   7:         cursor: "move",            //定义拖动时鼠标指针的状态 ，参数类型详见css中cursor配置
   8:         cursorAt:{top:10},         //定义拖动的时候鼠标指针的位置,此位置是相对被拖动对象的边框，单位px
   9:         opacity: 0.40,             //设置对象被拖动时的透明度
  10:         handle: "div",             //设置拖动控制器，也就是说当鼠标按住控制器的时候，才能拖动对象
  11:         scroll:false,              //设置当拖动超出整个浏览器窗口,是否滚动浏览器
  12:         distance: 20,              //设置当鼠标拖动多少像素时对象才会移动
  13:         //delay: 1000,             //设置延迟时间 单位毫秒
  14:         grid:[50,50],              //设置每次拖动的步进 单位px
  15:         dragPrevention:['input', 'textarea', 'button', 'select', 'option'],//设置被拖动的div碰到那些dom元素时停止
  16:         start:function(e,ui){},    //开始拖动执行的函数
  17:         drag:function(e,ui){},     //拖动时执行的函数
  18:         stop:function(e,ui){}      //拖动停止执行的函数
  19:     }).resizable();
  20:  
  21:     $("#contain").draggable({
  22:             revert: true,          //设置对象被拖动释放后时候回到原始位置 
  23:             helper: "clone"
  24:     });
  25: });
  26:  </script>
  27:  
  28: <title>jQuery UI -- Draggable</title>
  29: </head>
  30: <body>
  31: <div id="contain">
  32: <div class="block">
  33: <div class="hendle" style="background: green">handle</div>
  34: </div>
  35: </div>

四、应用场景

当你要拖动一个对象的时候，都可以拖动。常见的有布局改变需要拖动，像很多博客进入编辑状态，那些模块都是可以拖动，这就是应用之一。

本节示例代码：http://cid-ada1fb08e190ebf4.skydrive.live.com/embedgrid.aspx/jQueryUI/UI|_Draggable.zip

分类：jQuery

jQuery UI 学习(三) — resizable的使用

2009年02月20日 1条评论

在dialog的学习中，大家可能体会到了resizable的作用了，就是可以通过鼠标的拖拉改变对象的“型号”，也就是size。只不过这种size仅仅是二维的，以后或许能够支持3D的，这是有可能的。

resizable小常识：一个对象可以缩放，自然就能够具有向不同的方向进行缩放了。也就能向八个方向进行缩放。那么它是怎样缩放的呢？当然是通过我们的鼠标去触发动作事件了。所以鼠标通过拖动进行缩放的那个点就是handle。resizable对象最多可以设置八个方向的handle，也就是"n, e, s, w, ne, se, sw, nw"，对应就是北，东，南……,感觉改成上下左右更好理解一点……

那么如何构建一个具有resizable功能的对象呢？下面让我们一起见证resizable发生的时刻！

第一，加入相应的js库文件以及css样式文件： 

   1: <link rel="stylesheet" href="js/themes/flora/flora.all.css"
   2:     type="text/css" media="screen" title="Flora (Default)"/>
   3: <script type="text/javascript" src="js/jquery.js"></script>
   4: <script type="text/javascript" src="js/ui/ui.core.js"></script>
   5: <!--resizable.js很显然就是resizable的核心文件-->
   6: <script type="text/javascript" src="js/ui/ui.resizable.js"></script>
   7: <script type="text/javascript" src="js/ui/ui.draggable.js"></script>

第二，在html加入div： 

   1: <div id='example' class="resizable">
   2: <div style='position: absolute; top: 20px; left: 20px; bottom: 20px; right: 20px;'>Resize me</div>
   3: </div>

第三，添加JavaScript代码，实现resizable： 

   1: $(document).ready(function(){
   2:       $("#example").resizable();
   3: });

很简单三个步骤就可以实现对具有resizable属性的对象了。当然resizable还有很多属性可以设置的，达到实现不同的效果。请看下面的代码： 

   1: $("#example").resizable({
   2:         handles:"all",            //定义可变化大小的方向,可选值"n, e, s, w, ne, se, sw, nw","all"代表全部
   3:         //helper:"proxy",
   4:         aspectRatio: true,        //是否同步向x,y变化大小，也就是按照原有的比例缩放 默认是false
   5:         autoHide: true,          //是否自动隐藏变化控制器
   6:         transparent: false,
   7:         grid: [10, 10],            //定义x,y轴两个方向的变化步进,单位px
   8:         animate: true,           //定义延迟是否变化大小
   9:         animateDuration: "slow", //变化速度
  10:         animateEasing: "swing",
  11:         ghost: true,             //是否显示变化影子,利用此属性可以较为精确定位 (估计这比较难理解，尝试改变属性值就清楚了)
  12:         start:function(e,ui){$(this).append("Start!");},  //定义开始变化大小时执行的函数
  13:         resize:function(e,ui){},                          //定义在变化大小时执行的函数
  14:         stop:function(e,ui){$(this).append("Stop!");}    //与start相反
  15:         //draggable() 是使一个对象具有拖动的功能
  16:     }).draggable();

resizable不仅可以操作一个div节点，还可以对一个img元素以及<textarea/>.对于img我们就通过拖拉改变img的大小了。<textarea/>就类似一个公告栏了。这里讲到的就是resizable的应用了。呵呵！

先看如何通过resizable来改变img的大小：1.定义一个<img/> 2.调用resizable 

   1: <div id="example2" class="resizable">
   2: <img id="image" src="image/resizable.jpg"/>
   3: </div>
   4: －－我是分隔符哦！！以上是html代码，以下是JavaScript代码－－－－－－－－－－
   5: $(document).ready(function(){
   6:   //变化图片的大小,也可以直接使用$("#image").resizable();
   7:   $("#example2").resizable({
   8:       handles: "all",
   9:       resize:function(e,ui){
  10:           $("#image").width(ui.size.width); 
  11:           $("#image").height(ui.size.height); 
  12:       }
  13:   }).draggable();
  14:   $("#image").width($("#example2").width()); 
  15:   $("#image").height($("#example2").height());
  16: });

<textarea/>的demo就留给读者自己完成了。

OK，resizable就是这样的了，不知道大家是否自己尝试了没有？

To Be continue……

PS:有些属性没有具体讲解，只是贴出代码，因为有些是用语言难以表达的，大家可以尝试改变属性值来认识他们的作用。

本节示例代码：http://cid-ada1fb08e190ebf4.skydrive.live.com/embedrow.aspx/jQueryUI/UI|_Resizables.rar

分类：jQuery

学习jQuery UI的体会

2009年02月14日 5 条评论

jQueryUI还正在学,现在只发布了两篇文章,感觉效果不是很好!为什么回复那么少呢?似乎只有frank在关注.可能其他同学更关注一个系统的后台吧!我呢希望能够前后兼修.呵呵…….

在学习过程总是有那么一些对于这门技术的认识和体会.或许对接下来的学习会有很大的帮助,所以还是找个时间总结记录一下.学习要善于总结的吗!

首先是对于jQueryUI总体框架的一个认识.UI总共可以分成三个部分,包含交互组件(Interaction),Widget组件以及显示效果(Effects).

Interaction

Draggable          可拖动的

 

Droppable          可落下的

 

Resizable            可改变的大小的

 

Selectable           可选择的table

 

Sortable              可排序的table

Widget

Accordion           折叠

 

Datepicker          日期选择器

 

Dialog                对话框

 

Slider                 滑动器

 

Tabs                  标签

Effects

Easing

 

General

 

Show/Hide

以上多个UI组件是可以嵌套使用的,有些默认就已经嵌套好了.比如dialog就已经默认使用Draggable和resizable的,只需要设置相关属性.有些则需要我们显示调用.比如$("#divid").draggable().resizable();这样就实现了一个div同时具有可拖动和可改变size的功能了,这也是得益于jQuery的链式调用了.细心的同学就可以发现,其实要实现每个UI所调用的函数名称是和UI组件名称是相似的,这样我们也可以很容易的记住UI中有那些组件可以调用.

在html中定义要做UI显示的对象的div时,必须要有特定的class属性,因为只有定义了正确的class属性,才能够正确的显示漂亮的UI组件,否则显示出来的就是一块没有CSS样式的UI了.(这样的UI很难看).大家可以想想为什么需要特定的class属性的?当然这是和jQuery的css定义文件是有关系的.在jQuery中定义的css样式都是通过类来作为选择器,从而定义对应dom元素的css样式的.

再次是对UI组件的剖析.由于自己也只是接触jQueryUI的时间不是很长.如有不真确之处还望指正.

每个UI组件都很一些属性需要去设置.而这些属性都是有已经定义好的了默认值,所有我们调用UI组件的时候不设置属性值也是可以的.大家都知道我们使用UI最主要还是为了能够结合使用Ajax.一个系统是不可能不使用后台程序和数据的,.UI+Ajax才是我们的主要目的.这也是大多数js框架所具有的共同特点.

每一个UI组件我们都可以看做类似Java中的一个类,当我们要使用这个某个UI的使用只需要调用对应"构造函数";比如$("#dialog").dialog();这里的diglog()就是dialog组件的构造器,这不是无参的构造器,而是所有的参数都有默认值.当然啦既然是一个类,就可能存在方法咯.例如draggable组件就有三个方法,分别是start(),drag(),stop();对应的执行状态是开始拖动的时候执行,拖动期间执行,拖动停止的时候执行.最重要的是每个方法都是两个参数,分别是e和ui.这是两个jQuery对象,e对应UI组件的事件定义,ui对应UI组件的一些属性和组成.不同的UI组件e和ui有不同的属性.具体有什么属性我们可以查看源码,或者通过Firebug调试就可以看的更清楚了(推荐).

所以我们可以使用UI组件自身的方法+$.ajax()+callback实现异步调用了.

希望这片文章对学习jQuery的同学都有一定的启发和帮助.

分类：jQuery

jQuery UI学习(二)–对话框dialog的使用

2009年02月6日 留下评论

刚刚看了几篇关于jQueryUI1.6的文章(本系列教程使用的是1.5)，1.6版本的UI更靓了，同时还增加了一些UI组件，比如进度条，同时对datepicker做了一些改动，不过现在还没有正式发布新版本，估计快了！

上一篇helloword的入门的确发的挺快的，自然也写了不是很好。经过frank的指点，经过几番的沉淀和对语句进行重构，希望此篇文章能够有所改善！

我们经常会遇到关于dialog的应用场景，比如点击一个文章的标题，弹出一个dialog，对文章进行预览；点击登录的时候弹出一个登录的表单；对商品进行搜索的时候，点击搜索结果的分类，弹出对应分类的商品（当当网就是这样用的！），还有很多很多应用场景。

那么这么一个对话框是怎么生成的呢?那是很简单的case。

首先，我们需要在html中定义一个作为dialog显示的div； 

   1: <div>
   2: <!-- 定义一个button，点击显示dialog -->
   3: <input type="button" value="我要登录" id="show"  />
   4: </div>
   5: <!-- 作为dialog的div --> 
   6: <div id="dialog" class="flora"></div>
   7: <!--这边为什么要定义class=”flora”呢？class是指定dialog的css,因为在jqueryUI的css样式都是使用class来作为选择器-->

然后，在html中引入必要的js和css文件；如下

   1: <link rel="stylesheet" href="js/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
   2: <script type="text/javascript" src="js/jquery.js"></script>
   1:  


   2: <script type="text/javascript" src="js/ui/ui.core.js">


   1: </script>


   2: <script type="text/javascript" src="js/ui/ui.dialog.js">


   1: </script>


   2: <!-- ui.resizable.js 可以通过拖动改变dialog的大小，对于一个dialog不是必须的  -->


   3: <script type="text/javascript" src="js/ui/ui.resizable.js">


   1: </script>


   2: <!-- ui.draggable.js 支持拖动dialog的位置，也不是必须的 -->


   3: <script type="text/javascript" src="js/ui/ui.draggable.js">


</script>

接着，我们需要编写js代码，利用jquery的selector选中要作为dialog的div，并显示出来。代码如下

   1: <script type="text/javascript" >
   2: $(document).ready(function(){
   3:     $("#show").click(function(){//选中button,并监听click事件
   4:         //点击button，选中div并作为dialog显示，只需要调用dialog()
   5:             $("#dialog").dialog();
   6:     });
   7:   });
   8: </script>

至此,我们的dialog就显示出来了!你成功了吗?

在jQueryUI中每个组件都有一些属性可以配置，如果我们没有配置则都是使用jquery已经定义好的属性值。dialog的详细配置如下：

   1: $("#dialog").dialog({
   2:             title:"我要登录",    //这是dialog的标题，也可以在对应div的title属性中设置
   3:             position:"center", //设置dialog的显示位置，默认是center
   4:             width:200,         //设置dialog的宽度，默认是300px
   5:             height:250,        //这是dialog的高度，默认是200px
   6:             //在dialog添加button，所有的button元素是一个keyvalue键值对
   7:             //key是button的value值；value是对应buttonµ的click事件函数
   8:             buttons:{
   9:             "content":function(){
  10:                 //隐藏登录表单
  11:                 $("#content").toggle();
  12:             },
  13:             "Close":function(){
  14:                 $("#dialog").dialog("close");//关闭dialog
  15:             }}
  16: });

OK，现在所有使用dialog的知识点都已经讲解完毕了。最后请大家做一个实例，要求如下：

1.点击一个button，显示登录表单；2.提交表单以后将表单信息显示在页面上（当然也可以做的真实一点，利用ajax向数据库发送登录验证请求）；本节代码 http://cid-ada1fb08e190ebf4.skydrive.live.com/embedgrid.aspx/jQueryUI/dialog.zip

补充:dialog还有一个比较好用的属性是overla。overlay是这支出dialog以外的区域是否要覆盖，overlay有两个属性参数需要设置：opacity设置覆盖区域的透明度；background设置覆盖的背景颜色。另外使用overlay的时候需要设置dialog的属性model为true。代码如下： 

   1: modal: true,
   2: overlay: { opacity: 0.5, background: "black" },
 

To be continue……..

分类：jQuery

jQuery UI学习(一)–入门HelloWorld

2009年02月3日 2 条评论

春节放假一直没有写程序，只是看了一点《Spring in action》，所以多少有点生疏了！再加上心情不好，第一天的八皇后成了“扒皇后”！

今天接受Frank的建议，也可以说是挑战，开始“研究”jQuery UI（以下简称UI）。幸好UI比我想象中还简单那么一点点。今天就带大家学习一下UI版的helloWorld,以及简单说一下UI中的dialog！

jQuery是一个较为简单的，容易上手的Javascript框架，应用广泛，并有完整API文档和相当多的技术书籍。较为不错的有《jQuery in action》，有中文版啦。jQuery的核心是selector。利用它的selector我们可以快速的获取html中的dom节点，并对该节点进行增强就可以利用jquery扩展的方法对节点进行操作。jquery UI是基于jQuery，但是拥有自己独立的核心，jQuery UI操作继承了jQuery简单上手的优良传统，并且效果并不会差到哪里去。相对其他UI表现比较强悍的js框架，比如ExtJs，jquery还是有许多的优点：体积小，自然速度就飞快。用过Ext的就知道经常有一段不短的等待时间。

首先，先到官网下载UI代码包，解压后有目录四个：demos，tests，UI和themes，前面是例子和测试代码，核心是UI和themes；

themes里面主要是使用UI的时候需要的css文件，主要文件是flora.all.css。当我们使用UI的时候需要加入。当然也可以自己写（疯子做的事情）！

加入css的代码:

<link rel="stylesheet" href="../js/themes/flora/flora.all.css" type="text/css" media="screen" 
title="Flora (Default)">

接下来就是最最主要的UI目录了，打开一看差点朦了，幸好我们那些js文件能够见名知意，一看就知道大概是干什么用的！

i18n一看就知道是用来国际化的，本系列“教程”不涉及！

jquery.ui.all.js   ———  包括所有UI组件，所以块头也是最大的。当我们使用UI的时候，加入这个文件就OK了。但是文件大自然效率也就会受到影响了。

ui.core.js —-  UI的核心文件，如果我们不使用jquery.ui.all.js 的时候就必须加上这个文件，否则后果自负。

ui.dialog.js  —  一看就知道和dialog有关系。

关于源文件分析就先到这边，其他有使用到的时候再解释！

开始HelloWorld的demo，好激动啊！

新建web工程，将themes和UI目录放进项目中;

代码如下：

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui/ui.core.js"></script>
<script type="text/javascript" src="js/ui/ui.dialog.js"></script>
<!-- ui.resizable.js 支持改变dialog的大小 -->
<script type="text/javascript" src="js/ui/ui.resizable.js"></script>
<!--  ui.draggable.js 支持拖动dialog的位置  -->
<script type="text/javascript" src="js/ui/ui.draggable.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
	$("#show").click(function(){
	   $("#content").show();      //显示id为content的div，实际上作为dialog中的内容
    	   $("#dialog").dialog();     //将id为dialog的div作为dialog并且显示
	});
  });
</script>
<title>jQuery UI HelloWorld</title>
</head>
<body>
<div>
<input type="button" value="显示dialog" id="show"/>
</div>
<!-- dialog 是定义一个要用来作为dialog的div，title是dialog的标题 -->
<div id="dialog" class="flora" title="I am a Dialog">
<div id="content" style="display: none">
HelloWorld</div>
</div>
</body>
</html>
 

至此一个简单的dialog实例就结束了！至于UI的dialog组件还有一些设置参数，下次再详解！To be continue！

分类：jQuery