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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
Jun 20 Javascript
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
Jan 25 Javascript
vue下拉列表功能实例代码
Apr 08 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
Dec 25 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 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
下载文件的点击数回填
2006/10/09 PHP
smarty缓存用法分析
2014/12/16 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
js操作textarea 常用方法总结
2012/12/03 Javascript
JS对字符串编码的几种方式使用指南
2015/05/14 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
javascript每日必学之继承
2016/02/23 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
详谈js模块化规范
2017/07/07 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
Python的gevent框架的入门教程
2015/04/29 Python
Python tkinter布局与按钮间距设置方式
2020/03/04 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
python导入库的具体方法
2020/06/18 Python
Python基于Socket实现简易多人聊天室的示例代码
2020/11/29 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5 Geolocation API的正确使用方法
2018/12/04 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
校园新闻稿范文
2015/07/18 职场文书
PyTorch的Debug指南
2021/05/07 Python
CSS3中Animation实现简单的手指点击动画的示例
2021/07/15 HTML / CSS