`
xuwu168168
  • 浏览: 691 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

jquery基本功能1

阅读更多
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css" href="../files/global.css" />
<link rel="stylesheet" type="text/css" href="../files/datepicker.css" />
<style>
#note>ul>li>div { display:inline-block; width:100px; }
#note>ul>li>p { display:inline-block; width:312px; min-height:60px; padding-left:10px; line-height:16px; vertical-align:top; border-left:1px solid #e0e0e0; }
</style>
</head>

<body>
<!-- 顶栏导航 --><%@ include file="../common/head.jsp"%><!-- 顶栏导航 -->
<div id="body">
<div id="side">
<!-- 子导航 --><%@ include file="subnav.jsp"%><!-- 子导航 -->
<div id="control" class="box">
<h3 class="open"><span><em></em></span><strong>控制面板</strong></h3>
<ul>
<li>发布时间:<i id="uploadTime"><a>未设置</a><div></div><em></em></i></li>
<li>审核状态:<i id="isVerify"><a abbr="0">待审核</a><div><a abbr="1">已通过审核</a><a abbr="2">未通过审核</a></div><em></em></i></li>
<li>优先显示:<i id="identity"><a abbr="2">全部</a><div><a abbr="1">VIP用户</a><a abbr="0">普通用户</a></div><em></em></i></li>
<li>每页数量:<i id="pageSize"><a>6</a><div><a>8</a><a>10</a></div><em></em></i></li>
</ul>
</div>
</div>
<div id="main">
<div id="note" class="box selectable">
<h3><span><a>全选</a><span id="count">[0/0]</span><a>重置</a></span><strong>审核 » 随记审核</strong></h3>
<ul></ul>
<div class="button"><b class="big green">通过全部</b><b class="big yellow">通过选中</b><b class="big red">拒绝全部</b></div>
</div>
<div id="page"></div>
</div>
<div class="clear"></div>
</div>
<!-- 页脚 --><%@ include file="../common/foot.jsp"%><!-- 页脚 -->

<script type="text/javascript" src="../files/jquery.js"></script>
<script type="text/javascript" src="../files/global.js"></script>
<script type="text/javascript" src="../files/datepicker.js"></script>
<script type="text/javascript">
$(function(){

data = {
pageNo:1,
pageSize:6,
uploadTime:'',
isVerify:0,
identity:2
};

$('#uploadTime>div').datepicker({onSelect:function(date){
$(this).prev().text(date);
data.uploadTime = date;
getList();
}});

$('i:not(#uploadTime)>div').on('click', 'a', function(){
var $a = $(this);
var $i = $a.parent().parent();
$a.replaceWith($a.parent().prev()).prependTo($i);
data[$i.attr('id')] = $a.attr('abbr') || $a.text();
getList();
});

$('.button>b').click(setList);

$('#page').on('click', 'b', function(){
data.pageNo = $(this).text();
getList();
});

getList();
});

//加载随记
function getList(){
$.load('word!viewNote.action', data, function(obj){
var $ul = $('#note>ul').empty();
if(obj.totalRecords == 0){
$.msg.show('没有相关数据!');
$('#page').empty();
}else{
$.each(obj.list, function(i){
$('<li/>')
.append('<div>' + this.nickName + '<br />' + this.genderInfo + '/' + this.age + '<br />' + this.noteTime.substr(5,11) + '</div>')
.append('<p>' + this.noteMsg + '</p>')
.data('id',this.noteId).appendTo($ul);
});
$('#page').page(obj.pageNo, obj.totalPage);
}
$('#count').next().click();
});
}

//提交当前页审核结果
function setList(){
var data = $.selected($(this).index());
if(data){
$.load('w_word!updateNote.action', data, function(obj){
if(obj[0] == 0){
$.msg.show('提交处理成功!', getList);
}else{
$.msg.show('提交处理失败,请重试!');
}
});
}
}
</script>
</body>

</html>
分享到:
评论

相关推荐

    jQuery 基本功能

    在“jQuery基本功能”中,我们将深入探讨以下几个关键领域: 1. **选择器**: jQuery 的选择器类似于CSS,可以轻松选取DOM元素。例如,`$("#id")` 选择ID为指定值的元素,`$(".class")` 选择所有具有特定类名的元素...

    jQuery多功能搜索框插件下拉菜单选择代码

    《jQuery多功能搜索框插件下拉菜单选择代码详解》 在网页开发中,搜索框是不可或缺的元素之一,它能够帮助用户快速找到所需信息。jQuery作为一款强大的JavaScript库,提供了丰富的功能来增强用户体验,其中就包括多...

    jQuery带过滤功能列表分类筛选插件代码

    总结来说,jQuery带过滤功能的列表分类筛选插件是网页开发中的实用工具,通过理解基本的jQuery操作和事件处理,结合HTML、CSS,我们可以轻松创建出具有高级交互功能的列表页面。这个插件的实现不仅体现了jQuery的...

    jquery网站功能引导用户提示操作

    首先,我们需要理解jQuery的基本概念。jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。它的核心特性包括选择器(用于选取HTML元素)、DOM操作(如添加、删除或修改元素...

    Jquery实现的分页功能

    在这个场景中,我们将关注使用Jquery来实现这一功能。 Jquery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript的DOM操作,使得开发者可以轻松地实现各种复杂的交互效果。对于分页功能,Jquery...

    jquery下拉框集成搜索功能

    首先,我们需要理解jQuery的基本用法。jQuery通过选择器来选取DOM元素,然后对这些元素执行各种操作。例如,我们可以通过`$("#mySelect")`来选取ID为"mySelect"的下拉框。 在实现下拉框搜索功能时,通常我们会使用...

    jQuery常用功能大全

    ### jQuery常用功能详解 #### 一、页面元素的引用 在使用jQuery时,最基础的操作之一就是选择页面上的元素。这通常通过`$()`符号来完成...通过理解和掌握这些基本概念和技巧,可以更高效地利用jQuery来开发Web应用。

    jquery文档预览功能插件

    `jquery.zohoviewer_demo.html`文件包含了上述所有概念的实例,演示了如何使用该插件创建一个基本的文档预览功能。通过查看和分析这个示例,开发者能够更直观地了解插件的用法。 ### 5. 注意事项 - 请确保你有合法...

    JQuery desktop 基本JQuery 的虚拟桌面

    要使用jQuery Desktop,你需要具备基本的HTML、CSS和JavaScript知识,尤其是jQuery的使用经验。从nathansmith-jQuery-Desktop-f1addcc这个项目中,你可以获取源代码进行学习和二次开发。通过阅读代码和官方文档,...

    jQuery动画效果多功能菜单

    总的来说,"jQuery动画效果多功能菜单"项目是学习和实践jQuery动画技术的好例子,它涵盖了基本到高级的动画效果,对于提升前端开发技能大有裨益。通过研究这个项目,开发者可以学会如何巧妙地运用jQuery来增强网页的...

    JQuery功能测试源码_jquerydemo.zip

    1. **选择器**:jQuery的选择器功能是其一大亮点,它允许开发者通过CSS语法快速定位DOM元素。例如,"$('div')”选择所有div元素,"$('#id')”选择ID为id的元素,"$('.class')"选择所有class类别的元素。在源码中,你...

    jQuery多功能书本翻页特效

    左右翻页是书本翻页特效的基本功能,通过监听用户对页面边缘的点击或滑动事件,实现前后页面的切换。这一过程中,jQuery的事件绑定函数(如`click`和`swipe`)发挥了关键作用。同时,通过CSS3的变换(transform)...

    jquery 调用浏览器打印功能

    1. jQuery 的基本使用:引入 jQuery 库,选择器操作,事件绑定。 2. jQuery Migrate 插件:解决 jQuery 新旧版本的兼容性问题。 3. jqPrint 插件:提供方便的打印功能,使得可以通过 jQuery 调用浏览器的打印接口。 ...

    jQuery实现图片预览功能

    本教程将深入讲解如何使用jQuery实现图片预览功能。 首先,我们需要了解基本的HTML结构。在`index.html`文件中,你需要创建一个`&lt;input&gt;`元素用于让用户选择图片,以及一个`&lt;div&gt;`元素作为预览区域: ```html &lt;!...

    通过jquery+css实现选项卡功能

    本教程将详细介绍如何利用jQuery和CSS技术来创建一款功能完善的选项卡组件,并且需要引入jQuery UI库以增强其表现力和可用性。 首先,我们需要在HTML中设置选项卡的基本结构。这通常包括一个包含所有选项标题的容器...

    jquery基本语法ppt

    **jQuery基本语法详解** jQuery是一个高效、简洁的JavaScript库,它极大地简化了DOM操作、事件处理、动画设计和Ajax交互。本篇将详细介绍jQuery的核心API和基本语法。 ### jQuery核心函数 1. **jQuery(expression...

    仿百度搜索的jquery自动完成功能包

    【jQuery自动完成功能包详解】 在Web开发中,用户界面的交互性和便捷性是提升用户体验的关键因素...通过理解jQuery的基本概念、自动完成的实现原理以及提供的资源,开发者可以轻松地将此功能整合进各种Web应用程序中。

    第10章 jQuery的基本操作_jquery_

    本章我们将深入探讨jQuery的基本操作,包括元素选取、属性操作、样式调整以及动画效果的实现。 1. **元素选取** jQuery提供了一系列方法来选取HTML元素,如`$()`函数,它是jQuery的核心,可以接受CSS选择器、HTML...

    Jquery 实现日历(calendar)功能

    对于日历(Calendar)功能的实现,jQuery 提供了一个强大的工具集,帮助开发者快速创建交互式、功能丰富的日历组件。本篇文章将深入探讨如何使用 jQuery 实现日历功能,以及相关的知识点。 首先,我们需要理解日历...

    jquery例子大全 jquery demo

    ### 一、jQuery 基本使用 jQuery 的核心在于它的选择器,它允许我们方便地选取HTML元素。例如,`$("#id")` 选择ID为指定值的元素,`$(".class")` 选择所有具有特定类名的元素,而`$("tagname")` 则选择所有指定标签...

Global site tag (gtag.js) - Google Analytics