超级简单:用鼠标拖拽进行翻页

简介:

 在以前的一篇文章中涉及到自定义的分页:http://www.cnblogs.com/zhuqil/archive/2010/01/02/custompagingandlisting.html,今天在其中加入一个小功能:用你的鼠标拖拽进行分页:鼠标向右拖翻到后一页;鼠标向左拖,翻到前一页。

     首先下载最新版本的jQuery 和jGesture 插件。在以前的分页源程序中加入下面代码。

复制代码
js
       < script src = " Scripts/jquery-1.3.1.js "  type = " text/javascript " >< / script>
     < script src = " Scripts/jgesture-1.0.3.js "  type = " text/javascript " >< / script>
     < script type = " text/javascript " >
        $().ready(
function () {
            $().gesture(
function (gs) {
                
var  gestureName  =  gs.getName();
                
var  intPageIndex  =  document.getElementById( ' txtHidPageIndex ' ).value
                
if  (gestureName  ==   " right " ) {
                    doPaging(
++ intPageIndex);
                }
                
else   if  (gestureName  ==   " left " ) {
                    
if  (intPageIndex  >   1 )
                        doPaging(
-- intPageIndex);
                }
            });
        });
      
< / script>
复制代码

用gestureName进行判断,如果鼠标向右拖拽,intPageIndex++,如果鼠标向左拖拽,intPageIndex--。






本文转自麒麟博客园博客,原文链接:http://www.cnblogs.com/zhuqil/archive/2010/01/30/gesturePage.html,如需转载请自行联系原作者

相关文章
|
4月前
|
JavaScript
|
Java Android开发
两个按钮的滑块
牙叔教程 简单易懂
128 0
C#鼠标拖拽,移动图片实例
最近工作需要做一个鼠标可以拖拽移动图片的功能。写了几个基本功能,勉强能用。
408 0
C#鼠标拖拽,移动图片实例
鼠标拖拽翻页效果
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/w178191520/article/details/84192737 ...
974 0
移动端弹出遮罩层时防止底部页面滚动
版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/82696872 ...
1431 0
|
前端开发 API 资源调度
angualr实现鼠标拖拽排序功能
angualr2以上版本 我使用的是angualr6.x最新版 ng2-dragula https://github.com/valor-software/ng2-dragula 1.
1166 0
|
Android开发
动画必须有(二):悬浮菜单了解一下!
动画必须有(一): 属性动画浅谈githhub传送门 目录 前言 效果图 FloatingActionButton基础 FloatingActionButton实例 最后 前言 悬浮按钮是我非常喜欢的, 可以把最关键的功能放入到悬浮按钮中.
1034 0