js jquery 插件

$(function(){
	(function($, document, undefiend){
		$.fn.pagination = function(options){
			var $this = $(this);
			var defaults = {
					pageNo : 1,
					pageSize : 50,
					totalPages : 1,
					totalRecords : 1,
					goToPage : $.noop
			}

			var _opt = $.extend({}, defaults, options);
			var totalRecordHtml = ‘ <span class="num">共‘+_opt.totalRecords+‘条记录</span>‘;

			var btnDivHtml = ‘<div class="pageBtn">‘
				            	+‘<span class="pageNum pageNo">第<input type="text" value="‘+_opt.pageNo+‘" class="input_page"/>页</span>‘
				            	+‘<span class="allpage">共‘+_opt.totalPages+‘页</span><span>每页‘+_opt.pageSize+‘条</span><span class="goBtn">go</span>‘
	            			+‘</div>‘;

			$this.empty()
				.append(totalRecordHtml).append(btnDivHtml);

			var goBtn = $this.find(‘.goBtn‘);

			$this.on(‘keyup‘,‘.pageNo‘,function(e){
				if(e.keyCode == 13){//回车
					goBtn.click();
				}
			})

			goBtn.on(‘click‘,function(){
				var pageNoInput = $this.find(‘.pageNo‘).find(‘input‘);
				var _pageNo = pageNoInput.val();
				if(!isNaN(_pageNo)){
					var pageNo = parseInt(_pageNo);
					if(0<pageNo && pageNo<=_opt.totalPages){
						_opt.goToPage(pageNo);
						return;
					}
				}
				pageNoInput.val(_opt.pageNo);
			});

		}
	})($, document);

})

$(function(){
	new PriceMonitor();

})
function PriceMonitor(){
	this.initialize();
	this.loadData(this.province_id,this.month,1);
	this.getUrlArgument(name);
	this.serchBox();
}

PriceMonitor.prototype={
	initialize:function(){
		this.checkBox = $(".selectBox");
		this.select_cor = $(this.checkBox).find("#select_area");
		this.month_input = $(this.checkBox).find("#cycleMonth");
		this.select_input =$(this.select_cor).find("#provinceId");
		this.select_hide_box =$(this.select_cor).find(".hide_select_box2");
		this.select_li =$(this.select_cor).find(".select_demo").children("li");
		this.serachBtn = $(this.checkBox).find(".refreshBtn");
		this.download_btn = $(".download_pc");
		//创建表格
		this.table = $(".priceMonitor");
		this.headName = $(‘<table class="tableHead"><tr></tr></table>‘);
		this.dataWrap = $(‘<div class="tableList"></div>‘);
		this.tableList =$(‘<table></table>‘);
		//获取url参数
		this.province_id =this.getUrlArgument("groupprovince");
		this.month = ‘‘;
		this.pageSize = 20;

	},
	serchBox:function(){
		var own = this;
				//点击省下拉效果
		$(own.select_input).click(function(){
			if($(own.select_hide_box).is(":hidden")){
				$(own.select_hide_box).slideDown();
			}else{
				$(own.select_hide_box).slideUp();
			}
		});
		//选择省份

		$(own.select_li).hover(function(){
			$(this).addClass("on").siblings().removeClass("on");
		}).click(function(){
			var text = $(this).text();
			var val = $(this).data("tree-id");
			$(own.select_input).val(text);
			$(own.select_input).attr("data-id",val);
			$(this).addClass("on").siblings().removeClass("on");
			$(own.select_hide_box).slideUp();
		});
		//搜索按钮
		 $(own.serachBtn).click(function(e,data){
			 var pageNo = 1;
				if(data && data.pageNo){
					pageNo = data.pageNo;
				}
			 var time_val = $("#cycleMonth").val();
			 var pro_id ="";
			 if($(own.select_cor).is(":hidden")){
				 pro_id = own.province_id;
			 }else{
				 pro_id = $(own.select_input).attr("data-id");
			 }
			 if(time_val==""||time_val==undefined){
				 alert("请选择时间!")
			 }else{
				own.loadData(pro_id,time_val,pageNo);
			 }
		 });
		 //下载按钮
		 $(own.download_btn).click(function(){
			 var month = $(own.month_input).val();
			 var pro_id ="";
			 if($(own.select_cor).is(":hidden")){
				 pro_id = own.province_id;
			 }else{
				 pro_id = $(own.select_input).attr("data-id");
			 }
			 $(this).attr(‘href‘,contextPath+‘/downPriceMonitor?province=‘+pro_id+‘&month=‘+month)

		 });

	},

	loadData:function(pro,month,pageNo){
		var own = this;
		var the_url = contextPath+‘/getPriceMonitor?province=‘+pro+‘&month=‘+month+‘&pageSize=‘+own.pageSize+‘&pageNo=‘+pageNo;
		if(own.province_id==10){
			$(own.select_cor).show();
		}else{
			$(own.select_cor).hide();
		}
		$.ajax({
			url:the_url,
			type:‘GET‘,
			dataType:‘json‘,
			beforeSend:function(){
				$(own.table).empty()
				.append(‘<div class="loading"><img src="/resources/images/loading.gif" /></div>‘);
			},
			success:function(data){
				$(own.table).empty();
				var json = $.parseJSON(data);
				if(json.code==0){
					own.initInfo(json.data);
					own.page(json.data.page);
				}else{
					$(".priceMonitor").empty().append(‘<div class="fail">数据加载失败,请稍后再试!</div>‘);
				}

			},
			error:function(){
				$(".priceMonitor").empty().append(‘<div class="fail">服务器繁忙,请稍后再试!</div>‘);

			}
		})
	},

	initInfo:function(jsonData){
		var own = this;
		$(own.month_input).val(jsonData.month);
		$(own.table).empty();
		$(own.table).append($(this.headName),$(own.dataWrap).append(own.tableList));
		var head = jsonData.headers;
		/*表头*/
		 $(own.headName).find(‘tr‘).empty();
		var i = 0;
		for(var vv in head){
			var width;
			var val = head[vv];
			if(i==0){
				width = 120
			}else if(i==1){
				width = 280
			}else{
				width = 90;
			}
			 $(this.headName).find(‘tr‘).append(‘<th width="‘+width+‘">‘+val+‘</th>‘);
			 i++;
		}
		/*表格数据列表*/
		var listData = jsonData.page.list;
		$(own.tableList).empty();
		for(var k=0; k<listData.length;k++){
			if(k%2==0){
				var $tr = $(‘<tr class="odd"></tr>‘);
			}else{
				var $tr = $("<tr></tr>");
			}
			$(own.tableList).append($tr);
			var row_val = listData[k];
			var j=0;
			for(var v in row_val){
				var td_width = $(own.headName).find(‘th:eq(‘+j+‘)‘).width();
				span_val = row_val[v];
				$tr.append(‘<td width="‘+td_width+‘">‘+span_val+‘</td>‘);
				j++;
			}
		}

	},
	page:function(option){
		var own = this;

		$(‘.paginator‘).pagination({
			pageNo : option.pageNo,
			pageSize :  own.pageSize,
			totalPages : option.totalPages,
			totalRecords : option.totalRecords,

			goToPage : function(pageNo){
				$(own.serachBtn).trigger(‘click‘,{pageNo:pageNo});
			}
		})
	},
	getUrlArgument :  function(name){
	    var search = document.location.search;
	    var pattern = new RegExp("[?&]"+name+"=([^&]+)");
	    var matcher = pattern.exec(search);
	    var items = null;
	    if(null != matcher){
	        try{
	            items = decodeURIComponent(decodeURIComponent(matcher[1]));         }catch(e){
	            try{
	                    items = decodeURIComponent(matcher[1]);
	            }catch(e){
	                    items = matcher[1];
	            }
	        }
	    }
	    return items;
	}
}

  

时间: 2024-10-24 03:59:26

js jquery 插件的相关文章

slick.js jquery插件使用大全

使用方法 1.引入文件 <link rel="stylesheet" href="style/slick.css"> <script src="script/jquery.min.js"></script> <script src="script/slick.min.js"></script> 2.HTML <div class="slick"

[译]怎样在Vue.js中使用jquery插件

原文:http://gambardella.info/2016/09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使你头疼,当你试图使它与jquery插件混用的时候. 问题的原因是jquery与Vue是完全不同的东西,Vue是通过组件与数据绑定来进行渲染的,jquery则主要是用来做简单的单击处理和强大的操纵DOM的能力. 我试图寻找一些东西来帮助自己解决这个问题,但是我发现一些组件所做的工作不是很让我满意,所以

JQuery插件 aos.js

简介: aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件.该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果.在页面往回滚动时,元素会恢复到原来的状态. 使用方法: 在页面中引入aos.css文件,jquery和aos.js文件 1 <link rel="stylesheet" href="dist/aos.css" /> 2 <script src="js/jquery.min.js&quo

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q

jQuery插件之验证控件jquery.validate.js

今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自定义方法的 API.所有的捆绑方法默认使用英语作为错误信息,且已翻译成其他 37 种语言. 该插件是由 Jörn Zaeff

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

tapmodo / Jcrop Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选.Github.com官网也使用了这个插件.有一个小细节是,边框线的蚂蚁线是动画的,真的很用心. Jcrop项目地址 | demo1 | demo2 | demo3 | demo4 fengyuanchen / cropper Cropper也是一款图片裁剪jQuery插件,stars数量1k+,是杭州的前端工程师Fengyuan Chen所写的,功能也相当丰富,裁剪

介绍一款jQuery插件:Fullpage.js

演示地址:http://www.dowebok.com/demo/2014/77/ 简介 如今我们经常能见到全屏网站,尤其是国外网站.这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次.比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站.如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试 fullPage.js. fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支