ホームページ >ウェブフロントエンド >jsチュートリアル >data_jquery をロードするための asp.net jquery スクロール バー ドロップダウン コントロール

data_jquery をロードするための asp.net jquery スクロール バー ドロップダウン コントロール

WBOY
WBOYオリジナル
2016-05-16 18:24:381169ブラウズ

データが多すぎるため、人間が行うか機械が行うかにかかわらず、引き下げるのはより困難であるため、この要求はあまり合理的ではないようです。

需要があるから仕方がないので、需要に合わせて運営するしかありません。インターネット上で関連するコントロールをたくさん見つけましたが、どれも少しかさばり、多くのリソースを消費するように思えました。中途半端なカスタムコントロールを作成するのに半日も費やすことはできませんので、それを見た専門家がいる場合は、アドバイスをお願いします。

要件: データのドロップダウン リストをロードするための AJAX スクロール バー
コントロール名: Webcombo
使用されるテクノロジ: ASP.NET (C#)、jQuery、ASP.NET 一般処理ファイル (. ashx)

ドロップダウン リストの具体的な実装: DIV を使用してドロップダウン リストをシミュレートし、入力と画像を使用してドロップダウン ボックスをシミュレートします。最終的な結果は以下のようになります

data_jquery をロードするための asp.net jquery スクロール バー ドロップダウン コントロール
まずはjQuery上でプラグインの書き方を解析しましょう
AJAXの読み込みはjQuery Ajaxで完了します

コードをコピー コードは次のとおりです。

$.ajax({
type: options. getMethod、
url: オプション。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('データ接続エラー!' e ''); >}


スクロール バーのスクロール データは、ドロップダウン DIV の onscroll イベントによって完了します。具体的なコア コードは次のとおりです:



$(showbox).scroll(function(){
if(options.total) ==$(this).children("ul").children("li ").length)
return;
var スクロールトップ=$(showbox).attr('scrollTop');スクロール高さ=$(showbox).attr('scrollHeight');
var windowheight=$(showbox).attr('clientHeight');
var スクロールオフセット=20;
$(options.loadBox) css('top',scrolltop);
if(scrolltop>=(scrollheight-(windowheightscrolloffset))&&!loading)
{
loading=true; show();
options.total=$(this).children( "ul").children("li").length;
$.WebComboGetData(showbox,options,true);
});


プラグインの完全なコードは、ソース ファイルにあります。ファイル名は、simulator.js
実際には、データのスクロールとロードのための jQuery プラグインです。これは、Rogue がこの関数を asp.net カスタム コントロールにカプセル化する場所がたくさんあるためです。なぜ半完成品と言われるのかというと、カスタムコントロールが少々非人道的で、専門家が見たら指摘するからです。特定のコードはダウンロード後に見ることができます。私はコントロール制作の達人ではないので、ここでは恥をさらしません。質問や提案がある友達は、話し合いの場に持ち込むことができます。

asp.net jQuery スクロール バー スクロール ロード データ コントロール ソース コード ダウンロード
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。