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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
js四舍五入数学函数round使用实例
May 09 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
Jquery easyui开启行编辑模式增删改操作
Jan 14 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
Vue修改项目启动端口号方法
Nov 07 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
.htaccess文件保护实例讲解
2011/02/06 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
PHP中的浅复制与深复制的实例详解
2017/10/26 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
js event事件的传递与冒泡处理
2009/12/06 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
2020/09/12 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
2014/11/26 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
js实现的捐赠管理完整实例
2015/01/20 Javascript
基于jQuery滑动杆实现购买日期选择效果
2015/09/15 Javascript
BootStrap3学习笔记(一)之网格系统
2016/05/20 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
原生js实现购物车功能
2020/09/23 Javascript
Echarts.js无法引入问题解决方案
2020/10/30 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python通过yield实现数组全排列的方法
2015/03/18 Python
python中模块的__all__属性详解
2017/10/26 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python ETL工具 pyetl
2020/06/07 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
利用CSS3实现平移动画效果示例代码
2016/10/12 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
linux面试题参考答案(7)
2014/07/24 面试题
平面设计岗位职责
2013/12/14 职场文书
模具数控专业自荐信
2014/01/27 职场文书
预备党员的自我评价
2014/03/12 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
退休欢送会致辞
2015/07/31 职场文书
小学语文的各类谚语(70首)
2019/08/15 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
SQL Server中的游标介绍
2022/05/20 SQL Server