asp.net+jquery滚动滚动条加载数据的下拉控件_jquery
这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦。
没办法由于需求下来了,只能按需求操作。网上找了很多相关控件都感觉有点庞大,占资源比较多。没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点。
需求:AJAX滚动滚动条加载数据的下拉列表
控件名称:Webcombo
所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx)
下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框。最终结果如下图
先分析下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('data connect error!'+e+'');
}
而滚动条滚动加载数据则由下拉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滚动条滚动加载数据控件源代码下载

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

與 Windows 10 不同,Windows 11 具有新的現代“流暢捲軸”,當使用者與之互動時會改變形狀。 Fluent 捲軸本質上是動態的,它們會在不同的外形尺寸或當您更改視窗大小時自動縮放,並且它目前在設定、媒體播放器等應用程式中使用。根據微軟的一項新提議,Google瀏覽器可能很快就會擁有流暢的捲軸功能。微軟在一份提案中表示,他們希望對 Chrome 中的舊捲軸進行現代化

react隱藏滾動條滾動的方法:1、開啟對應的「react-native」檔案;2、透過horizontal設定水平滾動;3、透過設定「showsHorizontalScrollIndicator」的值為「false」來隱藏水平捲軸即可。

近日有一些小夥伴諮詢小編Mac系統滾動條怎麼設定始終顯示?下面就為大家帶來了Mac系統滾動條設定始終顯示的方法,有需要的小伙伴可以來了解了解哦。第一步:在系統開始選單,選擇【系統偏好設定】選項。第三步:在系統偏好設定頁面,選擇【通用】選項。第三步:在通用頁面,選擇【始終】顯示捲軸。

當捲軸未啟動或未使用時,Windows作業系統允許使用者指定是否應自動隱藏它們。另一方面,Windows預設啟用捲軸。如果任何使用者想在他們的系統上啟用或停用此功能,請參閱這篇文章,以幫助他們了解如何操作。如何在Windows11中啟用或停用始終顯示捲軸1.按住Windows+U鍵將開啟系統上的輔助功能頁面。 2.透過點擊它來選擇視覺效果,它位於輔助使用頁面的頂部。 3.如果要在系統上啟用始終顯示捲軸功能,請點擊始終顯示捲軸切換按鈕將其打開,如下所示。 4.您可以隨時透過點擊「始終顯示

標題:如何寫出帶有捲軸的HTML文字方塊程式碼HTML中的文字方塊是常用的使用者輸入控制項之一,在某些情況下,文字內容過長時會導致文字方塊顯示不完整。這時,我們可以透過新增捲軸來讓文字方塊支援滾動查看。本文將詳細介紹如何撰寫具有捲軸效果的HTML文字方塊程式碼,並給出具體的程式碼範例。一、使用textarea元素建立文字方塊在HTML中,我們使用textarea元素來建立文字框

HTML滾動條怎麼做,需要具體程式碼範例在網頁設計中,滾動條是一個常見的元素,它可以使網頁在內容過多的情況下,能夠方便地滾動查看。本文將介紹如何使用HTML建立捲軸,並提供具體的程式碼範例。首先,我們需要了解HTML中建立捲軸的基本原理。 HTML中可以使用CSS樣式來控制捲軸的外觀和行為。具體來說,我們可以使用CSS屬性對捲軸進行設置,其中常用的屬性有o

如何將捲軸設定為始終可見在現代版本的MacOS中,從Ventura13.0開始,您可以透過執行下列操作將捲軸設定為始終可見:前往Apple選單並選擇「系統設定」前往「外觀」尋找「顯示捲軸」並選擇「始終」旁的開關變更立即可見,您將立即在Mac上任何存在捲軸或捲動區域的地方看到捲軸。無需再猜測,您可以立即直觀地看到可以滾動和不能滾動的位置。

css實作捲軸不佔用高度的方法:1、開啟對應的HTML檔案;2、尋找原始程式碼「overflow-x: auto;」;3、將「overflow-x: auto;」屬性中的值修改為「 overflow-x: overlay;」即可使捲軸不佔據位置。
