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 相关文章推荐
获取DOM对象的几种扩展及简写
Oct 09 Javascript
创建你的第一个AngularJS应用的方法
Jun 16 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
BootStrap中Tab页签切换实例代码
May 30 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
小程序实现发表评论功能
Jul 06 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 09 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
Javascript节流函数throttle和防抖函数debounce
Dec 03 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 empty() 检查一个变量是否为空
2011/11/10 PHP
php原生数据库分页的代码实例
2019/02/18 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
javascript 常用关键字列表集合
2007/12/04 Javascript
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
html+js+highcharts绘制圆饼图表的简单实例
2016/08/04 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
js与jquery分别实现tab标签页功能的方法
2016/11/18 Javascript
解析JavaScript实现DDoS攻击原理与保护措施
2016/12/26 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
2017/01/11 Javascript
详解nodeJS之二进制buffer对象
2017/06/03 NodeJs
Angular2 自定义validators的实现方法
2017/07/05 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
JS/jQuery实现简单的开关灯效果【案例】
2019/02/19 jQuery
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
九步学会Python装饰器
2015/05/09 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
python微信跳一跳系列之棋子定位颜色识别
2018/02/26 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
windows下python和pip安装教程
2018/05/25 Python
详解Python正则表达式re模块
2019/03/19 Python
Python对象转换为json的方法步骤
2019/04/25 Python
纯css3实现的动画按钮的实例教程
2014/11/17 HTML / CSS
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
德国二手设计师时装和复古时装跳蚤市场:Mädchenflohmarkt
2020/11/09 全球购物
感恩节活动方案
2014/01/27 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
Django实现聊天机器人
2021/05/31 Python