一 : jQuery中Datatables增加跳转到指定页功能
下面一段代码是关于datatable增加跳转到指定页功能，具体代码如下所示：
var mytable = $('#datatables'); mytable.dataTable( { "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "bProcessing": true, "bServerSide": true, "sAjaxSource": "/user/list", "aoColumns": [ { "mData": "Id" }, { "mData": "Username" }, {"mData":function(obj){ return obj.group; }}, {"mData":"yiyuan"}, {"mData":function(obj){ return obj.keshi; }}, {"mData":function(obj){ if(obj.Status==1){ return "使用中"; }else{ return "禁用"; } }}, {"mData": function(obj){ var del=""; if(isAdmin){ del='<a data-title="' + obj.Id + '" class="btn btn-danger"><i class="icon-wrench icon-white" ></i>删除</a>'; } return '<a data-title="' + obj.Id + '" class="btn btn-success" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><i class="icon-edit icon-white"></i>修改</a>' +' '+del; },bSortable : false} ], "fnDrawCallback": function(){ var oTable = $("#datatables").dataTable(); $('#redirect').keyup(function(e){ if($(this).val() && $(this).val()>0){ var redirectpage = $(this).val()-1; }else{ var redirectpage = 0; } oTable.fnPageChange( redirectpage ); }); } }); bootstrap插件形式： /* Set the defaults for DataTables initialisation */ $.extend( true, $.fn.dataTable.defaults, { "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>", "sPaginationType": "bootstrap", "oLanguage": { "sSearch": "快速搜索:", "bAutoWidth": true, "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "Nothing found - 没有记录", "sInfo": "_START_ 到 _END_ 条,共 _TOTAL_ 条", "sInfoEmpty": "显示0条记录", "sInfoFiltered": "(从 _MAX_ 条中过滤)", "sProcessing":"<div style=''><img src='../static/img/loader.gif'><span>加载中...</span></div>", "oPaginate": { "sPrevious": "", "sNext": "", "sLast": ">>", "sFirst": "<<" } } } ); /* Default class modification */ $.extend( $.fn.dataTableExt.oStdClasses, { "sWrapper": "dataTables_wrapper form-inline" } ); /* API method to get paging information */ $.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) { return { "iStart": oSettings._iDisplayStart, "iEnd": oSettings.fnDisplayEnd(), "iLength": oSettings._iDisplayLength, "iTotal": oSettings.fnRecordsTotal(), "iFilteredTotal": oSettings.fnRecordsDisplay(), "iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ), "iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength ) }; }; /* Bootstrap style pagination control */ $.extend( $.fn.dataTableExt.oPagination, { "bootstrap": { "fnInit": function( oSettings, nPaging, fnDraw ) { var oLang = oSettings.oLanguage.oPaginate; var fnClickHandler = function ( e ) { e.preventDefault(); if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) { fnDraw( oSettings ); } }; $(nPaging).addClass('pagination').append( '<ul>'+ '<li class="first disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+oLang.sFirst+'</a></li>'+ '<li class="prev disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >← '+oLang.sPrevious+'</a></li>'+ '<li class="next disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+oLang.sNext+' → </a></li>'+ '<li class="last disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+oLang.sLast+'</a></li>'+ '<input type="text" style="width: 30px;padding-top: 5px;padding-bottom: 5px;height: 18px;border-left: 0px;border-radius: 0px 4px 4px 0px;" id="redirect" class="redirect">'+ '</ul>' ); //datatables分页跳转 $(nPaging).find(".redirect").keyup(function(e){ var ipage = parseInt($(this).val()); var oPaging = oSettings.oInstance.fnPagingInfo(); if(isNaN(ipage) || ipage<1){ ipage = 1; }else if(ipage>oPaging.iTotalPages){ ipage=oPaging.iTotalPages; } $(this).val(ipage); ipage--; oSettings._iDisplayStart = ipage * oPaging.iLength; fnDraw( oSettings ); }); var els = $('a', nPaging); $(els[0]).bind( 'click.DT', { action: "first" }, fnClickHandler ); $(els[1]).bind( 'click.DT', { action: "previous" }, fnClickHandler ); $(els[2]).bind( 'click.DT', { action: "next" }, fnClickHandler ); $(els[3]).bind( 'click.DT', { action: "last" }, fnClickHandler ); }, "fnUpdate": function ( oSettings, fnDraw ) { var iListLength = 5; var oPaging = oSettings.oInstance.fnPagingInfo(); var an = oSettings.aanFeatures.p; var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2); if ( oPaging.iTotalPages < iListLength) { iStart = 1; iEnd = oPaging.iTotalPages; } else if ( oPaging.iPage <= iHalf ) { iStart = 1; iEnd = iListLength; } else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) { iStart = oPaging.iTotalPages - iListLength + 1; iEnd = oPaging.iTotalPages; } else { iStart = oPaging.iPage - iHalf + 1; iEnd = iStart + iListLength - 1; } for ( i=0, ien=an.length ; i<ien ; i++ ) { // Remove the middle elements ($('li:gt(1)', an[i]).filter(':not(:last)')).filter(':not(:last)').remove(); // Add the new list items and their event handlers for ( j=iStart ; j<=iEnd ; j++ ) { sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; $('<li '+sClass+'><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+j+'</a></li>') .insertBefore( $('.next', an[i])[0] ) .bind('click', function (e) { e.preventDefault(); oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength; fnDraw( oSettings ); } ); } // Add / remove disabled classes from the static elements if ( oPaging.iPage === 0 ) { $('li:lt(2)', an[i]).addClass('disabled'); } else { $('li:lt(2)', an[i]).removeClass('disabled'); } if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) { $('.next', an[i]).addClass('disabled'); $('li:last', an[i]).addClass('disabled'); } else { $('.next', an[i]).removeClass('disabled'); $('li:last', an[i]).removeClass('disabled'); } } } } } ); /* * TableTools Bootstrap compatibility * Required TableTools 2.1+ */ if ( $.fn.DataTable.TableTools ) { // Set the classes that TableTools uses to something suitable for Bootstrap $.extend( true, $.fn.DataTable.TableTools.classes, { "container": "DTTT btn-group", "buttons": { "normal": "btn", "disabled": "disabled" }, "collection": { "container": "DTTT_dropdown dropdown-menu", "buttons": { "normal": "", "disabled": "disabled" } }, "print": { "info": "DTTT_print_info modal" }, "select": { "row": "active" } } ); // Have the collection use a bootstrap compatible dropdown $.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, { "collection": { "container": "ul", "button": "li", "liner": "a" } } ); } 好了，下面看下jQuery datatable中加入双击跳转功能
$('#topicDg tbody').on('dblclick','tr',function(){ var self=$(this); var id=self.find('.td-id').text(); var name=self.find('.td-name').text(); creatIframe("/post/postList.do?id="+id+"&name="+name,"帖子管理"); }); ps:点击话题列表中的一行，跳转到帖子列表中。
二 : jQuery生成全页面的悬浮覆盖层效果（overlay）
可能在大家开发的过程中，往往需要自己生成一个全页面的覆盖层，以便让用户能够把注意力专注于开发者指定的某一个区域，在这里开发小技巧里，我们使用非常简单的代码生成类似的效果，如下：
在以上代码中，我们使用.css方法来生成需要的效果，这里我们添加一个id="overlay"的div层，并且设置透明度0.8，生成一个覆盖层效果。(www.61k.com]
注意这里我们的docHeight，使用如下代码获取：
是不是非常简单，当然大家可以自己将这段代码修改成一个简单的jQuery插件，可以在开发的项目中重用！
61阅读请您转载分享：
三 : php 页面三种跳转
方法一：使用PHP自带函数四 : flsh属性设置防止页面跳转：allowScriptAccess与allowNetworking
1,AllowScriptAccess
参数：
sameDomain：仅当SWF 文件和网页位于同一域中时才允许执行外出脚本访问。这是 AVM2 内容的默认值。
never：外出脚本访问将始终失败。
always：外出脚本访问将始终成功。
AllowScriptAccess 参数可以防止从一个域中承载的 SWF文件访问来自另一个域的 HTML页面中的脚本。
对从另一个域承载的所有 SWF 文件使用可以确保位于 HTML页面中的脚本的安全性。
getURL函数:
当allowScriptAccess为always或samedomain时，利用一个最简单的AS3 getURL 代码如下：http://sa3.org/file/code/geturl.as，编译出来的swf文件即可跳转到http://sa3.org Demo如下：http://sa3.org/file/swf/301.swf，只要确保发布后的flashallowScriptAccess参数为never即可成功防止页面跳转。
例：
package
{
//author ben<http://sa3.org>
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.net.navigateToURL;
public class geturl extends Sprite
{
public function geturl()
{
navigateToURL(new URLRequest("http://sa3.org"),"");
}
}
}
2,allowNetworking
参数：
"all"（默认值）―SWF 文件中允许使用所有网络API。
"internal"―SWF 文件可能不调用浏览器导航或浏览器交互API，但是它会调用任何其它网络API。
"none"―SWF 文件可能不调用浏览器导航或浏览器交互API，并且它无法使用任何SWF 到 SWF 通信 API。
可以控制 SWF文件对网络功能的访问。调用被禁止的 API会引发 SecurityError异常。
当 allowNetworking 设置为"internal" 时，以下API 被禁止：
navigateToURL()
fscommand()
ExternalInterface.call()
当 allowNetworking 设置为"none" 时，除了上面列出的那些API 外，还会禁止以下 API：
sendToURL()
FileReference.download()
FileReference.upload()
Loader.load()
LocalConnection.connect()
LocalConnection.send()
NetConnection.connect()
NetStream.play()
Security.loadPolicyFile()
SharedObject.getLocal()
SharedObject.getRemote()
Socket.connect()
3,allowFullScreen
参数：
启用全屏模式设置为"true"，否则设置为"false"（默认值）
仅当在响应鼠标事件或键盘事件时才会调用启动全屏模式的 ActionScript。如果在其它情况中调用，Flash Player 会引发异常。
在全屏模式下，用户无法在文本输入字段中输入文本。所有键盘输入和键盘相关的 ActionScript 在全屏模式下均会被禁用，但将应用程序返回标准模式的键盘快捷键（例如按Esc）除外。
当内容进入全屏模式时，程序会显示一条消息，指导用户如何退出和返回标准模式。该消息将显示几秒钟，然后淡出。
如果某个调用方与 Stage 所有者（主SWF 文件）没有位于同一安全沙箱，则调用Stage 对象的 displayState 属性会引发异常。
管理员可以通过在 mms.cfg 文件中设置FullScreenDisable = 1对浏览器中运行的 SWF文件禁用全屏模式。
在浏览器中，必须在 HTML 页面中包含SWF文件，才能进入全屏模式。
在独立的播放器或放映文件中始终允许全屏模式。
实例代码：
<objectclassid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0"width="100%" height="100%">
<param name="movie"value="falsh.swf" />
<param name="quality"value="high" />
<param name="AllowScriptAccess"value="sameDomain" />
<param name="allowNetworking"value="all" />
<param name="allowFullScreen"value="true" />
<embed src="falsh.swf"width="100%" height="100%" quality="high"pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"type="application/x-shockwave-flash" allownetworking="all"allowfullscreen="true"></embed>
</object>
五 : jQuery实现标签页效果实战（4）
今天我们来完成《jQuery实战》系列的标签页效果。先来看一看效果图
这里有两部分的内容，上面是一个标签页的效果，下面也是一个标签页的效果。在实际应用中也经常会见到标签页的效果，它的作用主要是在页面可视区有限的情况下展示更多的内容。当用户想看其他内容的时候不需要离开页面，只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容。门户网站的首页，有很多频道都是标签页的最佳案例，如体育、财经、军事等模块都是位于不同的标签上。上边的标签页一般称为滑动门技术，下面的内容是一次性加载进来，鼠标移动到某个标签之后，下面的内容就跟着显示对应的内容，不需要加载页面。而下面的标签页选用另一种写法，这是通过其他页面load进来的，当你滑动到某个标签的时候，加载对应的页面。
好了，开始编写我们的代码，首先是编写html页面”tab.jsp”。
<body> <ul id="tabfirst"> <li class="tabin">标签1</li> <li>标签2</li> <li>标签3</li> </ul> <div class="contentin contentfirst">我是内容1</div> <div class="contentfirst">我是内容2</div> <div class="contentfirst">我是内容3</div> </body>
一般标签我们都用ul和li来表示，每个li代表一个标签，里面有三个li,分别是标签1，标签2，标签3，下面内容区域是3个div,这三个div是预先装载进来的。这时候的基本骨架已经完成，接下来编写css代码。
第一步把ul里面的li改造为标签的效果。回忆上节的课程，li默认是纵向的效果，我们想把它变成横向用清楚li的特征，然后让其float漂移达到相应的效果。
$(document).ready(function() { $("#tabfirst li").mouseover(function() { //1.将原来深颜色的li去掉 $(".tabin").removeClass("tabin"); //2.将原来显示的div隐藏 $(".contentin").removeClass("contentin"); //3.计算鼠标点中哪一个li var chooseStr = $(this).html(); var index = 0; if("标签1" == chooseStr) { index = 0; } else if("标签2" == chooseStr) { index = 1; } else if("标签3" == chooseStr) { index = 2; } //4.将对应的div显示和对应的li加深 $("#tabfirst li:eq("+index+")").addClass("tabin"); $("div.contentfirst:eq("+index+")").addClass("contentin"); }); }); 这里的mouseover()函数的含义是当鼠标进入li时执行函数里面的代码。函数里面的代码先将原来深颜色的li去掉，然后将原来显示的div隐藏，计算鼠标点中哪一个li赋值在index变量中，最后对应的div显示和对应的li加深和将对应的div显示。
下面的标签页思路一样，真个完整的html页面如下:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="../css/tab.css" rel="external nofollow" /> <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../js/tab.js"></script> <title>jQuery实战:tab页签</title> </head> <body> <ul id="tabfirst"> <li class="tabin">标签1</li> <li>标签2</li> <li>标签3</li> </ul> <div class="contentin contentfirst">我是内容1</div> <div class="contentfirst">我是内容2</div> <div class="contentfirst">我是内容3</div> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">装入完整页面</li> <li>装入部分页面</li> <li>从远程获取数据</li> </ul> <div id="contentsecond"> <img alt="装载中" src="../image/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>
css文件如下:
ul,li { margin: 0; padding: 0; list-style: none; } #tabfirst li { float: left; background-color: #868686; color: white; padding: 5px; margin-right: 2px; border: 1px solid white; } #tabfirst li.tabin { background-color: #6E6E6E; border: 1px solid #6E6E6E; } div.contentfirst { clear: left; background-color: #6E6E6E; color: white; width: 300px; height: 100px; padding: 10px; display: none; } div.contentin { display: block; } #tabsecond li { float: left; background-color: white; color: blue; padding: 5px; margin-right: 2px; cursor: pointer; } #tabsecond li.tabin { background-color: #F2F6FB; border: 1px solid black; border-bottom: 0; z-index: 100; position: relative; } #contentsecond { width: 500px; height: 200px; padding: 10px; background-color: #F2F6FB; clear: left; border: 1px solid black; position: relative; top: -1px; } img { display: none; } jQuery代码如下:
/** * tab页面模块的js代码 */ $(document).ready(function() { $("#tabfirst li").each(function(index){ //每一个包装li的jquery对象都会执行function中的代码 //index是当前执行这个function代码的li对应在所有li组成的数组中的索引值 //有了index的值之后，就可以找到当前标签对应的内容区域 $(this).mouseover(function(){ var liNode = $(this); timoutid = setTimeout(function(){ //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //对有tabin的class定义的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //当前标签所对应的内容区域显示出来 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); },300); }).mouseout(function(){ clearTimeout(timoutid); }); }); //在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容 $("#realcontent").load("../jsp/tabLoad.html"); //找到标签2效果对应的三个标签，注册鼠标点击事件 $("#tabsecond li").each(function(index){ $(this).click(function(){ $("#tabsecond .tabin").removeClass("tabin"); $(this).addClass("tabin"); if(0 == index) { $("#realcontent").load("../jsp/tabLoad.html"); } else if(1 == index) { $("#realcontent").load("../jsp/tabLoad1.html h2"); } else if(2 == index) { $("#realcontent").load("/JqueryStudy/tabServlet"); } }); }); //对于loading图片绑定ajax请求开始和交互结束的事件 $("#contentsecond img").bind("ajaxStart",function(){ $("#realcontent").html(""); $(this).show(); }).bind("ajaxStop", function(){ $(this).slideUp("1000"); }); }); 代码参考地址：https://github.com/shizongger/JqueryInAction
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持61阅读。
参考资料：
1. 王兴奎《jQuery实战》
2. w3school
61阅读| 精彩专题| 最新文章| 热门文章| 苏ICP备13036349号-1