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 相关文章推荐
jQuery之网页换肤实现代码
Apr 30 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
javascript 闭包详解
Jul 02 Javascript
JavaScript ParseFloat()方法
Dec 18 Javascript
浏览器兼容的JS写法总结
Apr 27 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
javaScript强制保留两位小数的输入数校验和小数保留问题
May 09 Javascript
js时间转换毫秒的实例代码
Aug 21 Javascript
vue中使用rem布局代码详解
Oct 30 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 中的一些经验积累
2006/10/09 PHP
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
php批量转换文件夹下所有文件编码的函数类
2017/08/06 PHP
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
javascript获取当前的时间戳的方法汇总
2015/07/26 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
2017/04/27 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
Vue-input框checkbox强制刷新问题
2019/04/18 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
微信小程序如何实现五星评价功能
2019/10/15 Javascript
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
一篇不错的Python入门教程
2007/02/08 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
python实现维吉尼亚算法
2019/03/20 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python使用正则表达式分割字符串的实现方法
2019/07/16 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Djang的model创建的字段和参数详解
2019/07/27 Python
python对XML文件的操作实现代码
2020/03/27 Python
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
Algenist奥杰尼官网:微藻抗衰老护肤品牌
2017/07/15 全球购物
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
一篇.NET面试题
2014/09/29 面试题
管理心得体会
2013/12/28 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
质量负责人岗位职责
2015/02/15 职场文书
休学证明范本
2015/06/19 职场文书
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript