Asp.net+jquery a drop-down control that loads data with a scroll bar

Source: Internet
Author: User
This kind of demand seems to feel that it is not very reasonable, because the data more so pull down no matter from the human or machine operation are more painful.

No way because of the demand down, only according to demand operation. Find a lot of related controls on the internet feel a bit large, accounting for more resources. No way to spend half a day to make a semi-finished custom control, take out to share, if you have a master to see more guidance.

Requirements: Ajax scrolling scroll bar load data drop-down list
Control Name: Webcombo
Technology used: ASP. NET (C #), jquery,asp. NET general processing files (. ashx)

Drop-down list implementation: Use the div to simulate the drop-down list, input and image simulation drop-down boxes. The final results are as follows

Let's start by analyzing the plugin notation for jquery here.
Ajax loaded with jquery Ajax complete

$.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> '); }

The scroll bar scrolling data is completed by the Onscroll event of the drop-down Div, with the following core code:

$ (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); } });
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: info-contact@alibabacloud.com 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.