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

jquery基本2

阅读更多

(function($){

$(function(){

$.msg.init();

$('.box>.open,.box>.close').click(function(){
if(this.className == 'open'){
$(this).nextAll().stop().slideUp(100, function(){
$(this).prev().attr('class','close')
});
}else{
$(this).attr('class','open').nextAll().stop().slideDown(100);
}
});

$('.selectable>ul').on('click', 'li', function(){
var $ul = $(this).parent();
$(this).toggleClass('select');
$('#count').text('[' + $('.select', $ul).length + '/' + $('li', $ul).length + ']');
});

$('#count').prev().click(function(){
var $ul = $(this).parent().parent().next();
var length = $('li', $ul).addClass('select').length;
$('#count').text('[' + length + '/' + length + ']');
}).end().next().click(function(){
var $ul = $(this).parent().parent().next();
var length = $('li', $ul).removeClass('select').length;
$('#count').text('[0/' + length + ']');
});
});

$.extend({
cover: {
init: function(){
$('<div id="cover"/>').appendTo('body').click(function(){
if($('#msg').is('.message')){
$.msg.hide();
}else{
$.msg.sway();
}
});
$(window).on('resize.cover',function(){
$('#cover').width(Math.max($(window).width(),$(document).width()));
});
},
show: function(){
$('#cover').stop(true,true).css({
width: Math.max($(window).width(),$(document).width()),
height: Math.max($(window).height(),$(document).height()),
display: 'block'
}).fadeTo(100,0.6);
},
hide: function(){
$('#cover').stop().fadeTo(100,0.1,function(){
$(this).removeAttr('style');
});
}
},
msg: {
init: function(){
$.cover.init();
$('<div id="msg"/>').appendTo('body');
$(window).on('resize.msg',function(){
$('#msg').center();
});
},
show: function(msg, callback){
$.cover.show();
$('#msg').attr('class', msg ? 'message':'loading').html(msg || '信息加载中,请稍候……').center().show().data('callback', callback);
},
sway: function(){
$('#msg').animate({left:'-=20'},40).animate({left:'+=40'},80).animate({left:'-=30'},60).animate({left:'+=20'},40).animate({left:'-=15'},30).animate({left:'+=5'},10);
},
open: function(url){
$.cover.show();
$('<iframe src="' + url + '" frameborder="0"></iframe>').hide().load(function(){
var width = this.contentDocument.body.offsetWidth;
var height = this.contentDocument.body.offsetHeight;
$(this).css({width:width, height:height}).appendTo($('#msg').attr('class', 'frame').empty()).show().parent().center().show();
}).appendTo('body');
},
hide: function(){
var callback = $('#msg').hide().data('callback');
$.cover.hide();
if(callback){
$('#msg').removeData('callback');
callback();
}
}
},
selected: function(i) {
var yes = '', no='';
$('.selectable>ul>li').each(function(){
if($(this).is('.select')){
yes += $(this).data('id') + ',';
}else{
no += $(this).data('id') + ',';
}
});
if(yes == no){
$.msg.show('没有可操作对象!');
return null;
}else{
if(i == 0){
return {'yes':yes + no, 'no':''};
}else if(i == 1){
return {'yes':yes, 'no':no};
}else{
return {'yes':'', 'no':yes + no};
}
}
},
load: function(url, data, callback, err){
if(!err){
$.msg.show();
}
$.ajax({
url: url,
data: data,
success: function(obj){
if(obj.status == 1){
$.msg.show('没有登陆或者权限不够,请<a href="../login.jsp" target="_top">重新登陆</a>!');
}else{
$.msg.hide();
callback(obj);
}
},
error: function(){
$.msg.show('服务器响应失败,请重试!');
if(err){
err();
}
}
});
}
});

/* 居中显示 */
$.fn.center = function(){
return this.each(function(){
$(this).css({
left: ($(window).width() - $(this).outerWidth())/2,
top: ($(window).height() - $(this).outerHeight())/2 + Math.max($('html').scrollTop(),$('body').scrollTop())
});
});
};

/* 页码处理 */
$.fn.page = function(current, amount, edge){
edge = edge || 5;
return this.each(function(){
var $page = $(this).empty();
if(current > (edge+3)){
$page.append('<b>1</b>');
$page.append('<span>…</span>');
for(var i=(current-edge); i<current; i++){
$page.append('<b>' + i + '</b>');
}
}else{
for(var i=1; i<current; i++){
$page.append('<b>' + i + '</b>');
}
}
$page.append('<span>' + current + '</span>');
if((amount-current) > (edge+2)){
for(var i=(current+1); i<=(current+edge); i++){
$page.append('<b>' + i + '</b>');
}
$page.append('<span>…</span>');
$page.append('<b>' + amount + '</b>');
}else{
for(var i=(current+1); i<=(amount); i++){
$page.append('<b>' + i + '</b>');
}
}
});
};

})(jQuery);

 

分享到:
评论

相关推荐

    jQuery 基本功能

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

    jquery基本过滤选择器

    jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇

    JQuery desktop 基本JQuery 的虚拟桌面

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

    jquery基本模型.xmind

    jquery多脑图总结大全

    jquery基本语法ppt

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

    Struts2+jquery

    Struts2和jQuery是两种非常重要的Web开发技术。Struts2是Java企业级应用中广泛使用的MVC(Model-View-Controller)框架,它提供了一种结构化的方式来组织和管理Web应用程序,使得开发者能够更有效地处理请求、控制...

    Java Web Jquery表单验证

    编写基于Jquery的表单验证插件 ...1、初步运用了Jquery框架进行编程,基本掌握Jquery框架的使用。 2、熟练使用Jquery-validate表单验证插件,并熟知实现原理。 3、基本实现了一个基于Jquery的表单验证的调查问卷。

    第10章 jQuery的基本操作_jquery_

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

    jQuery1.12.4+jQuery中文手册.rar

    **jQuery 1.12.4 知识点详解** jQuery 是一个广泛使用的JavaScript库,它简化了HTML文档...以上是对jQuery 1.12.4及其相关资源的基本介绍,掌握这些内容,将有助于你在实际开发中熟练运用jQuery,提升前端开发水平。

    JQuery简单插件示意,介绍插件的基本写法格式

    本篇文章将深入探讨如何编写一个简单的jQuery插件,理解其基本的写法格式。这对于任何希望扩展jQuery功能或者创建自定义解决方案的开发者来说,都是至关重要的基础知识。 首先,我们要明确jQuery插件的目的是为了...

    jquery.json2xml.js和jquery.xml2json.js

    在jQuery的基础上,`jquery.json2xml.js` 和 `jquery.xml2json.js` 这两个脚本提供了方便的方法来在JSON和XML之间进行转换,从而让开发者无需深入了解这两种格式的复杂性,就能轻松地在它们之间进行数据互换。...

    jquery例子大全 jquery demo

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

    说明jQuery的一些基本信息和一些基本了解

    jQuery概述,说明了jQuery的一些基本信息和一些基本了解

    jquery的基础包

    对于JavaScript新手来说,jQuery是一个极好的起点,能够帮助快速理解和掌握网页动态交互的基本原理。 ### 一、jQuery简介 jQuery由John Resig在2006年创建,其目标是简化JavaScript编程,特别是处理DOM操作、事件...

    jQuery 之入门基本介绍

    **jQuery 入门基本介绍** jQuery 是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。jQuery的设计理念是“Write Less, Do More”,即用更少的代码实现...

    jquery基本使用例

    本教程将通过一些实例来介绍jQuery的基本用法。 ### 1. 引入jQuery 在HTML文件中引入jQuery库,通常通过以下方式: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ``` 这行代码...

    基本所有jQuery包

    包含 jquery-2.js、jquery-1.10.2.js、jquery-1.9.1.min.js、jquery-1.8.3.js、jquery-1.5.2.min.js、jquery.validate.js...............

    jquery基本校验

    最基本jquery校验用户名密码,表单提交用户

    jquery mobile 1.4.2 和 jquery 1.8.3

    1. `jquery.mobile-1.4.2.css` 是主样式表,包含了所有基本的样式规则,用于构建jQuery Mobile的页面布局和交互元素。 2. `jquery.mobile.inline-svg-1.4.2.css` 添加了对内联SVG图形的支持,使图标在不同设备上都能...

Global site tag (gtag.js) - Google Analytics