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 相关文章推荐
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
js 操作符汇总
Nov 08 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
ant design实现圈选功能
Dec 17 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 Javascript
javascript局部自定义鼠标右键菜单
Dec 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从数组中随机抽取一些元素的代码
2012/11/05 PHP
两种php去除二维数组的重复项方法
2015/11/04 PHP
php session的应用详细介绍
2017/03/22 PHP
学习ExtJS Column布局
2009/10/08 Javascript
javascript学习笔记(十五) js间歇调用和超时调用
2012/06/20 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
通过隐藏iframe实现文件下载的js方法介绍
2014/02/26 Javascript
js实现人民币大写金额形式转换
2016/04/27 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
js移动端图片压缩上传功能
2020/08/18 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
2019/11/07 Javascript
JavaScript实现简单计算器功能
2019/12/19 Javascript
JS绘图Flot如何实现可选显示曲线图功能
2020/10/16 Javascript
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
pycharm新建一个python工程步骤
2019/07/16 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python网络编程socket实现服务端、客户端操作详解
2020/03/24 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
pandas创建DataFrame的7种方法小结
2020/06/14 Python
python和go语言的区别是什么
2020/07/20 Python
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
18岁生日感言
2014/01/12 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
谢师宴家长致辞
2015/07/27 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
Python 使用dict实现switch的操作
2021/04/07 Python
vue引入Excel表格插件的方法
2021/04/28 Vue.js
详解Flask开发技巧之异常处理
2021/06/15 Python
python百行代码实现汉服圈图片爬取
2021/11/23 Python
win10滚动条自动往上跑怎么办?win10滚动条自动往上跑的解决方法
2022/08/05 数码科技