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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
理解Javascript_06_理解对象的创建过程
Oct 15 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
vue使用iframe嵌入网页的示例代码
Jun 09 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
clipboard在vue中的使用的方法示例
Oct 19 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
webpack结合express实现自动刷新的方法
May 07 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 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
打造计数器DIY三步曲(中)
2006/10/09 PHP
php绘制一条直线的方法
2015/01/24 PHP
PHP使用适合阅读的格式显示文件大小的方法
2015/03/05 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
javascript 一个自定义长度的文本自动换行的函数
2007/08/19 Javascript
小议javascript 设计模式 推荐
2009/10/28 Javascript
高性能JavaScript DOM编程(1)
2015/08/11 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
bootstrap配合Masonry插件实现瀑布式布局
2017/01/18 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
vue的事件绑定与方法详解
2017/08/16 Javascript
vue源码学习之Object.defineProperty对象属性监听
2018/05/30 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
2019/09/11 Javascript
vue倒计时刷新页面不会从头开始的解决方法
2020/03/03 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
python 通过 socket 发送文件的实例代码
2018/08/14 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
python os.path.isfile 的使用误区详解
2019/11/29 Python
python几种常用功能实现代码实例
2019/12/25 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
Python urllib3软件包的使用说明
2020/11/18 Python
StubHub希腊:购买体育赛事、音乐会和剧院门票
2019/08/03 全球购物
解释一下Windows的消息机制
2014/01/30 面试题
软件测试笔试题
2012/10/25 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
人民调解协议书
2016/03/21 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android
Java 在线考试云平台的实现
2021/11/23 Java/Android