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使用ajax读博客rss示例
May 06 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
vue-scroller记录滚动位置的示例代码
Jan 17 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
Node配合WebSocket做多文件下载以及进度回传
Nov 07 Javascript
详解vue中v-on事件监听指令的基本用法
Jul 22 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&amp;&amp;mysql)六
2006/10/09 PHP
php gd2 上传图片/文字水印/图片水印/等比例缩略图/实现代码
2010/05/15 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
php图像处理类实例
2015/07/28 PHP
php中的单引号、双引号和转义字符详解
2017/02/16 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
js判断上传文件的类型和大小示例代码
2013/10/18 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
2019/06/18 jQuery
js数组的基本使用总结
2021/01/18 Javascript
Python MD5文件生成码
2009/01/12 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
Python将string转换到float的实例方法
2019/07/29 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python class的继承方法代码实例
2020/02/14 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python发送邮件实现基础解析
2020/08/14 Python
老海军美国官网:Old Navy
2016/09/05 全球购物
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
怎样写好自荐信和推荐信
2013/12/26 职场文书
公司同意接收函
2014/01/13 职场文书
小学毕业感言50字
2014/02/16 职场文书
网络宣传方案
2014/03/15 职场文书
区级文明单位申报材料
2014/05/15 职场文书
个人租房协议书范本
2014/09/30 职场文书
毕业生班级鉴定评语
2015/01/04 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
2019职场单身人才调研报告:互联网行业单身比例最高
2019/08/07 职场文书
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers