asp.net+jquery滚动滚动条加载数据的下拉控件


Posted in Javascript onJune 25, 2010

这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦。

没办法由于需求下来了,只能按需求操作。网上找了很多相关控件都感觉有点庞大,占资源比较多。没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点。

需求:AJAX滚动滚动条加载数据的下拉列表
控件名称:Webcombo
所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx)

下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框。最终结果如下图

asp.net+jquery滚动滚动条加载数据的下拉控件
先分析下jQuery这边的插件写法吧
AJAX加载有jQuery Ajax完成

$.ajax({ 
type: options.getMethod, 
url: options.jsonUrl, 
data: params, 
success: function(data){ 
if(isScroll) 
$.CreateListItem(showbox,data,options); 
else 
$.CreateBox(showbox,data,options); 
}, 
complete:function(){ }, 
error:function(e){ 
$(options.loadBox).css('background-image','none'); 
$(options.loadBox).append('<span>data connect error!'+e+'</span>'); 
}

而滚动条滚动加载数据则由下拉DIV的onscroll事件完成,具体核心代码如下:
$(showbox).scroll(function(){ 
if(options.total==$(this).children("ul").children("li").length) 
return; 
var scrolltop=$(showbox).attr('scrollTop'); 
var scrollheight=$(showbox).attr('scrollHeight'); 
var windowheight=$(showbox).attr('clientHeight'); 
var scrolloffset=20; 
$(options.loadBox).css('top',scrolltop); 
if(scrolltop>=(scrollheight-(windowheight+scrolloffset))&&!loading) 
{ 
loading=true; 
$(options.loadBox).show(); 
options.total=$(this).children("ul").children("li").length; 
$.WebComboGetData(showbox,options,true); 
} 
});

该插件的完整代码再源文件中可以找到,文件名:simulateddl.js
其实这个滚动条滚动加载数据的jQuery插件写好了就已经可以实现该功能了,只是由于项目中用到的地方比较多又无赖的将其封装到asp.net自定义控件中。之所以说半成品就是这个自定义控件自定义的有些不人性化,高手们见了望指点指点。具体代码可以下载后查看,本人不是控件制作高手,就不搬出来献丑了。有问题建议的朋友可以提出来大家讨论讨论。

asp.net+jQuery滚动条滚动加载数据控件源代码下载

Javascript 相关文章推荐
js常用函数 不错
Sep 08 Javascript
sina的lightbox效果。
Jan 09 Javascript
语义化 H1 标签
Jan 14 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 Javascript
JavaScript判断文件上传类型的方法
Sep 02 Javascript
javascript文件加载管理简单实现方法
Jul 25 Javascript
jquery滚动条插件(可以自定义)
Dec 11 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 Javascript
jQuery对象和DOM对象使用说明
Jun 25 #Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
Jun 23 #Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 #Javascript
有道JavaScript监听浏览器的问题
Jun 23 #Javascript
utf-8编码引起js输出中文乱码的解决办法
Jun 23 #Javascript
js和jquery批量绑定事件传参数一(新猪猪原创)
Jun 23 #Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 #Javascript
You might like
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP中文分词 自动获取关键词介绍
2012/11/13 PHP
用PHP实现浏览器点击下载TXT文档的方法详解
2013/06/02 PHP
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
php带抄送和密件抄送的邮件发送方法
2015/03/20 PHP
PHP信号量基本用法实例详解
2016/02/12 PHP
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
js展开闭合效果演示代码
2013/07/24 Javascript
jQuery Form 页面表单提交的小例子
2013/11/15 Javascript
22点关于jquery性能优化的建议
2014/05/28 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
2015/10/08 Javascript
JS创建事件的三种方法(实例代码)
2016/05/12 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
AngularJS中run方法的巧妙运用
2017/01/04 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
使用angular-cli webpack创建多个包的方法
2018/10/16 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
python算法演练_One Rule 算法(详解)
2017/05/17 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
NEW LOOK官网:英国时装零售巨头之一,快时尚品牌
2017/01/11 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
初一英语教学反思
2014/01/11 职场文书
求职信结尾怎么写
2014/05/26 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
拾金不昧感谢信
2015/01/21 职场文书
求职导师推荐信范文
2015/03/27 职场文书
导游词之珠海轮廓
2019/10/25 职场文书