`
jersey109
  • 浏览: 991 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

帅气的jquery tabs插件 +优雅的 ajax 分页(转)

 
阅读更多
http://www.iteye.com/topic/1113915

<script src="/scripts/jquery-1.5.2rc1.js" language="javascript"></script> 
<script type="text/javascript" src="/scripts/Js-ui/jquery.ui.core.js"></script> 
<script type="text/javascript"src="/scripts/Js-ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/scripts/Js-ui/jquery.ui.tabs.js"></script> 
<link rel="stylesheet" type="text/css" href="/css/Css-Pub/ui.all.css" /> 
<link rel="stylesheet" type="text/css" href="/css/Css-Pub/demos.css" /> 
$(function() { 
  $("#tabs").tabs( { 
     fx : 
    {opacity : "toggle"}, 
     event : "click" 
  }); 
  beginPage();//此函数页面加载时初始化函数 

}); 
function beginPage() { 
   $.get("url保密呵呵",{method:"getCount","type":type},function(data) { 
     if (data != "0") { 
$("#count").text(data);//显示记录总数 
count=parseInt(data); 
var sizes=parseInt($("#size").val()); 
         maxpage=forDight(count/sizes);//显示页数 
getData();//好戏开始,分页begin 
      } 
   }) 
} 

function getData() { 
   //getJSON方法直接获取后台数据 
$.getJSON( 
  "/url",{"method":"findAll","size":size,"page":page,"type":type} 
  , function(data) { 
     var tempStr=""; 
     var selectTag=$("#type").val();//获取tabs当前位置 
      $("tr[id='newtr']").remove();//删除上次数据 
      $.each(data,function(i,obj){//获取数据后回调函数内执行添加数据到表格 
      var name=obj["name"]==null?"不详":obj["name"]; 
     var remark=obj["remark"]==null?"不详":obj["remark"]; 
     var type=obj["type"]; 
     var phone=obj['phone']; 
     var id=obj["id"]; 
     tempStr+= 
   "<tr id='newtr'><td><input type='checkbox' name='delCbx' id='delCbx"+type+"'value='"+phone+"'/> 
</td>"+"<td><a href='javascript:openUpdateWindow("+id+");'>"+name+"</a></td>"+ 
"<td><a href='javascript:openUpdateWindow("+id+");'>"+phone+"</a></td>"+ 
"<td>"+remark+"</td></tr>" 
});//将数据添加为一个字符串 
   
    $("#tab"+selectTag).after(tempStr)//显示到表格 
    $("#pageint").text(page+"/"+maxpage); 
}); 
} 


//当然分页还有一些用户操作的响应 

function responcePage(pages){ 
     //alert($("#size").val());   
     var sizes=parseInt($("#size").val()); 
     maxpage=forDight(count/size); 
     if(maxpage==0&&count!=0){ 
     maxpage=1; 
      } 
     if(pages>maxpage){ 
         pages=maxpage; 
     alert("已到最大页数"); 
     }else if(pages<1){ 
         pages=1; 
     alert("已到首页"); 
     } 
     if(sizes>6){ 
         sizes=6; 
         pages=1; 
     } 
     page=pages; 
     size=sizes; 
      
     $("#goPage").val(page); 
     $("#size").val(size); 
     getData(); 
} 
/*取整数的方法*/ 
function forDight(Dight){ 
     Dight = Math.ceil(Dight*Math.pow(10,0))/Math.pow(10,0); 
     return Dight; 
} 
//单击事件 
function clickTabs(i){ 
     $('#type').val(i); 
     type=i; 
     page=1; 
     size=4; 
     if(type==1){ 
     $("#delCbx1").removeAttr("checked"); 
     }else{ 
     $("#delCbx2").removeAttr("checked"); 
     } 
     beginPage(); 
} 
分享到:
评论

相关推荐

    JqueryAPI +easyUI+demo

    5. **插件扩展(Plugin Extensions)**:EasyUI 还允许用户或第三方开发者创建插件,扩展其功能,如分页插件、拖拽排序插件等。 **示例应用** 在 "JqueryAPI +easyUI+demo" 中,你可能找到使用jQuery和EasyUI开发...

    jquery ui tabs_jqgrid demo

    从给定的文件信息来看,这是一段网页代码示例,主要展示了如何在网页中集成jQuery UI Tabs和jqGrid插件。以下是对标题、描述、标签以及部分内容中涉及的关键知识点的详细解读: ### 关键知识点:jQuery UI Tabs **...

    jq分页控件

    常见的实现方式有使用`&lt;ul&gt;`和`&lt;li&gt;`标签配合CSS样式,以及使用jQuery插件如jQuery UI的tabs组件。 使用jQuery实现选项卡的步骤大致如下: 1. **HTML结构**:创建选项卡的容器,包括一个显示标题的`&lt;ul&gt;`和对应...

    Jquery动态插件

    **jQuery动态插件详解** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画设计以及Ajax交互。jQuery动态插件是开发者利用jQuery实现各种网页交互效果和视觉特效的重要工具,它们通常...

    JQuery插件(整体框架)

    1. **标签页(Tabs)**:JQuery的标签页插件允许用户在不同的内容区域之间切换,通常用于展示多块相关的但互不干扰的信息。例如,Bootstrap的Tab组件就是基于JQuery实现的,它提供了简洁的API来创建、激活和管理标签页...

    jquery效果插件

    jQuery轮播图插件通常包括自动播放、分页指示器、左右箭头导航等功能,例如知名的Slick、Carousel等。这些插件不仅提供了丰富的定制选项,还支持响应式设计,能适应不同设备的屏幕尺寸。 接下来是“单图”效果。在...

    jquery validate插件

    - `ui.tabs.css`和`style.css`:这些可能是样式表文件,用于美化验证过程中的提示和错误消息,以及可能的UI元素,如分页、选项卡等。 - `help.htm`:可能包含`jQuery Validate`插件的使用指南或常见问题解答,帮助...

    jquery,中文手册,jquery api,jquery ui,插件

    4. **Tabs**:分页布局,方便组织和切换不同内容。 5. **DatePicker**:提供易于使用的日期选择界面。 ### jQuery插件 jQuery的生态系统中有众多插件,涵盖了数据分析、地图集成、表单验证、图片轮播等各种功能。...

    swiper tabs 标签效果

    Swiper支持触摸操作,兼容多种设备,包括桌面端和移动设备,并提供了丰富的API和插件接口,使得定制和扩展变得简单。 二、Swiper与JS交互 JavaScript是Swiper的核心驱动力,通过调用Swiper的初始化方法和提供的API...

    最优秀的50个JQ插件

    8. **Tabs插件**:允许用户在不同的内容区域之间切换,适用于组织结构化的信息。 9. **Slider插件**:用于创建滑动条,适用于控制音量、调整大小等操作。 10. **Tooltip插件**:当鼠标悬停在某个元素上时显示...

    php jquery 实现新闻标签分类与无刷新分页

    文件中描述了使用jQuery UI的tabs插件来创建标签效果。当用户点击不同的标签时,通过AJAX请求加载与该标签相关的内容,并在页面上进行显示。 5. HTML页面结构: 文档中也提到了相关的HTML结构,包括使用link标签...

    推荐40款强大的 jQuery 导航插件和教程(上篇)

    "Sweet AJAX Tabs With jQuery 1.4 & CSS3"结合了AJAX和CSS3,使得选项卡内容的加载更加流畅,同时"Building a Better Blogroll"教你优化博客链接列表的展示。 "Fancy Sliding Form with jQuery"展示了如何将表单...

    jquery table

    在IT行业中,jQuery是一款非常流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery Table是jQuery的一个应用场景,主要用于创建功能丰富的表格,尤其在数据展示和操作上提供了极大的便利...

    jquery常用到的开源公共组件汇总

    这个插件扩展了jQuery对表单的支持,提供了异步提交表单(Ajax方式)的功能,同时支持文件上传和实时验证。 5. **jQuery Validation Plugin** 对于表单验证,jQuery Validation Plugin是不可或缺的工具,它可以...

    jquery easyui 未压缩源代码1.05

    《jQuery EasyUI 1.05未压缩源代码解析与应用》 jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它提供了一套完整的用户界面组件,使得开发者可以快速构建功能丰富的Web应用程序。EasyUI 的设计灵感来源于 ExtJS...

    jquery 新浪网易的评论块制作

    接下来,我们可以使用jQuery UI的`tabs`插件来创建一个分页的评论表情选择器。只需在文档加载完成后调用`$("#tabs").tabs();`即可激活这个插件: ```javascript $(function() { $("#tabs").tabs(); }); ``` 为了...

    jquery自动补全小栗子

    4. **使用jQuery的`autocomplete`插件**:虽然jQuery核心库不直接提供自动补全功能,但可以使用jQuery UI库的`autocomplete`组件。首先,引入jQuery UI库: ```html &lt;link rel="stylesheet" href="https://code....

    jQuery UI(java)

    jQuery UI 是一个基于 jQuery JavaScript 库的用户界面插件集合,它提供了丰富的交互效果和可自定义的主题,使得开发者能够快速构建美观、响应式的Web应用。在Java环境下,jQuery UI同样能够发挥其强大的功能,帮助...

    jquery 效果大全

    jQuery 是一款非常流行的 JavaScript 库,它简化了DOM操作、事件处理、动画设计以及Ajax交互等多个方面,使得JavaScript编程变得更加简洁高效。本资源集合了57个不同的jQuery效果插件,涵盖了多种网页动态效果,旨在...

Global site tag (gtag.js) - Google Analytics