+ jquery scroll bar to load data drop-down controls

Source: Internet
Author: User

This kind of requirement seems to be not very reasonable, because the pull-down of more data, whether from people or machines, is quite painful.

There is no way to operate as needed. Many related controls found on the internet feel a little huge, occupying a large amount of resources. There is no way to create a custom control for a semi-finished product by yourself for half a day and share it with you. If you have any experts, please give me more advice.

Requirement: a drop-down list of data loaded by AJAX scroll bars
Control name: Webcombo
Technologies used: ASP. NET (C #), jQuery, and ASP. NET generally process files (. ashx)

Implementation of the drop-down list: Use DIV to simulate the drop-down list, and input and image to simulate the drop-down box. The final result is as follows:

Let's analyze the jQuery plug-in writing.
JQuery AJAX is complete when Ajax is loaded.
Copy codeThe Code is as follows:
$. Ajax ({
Type: options. getMethod,
Url: options. jsonUrl,
Data: params,
Success: function (data ){
If (isScroll)
$. CreateListItem (showbox, data, options );
$. CreateBox (showbox, data, options );
Complete: function (){},
Error: function (e ){
Optional (options.loadbox).css ('background-image', 'None ');
$ (Options. loadBox). append ('<span> data connect error! '+ E +' </span> ');

The rolling data loading of the scroll bar is completed by the onscroll event of the drop-down DIV. The core code is as follows:

Copy codeThe Code is as follows:
$ (Showbox). scroll (function (){
If (options. total = $ (this). children ("ul"). children ("li"). length)
Var scrolltop = $ (showbox). attr ('scrolltop ');
Var scrollheight = $ (showbox). attr ('scrollheight ');
Var shadowwheight = $ (showbox). attr ('clientheight ');
Var scroloffset = 20;
Optional (options.loadbox).css ('top', scrolltop );
If (scrolltop> = (scrollheight-(windowheight + scroloffset ))&&! Loading)
Loading = true;
$ (Options. loadBox). show ();
Options. total = $ (this). children ("ul"). children ("li"). length;
$. WebComboGetData (showbox, options, true );

The complete code of this plug-in can be found in the source file. File Name: simulateddl. js
In fact, this function can be implemented after the jQuery plug-in of rolling data loading by the scroll bar is completed, but it is encapsulated into the custom control by many rogue places in the project. The reason why semi-finished products are some of the user-defined custom controls that are not human-friendly, experts can see and give pointers. The specific code can be downloaded and viewed. I am not a master of controls, so I will not be moved out to make a mistake. If you have any questions or suggestions, you can discuss them. + jQuery scroll bar scroll load data control source code download

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.