`
lianglove_0
  • 浏览: 3269 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

阅读更多
首先使用jquery的tabs 必须引入其相关文件
<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) {
//get方法向后台获取记录的大小判断
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();
}

  • 大小: 8.8 KB
分享到:
评论

相关推荐

    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插件**:当鼠标悬停在某个元素上时显示...

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

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

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

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

    jquery table

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

    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常用到的开源公共组件汇总

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

    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