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 相关文章推荐
JavaScript日历实现代码
Sep 12 Javascript
JavaScript中实现最高效的数组乱序方法
Oct 11 Javascript
jQuery实现调整表格单列顺序完整实例
Jun 20 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
getElementById().innerHTML与getElementById().value的区别
Oct 27 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
Jan 25 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 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/09/04 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
jquery实现列表上下移动功能
2016/02/25 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
详解vue mixins和extends的巧妙用法
2017/12/20 Javascript
Vue的watch和computed方法的使用及区别介绍
2018/09/06 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
Node.js设置定时任务之node-schedule模块的使用详解
2020/04/28 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
python简单猜数游戏实例
2015/07/09 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Python matplotlib生成图片背景透明的示例代码
2019/08/30 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
Python爬取某平台短视频的方法
2021/02/08 Python
英国的一家创新礼品和小工具零售商:Menkind
2019/08/24 全球购物
SQL语言面试题
2013/08/27 面试题
行政工作个人的自我评价
2014/02/13 职场文书
小学毕业寄语大全
2014/04/03 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
感恩老师主题班会
2015/08/12 职场文书
企业内部管理控制:银行存款控制制度范本
2020/01/10 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL