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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
JS短路原理的应用示例 精简代码的途径
Dec 13 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
如何高效率去掉js数组中的重复项
Apr 12 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
javascript移动端 电子书 翻页效果实现代码
Sep 07 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 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 购物车实例(申精)
2009/05/11 PHP
php把数组值转换成键的方法
2015/07/13 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
javascript 网页跳转的方法
2008/12/24 Javascript
img标签中onerror用法
2009/08/13 Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
2013/12/13 Javascript
教你用AngularJS框架一行JS代码实现控件验证效果
2014/06/23 Javascript
jquery实现textarea 高度自适应
2015/03/11 Javascript
JavaScript里实用的原生API汇总
2015/05/14 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
浅谈Vuejs Prop基本用法
2017/08/17 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
layui多图上传实现删除功能的例子
2019/09/23 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
使用python实现画AR模型时序图
2019/11/20 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
公关关系专员的自我评价分享
2013/11/20 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis