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 相关文章推荐
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
javascript 自定义回调函数示例代码
Sep 26 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
node.js学习之事件模块Events的使用示例
Sep 28 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
Jan 12 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
微信小程序图片加载失败时替换为默认图片的方法
Dec 09 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
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
ie6 动态缩略图不显示的原因
2009/06/21 PHP
php创建sprite
2014/02/11 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php自定义时间转换函数示例
2016/12/07 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
为什么Node.js会这么火呢?Node.js流行的原因
2014/12/01 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
2015/06/29 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
JavaScript中字面量与函数的基本使用知识
2015/10/20 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
详解微信小程序回到顶部的两种方式
2019/05/09 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
构建Python包的五个简单准则简介
2015/06/15 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
python gdal安装与简单使用
2019/08/01 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
Python+Selenium实现自动化的环境搭建的步骤(图文)
2020/09/01 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
北京振戎融通Java面试题
2015/09/03 面试题
骨干教师培训感言
2014/01/16 职场文书
高中语文课后反思
2014/04/27 职场文书
优秀员工演讲稿
2014/05/19 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
导游词之河北野三坡
2019/12/11 职场文书