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 相关文章推荐
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
Jan 22 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
详解javascript中的变量提升和函数提升
May 24 Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JS面试题中深拷贝的实现讲解
May 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
英雄试炼之肉山谷—引领RPG新潮流
2020/04/20 DOTA
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
JS 两日期相减,获得天数的小例子(兼容IE,FF)
2013/07/01 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
2013/11/23 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
vue两个组件间值的传递或修改方式
2018/07/04 Javascript
ES6 迭代器与可迭代对象的实现
2019/02/11 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
[07:47]DOTA2国际邀请赛采访专栏:探访Valve总部
2013/08/08 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
python字典的常用操作方法小结
2016/05/16 Python
给我一面国旗 python帮你实现
2019/09/30 Python
Python : turtle色彩控制实例详解
2020/01/19 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python实现粒子群算法
2020/10/15 Python
用python对oracle进行简单性能测试
2020/12/05 Python
韩都衣舍天猫官方旗舰店:天猫女装销售总冠军
2017/10/10 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
英国哈罗德园艺:Harrod Horticultural
2020/03/31 全球购物
介绍一下Java中的static关键字
2012/05/12 面试题
一道Delphi面试题
2016/10/28 面试题
暑假实习求职信范文
2013/09/22 职场文书
电子商务专业推荐信范文
2013/12/02 职场文书
酒店司机岗位职责
2013/12/14 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
大学生村官工作总结2015
2015/04/09 职场文书
工作态度不好检讨书
2015/05/06 职场文书
解决Navicat for MySQL 连接 MySQL 报2005错误的问题
2021/05/29 MySQL
MongoDB数据库的安装步骤
2021/06/18 MongoDB
Python如何加载模型并查看网络
2022/07/15 Python