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 no-repeat写法 背景不重复
Mar 18 Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
Jan 31 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
Shell脚本实现Linux系统和进程资源监控
Mar 05 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 Javascript
js鼠标点击图片切换效果代码分享
Aug 26 Javascript
vue实现简单实时汇率计算功能
Jan 15 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
Feb 27 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
用PHP读取RSS feed的代码
2008/08/01 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
Alliance vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
2014/09/21 Javascript
node.js中的console.log方法使用说明
2014/12/09 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
5个最顶级jQuery图表类库插件【jquery插件库】
2016/05/05 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
2016/11/29 Javascript
JS实现超简单的汉字转拼音功能示例
2016/12/22 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
微信小程序实现下拉菜单切换效果
2020/03/30 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python基于有道实现英汉字典功能
2015/07/25 Python
python中Pycharm 输出中文或打印中文乱码现象的解决办法
2017/06/16 Python
python中int与str互转方法
2018/07/02 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python实现银行账户资金交易管理系统
2020/01/03 Python
关于python中的xpath解析定位
2020/03/06 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
使用HTML5捕捉音频与视频信息概述及实例
2018/08/22 HTML / CSS
厨房工作人员岗位职责
2013/11/15 职场文书
现场施工员岗位职责
2014/03/10 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
公司合并协议书范本
2014/09/30 职场文书
民主评议党员个人总结
2015/02/13 职场文书
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript