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 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
js判断生效时间不得大于失效时间的思路及代码
Apr 23 Javascript
多个js毫秒倒计时同时进行效果
Jan 05 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
js判断主流浏览器类型和版本号的简单实现代码
May 26 Javascript
D3.js实现柱状图的方法详解
Sep 21 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
jQuery实现页面顶部下拉广告
Dec 30 Javascript
select下拉框插件jquery.editable-select详解
Jan 22 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
vue.js的简单自动求和计算实例
Nov 08 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木马攻击防御之道
2008/03/24 PHP
php守护进程 加linux命令nohup实现任务每秒执行一次
2011/07/04 PHP
PHP 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
Codeigniter注册登录代码示例
2014/06/12 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
直接生成打开窗口代码,不必下载
2008/05/14 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
通过url查找a元素应用案例
2014/04/29 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
Web打印解决方案之普通报表打印功能
2016/08/29 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
JS学习笔记之数组去重实现方法小结
2019/05/29 Javascript
vue.js实现只能输入数字的输入框
2019/10/19 Javascript
谈一谈vue请求数据放在created好还是mounted里好
2020/07/27 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python实现将文本转换成语音的方法
2015/05/28 Python
Python实现的随机森林算法与简单总结
2018/01/30 Python
python学生管理系统
2019/01/30 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
学校班班通实施方案
2014/06/11 职场文书
计划生育标语
2014/06/23 职场文书
计划生育证明格式范本
2014/09/12 职场文书
升职自我推荐信范文
2015/03/25 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
泰坦尼克号观后感
2015/06/04 职场文书
《老人与海鸥》教学反思
2016/02/16 职场文书