BlogJava-Terry.Li-彬-文章分类-jquery

Ajax Session Timeout 超时处理

礼物 — Thu, 05 Dec 2013 08:11:00 GMT

/**
* Author : Larry Li
* Date : 2013-12-5
* Email : larry.li@aicent.com
*/
var Session = function() {
   var defaults = {
           title        : 'Session Notification',
           message      : 'Your session is about to expire.',
           keepAliveUrl : '/admin/session/keep-alive',
           redirUrl     : '/account/timed-out',
           logoutUrl    : '/account/logout',
           warnAfter    : 900000, // 15 minutes
           redirAfter   : 1200000 // 20 minutes
   };

   var o = defaults, dialogTimer, redirTimer;

   var controlRedirTimer = function(action) {
       switch(action) {
           case 'start':
               // Dialog has been shown, if no action taken during redir period, redirect
               redirTimer = setTimeout(function(){
                   window.location = o.redirUrl;
               }, o.redirAfter - o.warnAfter);
               break;

           case 'stop':
               clearTimeout(redirTimer);
               break;
           case 'restart':
               clearTimeout(redirTimer);
               redirTimer = setTimeout(function(){
                   window.location = o.redirUrl;
               }, o.redirAfter - o.warnAfter);
               break;
       }
   };

   var controlDialogTimer = function(action) {
       switch(action) {
           case 'start':
               dialogTimer = setTimeout(function(){
                   $('#sessionTimeout-dialog').modal('show');
                   controlRedirTimer('start');
               }, o.warnAfter);
               break;
           case 'stop':
               clearTimeout(dialogTimer);
               break;
           case 'restart':
               clearTimeout(dialogTimer);
               dialogTimer = setTimeout(function(){
                   $('#sessionTimeout-dialog').modal('show');
                   controlRedirTimer('restart');
               }, o.warnAfter);
               break;
       }
   };

   var doKeepAlive = function() {
       $.ajax({
           type: 'POST',
           url: o.keepAliveUrl,
           success: function() {
               // Stop redirect timer and restart warning timer
               controlRedirTimer('restart');
               controlDialogTimer('restart');
           }
       });
   };

   return {
       sessionTimeout: function(options) {
           if ( options ) { o = $.extend( defaults, options ); }

           var warning_dialog = '';

           $('body').append(warning_dialog);

           $('#sessionTimeout-dialog-logout').on('click', function () { window.location = o.logoutUrl; });

           $('#_close,#sessionTimeout-dialog-keepalive').click(function() {
               doKeepAlive();
           });
           // Begin warning period
           controlDialogTimer('start');
       },

       sessionTimeoutKeepAlive: function() {
           controlRedirTimer('restart');
           controlDialogTimer('restart');
       }
   };
}();

$(function() {
   Session.sessionTimeout({
       title: 'Session Timeout Notification',
       message: 'Your session is about to expire.',
       keepAliveUrl: contextPath + '/admin/session/keep-alive',
       redirUrl: contextPath + '/account/login',
       logoutUrl: contextPath + '/account/logout',
       warnAfter: 1500000,
       redirAfter: 1780000
   });

   $(document).ajaxComplete(function() {
       Session.sessionTimeoutKeepAlive();
   });
});

礼物 2013-12-05 16:11 发表评论

忘掉jQuery，使用JavaScript原生API

礼物 — Thu, 28 Nov 2013 01:31:00 GMT

摘要: jQuery目前已经成为最流行的JavaScript库，它可以让开发者“write less, do more（写得更少，做得更多）”，这也是它的核心理念。通过它，用户可以更方便地处理HTML documents、events，更轻松地实现动画效果、AJAX交互等。尽管jQuery帮助开发者节省了大量的工作，但是并不是所有的产品都适合使用jQuery。jQuery 2.0... 阅读全文

礼物 2013-11-28 09:31 发表评论

十个jQuery图片画廊插件推荐

礼物 — Thu, 30 Dec 2010 00:44:00 GMT

jQuery的画廊插件可以将分组图像和多媒体资料转成类似Flash的图像或照片。当幻灯片已经成为网站的重要组成部分，jQuery的重要性不能被忽视。下面为你介绍了10个最有美感，创新性和创造性的jQuery图片画廊插件：

1.How to Create a Simple Slideshow using Mootools / JQuery
当我们想要在有限的屏幕空间展示很多内容，这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。

查看演示

2.jbgallery 2.0
jbgallery，可实现超大图片全页展示功能，可自动播放，控制播放图片等，支持单图片、多图片、多图库、阴影、网站背景色以及对话模式等。jbgallery有两个基本菜单，一个类似音乐播放按钮和一个直接链接单图片播放按钮，同时提供公共API接口去除播放控制组件，以便扩展任意自定义播放控制按钮，jbgallery插件功能强大，而且使用简单。

查看演示

3.Minimalistic Slideshow Gallery with jQuery
是一个简单而漂亮，以幻灯片方式播放照片的相册控件。其做法是将所有缩略图放在一个导航网格中，用户可以利用这个网格查看，暂停/播放，浏览照片。网格会从播放容器上方弹出，让用户浏览整个相册的缩略图集。

查看演示

4. Galleria
Galleria是一个采用jQuery开发的图片展示插件。它通过缩略图导航一张一张的显示大的图片。支持通过CSS设置整个相册的风格。能够按比例创建缩略图并剪切成适合在缩略图容器中显示的小图片。能够触一些事件，因此可以在图片加载时执行一些动作。

查看演示

5. Galleriffic
Galleriffic是一个用于创建快速展示相册中照片的jQuery插件。图片既可以以幻灯片的方式查看，也可以手动点击缩略图查看。Galleriffic还支持分页，从而使得它能够展示更多的图片。

查看演示

6. Pikachoos
Pikachoose是一个基于jquery的轻量级相册插件,它允许用户自定义幻灯片,按钮,自动播放.

查看演示

7. Smooth Div Scroll
这是一个图片或内容水平滚动的jquery插件，滚动效果非常平滑、舒服

在线演示

8.FancyBox
基于jQuery开发的Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该Lightbox除了能够展示图片之外，还可以展示iframed内容，通过CSS自定义外观。

查看演示

9.Sliding Image Gallery jQuery Plug-in
在SlidingGallery插件会的图像组，变成他们的图像周期性画廊，用户可以通过点击广告。一个图像将被集中在屏幕上，有两个较小的图像关闭的边缘。用户可以单击任一较小的图像，使之向中心或中心图像放大。为获得最佳的使用，这个插件应该适用于7个或更多图片，但可以用更少的工作（图片会被复制，从而使总数达到7个）。

查看演示

10.slideViewerPro
slideViewerPro是一个完全可定制的jQuery Image Gallery插件。支持任意多的图片，可以设置是否自动展示图片，开关标题，开关拖拽，自定义向前-向后按纽，自定义幻灯播放动画。

查看演示

礼物 2010-12-30 08:44 发表评论

30款ajax特效，针对Lightbox和Modal Dialog

礼物 — Sat, 20 Nov 2010 04:12:00 GMT

摘要: Modal Dialog and Lightbox are Ajax solutions for displaying the content inside the browser without reloading the whole page. Lightboxes overcome the use of the pop up window to suit on the modern brow... 阅读全文

礼物 2010-11-20 12:12 发表评论

(转载)jQuery学习: 实现select multiple左右添加和删除功能

礼物 — Thu, 26 Feb 2009 01:14:00 GMT

本文来自：http://www.blogjava.net/absolutedo/archive/2009/02/20/255790.html

项目要实现这样的一个功能(如下图所示):选择左边下拉列表框中的选项,点击添加按钮,把选择的选项移动到右边的下拉列表框中,同样的选择右边的选项,点击删除按钮,即把选择的选项移动到左边的下拉列表框中.相信用js很多朋友都写过,下面是我用jQuery来实现这样的功能的.具体代码如下:

下拉列表

选择分包

jQuery代码:
/**
  *动态的给左边的下拉列表创建选项
*具体情况可以从数据库读取数据动态创建选项
*/
$(document).ready(function(){
        for(var i=1;i<=5;i++)
        {
               $("#fb_list").append("");
        }
})

$(function(){
     $("#add").click(function(){
              if($("#fb_list option:selected").length>0)
              {
                       $("#fb_list option:selected").each(function(){
                            $("#select_list").append("

$(function(){
             $("#delete").click(function(){
                      if($("#select_list option:selected").length>0)
                      {
                               $("#select_list option:selected").each(function(){
                                          $("#fb_list").append("

礼物 2009-02-26 09:14 发表评论

jquery技巧总结

礼物 — Mon, 02 Feb 2009 02:44:00 GMT

jquery技巧总结
一、简介

1.1、概述
随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS 框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
jQuery 是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的，它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery：prototype就像Java，而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架，它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。

它具有如下一些特点：
1、代码简练、语义易懂、学习快速、文档丰富。
2、jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
3、jQuery支持CSS1-CSS3,以及基本的xPath。
4、jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5、可以很容易的为jQuery扩展其他功能。
6、能将JS代码和HTML代码完全分离，便于代码和维护和修改。
7、插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。
jQuery适合于设计师、开发者以及那些还好者，同样适合用于商业开发，可以说jQuery适合任何JavaScript应用的地方，可用于不同的Web应用程序中。
官方站点：http://jquery.com/ 中文站点：http://jquery.org.cn/

1.2、目的
通过学习本文档，能够对jQuery有一个简单的认识了解，清楚JQuery与其他JS框架的不同，掌握jQuery的常用语法、使用技巧及注意事项。

二、使用方法
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如：
引入之后便可在页面的任意地方使用jQuery提供的语法。

三、学习教程及参考资料
请参照《jQuery中文API手册》和http://jquery.org.cn/visual/cn/index.xml
推荐两篇不错的jquery教程：《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
(说明：以上文档都放在了【附件】中)

四、语法总结和注意事项

1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get()[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html();
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;

3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get (n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个< div>元素的内容。有如下两种方法：
$("div").eq(2).html();              //调用jquery对象的方法
$("div").get(2).innerHTML;       //调用dom的方法属性

4、同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html();              //返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").text();              //返回id为msg的元素节点的文本内容。
$("#msg").text("new content");
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的new content

$("#msg").height();              //返回id为msg的元素的高度
$("#msg").height("300");       //将id为msg的元素的高度设为300
$("#msg").width();              //返回id为msg的元素的宽度
$("#msg").width("300");       //将id为msg的元素的宽度设为300

$("input").val(");       //返回表单输入框的value值
$("input").val("test");       //将表单输入框的value值设为test

$("#msg").click();       //触发id为msg的元素的单击事件
$("#msg").click(fn);       //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法

5、集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})
//为索引分别为0，1，2的p元素分别设定不同的字体颜色。

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
//实现表格的隔行换色效果

$("p").click(function(){.html())})
//为每个p元素增加了click事件，单击某个p元素则弹出其内容

6、扩展我们需要的功能
$.extend({
       min: function(a, b){return a < b?a:b; },
       max: function(a, b){return a > b?a:b; }
});       //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
+",min="+$.min(10,20));

7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。
例如：
$("p").click(function(){.html())})
.mouseover(function(){})
.each(function(i){this.style.color=['#f00','#0f0','#00f']});

8、操作元素的样式
主要包括以下几种方式：
$("#msg").css("background");              //返回元素的背景颜色
$("#msg").css("background","#ccc")       //设定元素背景为灰色
$("#msg").height(300); $("#msg").width("200");       //设定宽高
$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
$("#msg").addClass("select");       //为元素增加名称为select的class
$("#msg").removeClass("select");       //删除元素名称为select的class
$("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

9、完善的事件处理功能
Jquery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。
如：
$("#msg").click(function(){})       //为元素添加了单击事件
$("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})
//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
（1）hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。
$("tr").hover(function(){
$(this).addClass("over");
},
       function(){
       $(this).addClass("out");
});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){})
//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
       //每次点击时轮换添加和删除名为selected的class。
       $("p").toggle(function(){
              $(this).addClass("selected");
       },function(){
              $(this).removeClass("selected");
       });
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
       $("p").trigger("click");              //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。
例如：
$("p").bind("click", function(){.text());});       //为每个p元素添加单击事件
$("p").unbind();       //删除所有p元素上的所有事件
$("p").unbind("click")       //删除所有p元素上的单击事件

10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。

11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。
如
$.each( [0,1,2], function(i, n){ ; });
等价于：
var tempArr=[0,1,2];
for(var i=0;i        ;
}
也可以处理json数据，如
$.each( { name: "John", lang: "JS" }, function(i, n){ ; });
结果为：
Name:name, Value:John
Name:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
$.extend(settings, options);
//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结果保存在setting中。
var settings = $.extend({}, defaults, options);
//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });
tempArr内容为：[4,5,6]
var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });
tempArr内容为：[2,3]
$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。
如：$.merge( [0,1,2], [2,3,4] )       //返回[0,1,2,3,4]
$.trim(str)：删除字符串两端的空白字符。
如：$.trim(" hello, how are you?   ");        //返回"hello,how are you? "

12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$("#msg")改为jQuery("#msg")。
如：
jQuery.noConflict();
// 开始使用jQuery
jQuery("div   p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';

礼物 2009-02-02 10:44 发表评论

jquery中文指导:15天学会jquery

礼物 — Thu, 15 May 2008 09:38:00 GMT

摘要: ==== 15天学会jQuery (0-5) ==== *

15 Days of jQuery(Day 0)---JQuery - What, Why, When, Where, Who

... 阅读全文

礼物 2008-05-15 17:38 发表评论

BlogJava-Terry.Li-彬-文章分类-jquery

Ajax Session Timeout 超时 处理

'+ o.title +'

忘掉jQuery，使用JavaScript原生API

十个jQuery图片画廊插件推荐

30款ajax特效，针对Lightbox和Modal Dialog

(转载)jQuery学习: 实现select multiple左右添加和删除功能

jquery技巧总结

jquery中文指导:15天学会jquery

Ajax Session Timeout 超时处理