"Dou Medical" "18" Web application development 20 days

This article through the first page content to explain the Web page drag and drop to get the current page data, features similar to the Google View image, which involves the following five steps:

(1) Read the first page of data when the page is first loaded

(2) Trigger scroll bar drag action

(3) Ajax asynchronously reads the next page of data

(4) The service side encapsulates the data as JSON return

(5) drawing page data through DOM elements on the page

Next follow these five steps to 650) this.width=650; "src=" Http://img.baidu.com/hi/bobo/B_0059.gif "alt=" B_0059.gif "/>

1. The Main.js file is loaded when the page is first loaded. Add the Current_item_index variable in this file to identify the index value of the current topic, add Method Getpagecontent () to invoke when the page loads, and get the first page of data.

/** * Index value that identifies the last record of the page, sorted in descending order of time */var Current_item_index = 0;$ (document). Ready (function () {//Get home content getpagecontent (CUR Rent_item_index);});    function Getpagecontent (currentindex) {var data = {"Currentindex": Currentindex}; Asyncrequest ("Maincontent.data", data, function (Result) {//implemented by 3rd step});

2, trigger the scroll bar drag action. Bind a scroll event to a window while main.js is loading

$ (document). Ready (function () {//slightly getbreifuserinfo (); Monitor scroll bar Drag event bindscrollevent ();});

"Remark": Due to the continuous drop of the scroll bar, you need to add an identity isqueryflag, if you are looking for data, no longer respond to the drop-down event

/**

* Whether data identification is being queried

*/

var isqueryflag = false;

3, Ajax asynchronously reads the next page of data. Implement the Bindscrollevent () method:

/** *  bind scroll Bar drag event  */function bindscrollevent () {    var  scrollbardistance = 0; //  the current position of the scroll bar     var documentheight =  0; //  Document Height     var windowheight = $ (window). Height ();  / /  the current window height     $ (Windows). Scroll (function () {         scrollbardistance = $ (document). ScrollTop ();         documentheight = $ (document). Height ();         if ( Scrollbardistance + windowheight >= documentheight)          {            if (isQueryFlag ===  true)             {                 return;            }             //  Get page Content              getpagecontent (Current_item_index);         }    });}

4. The service side encapsulates the data as JSON return

(1) Modify the configuration file System-data.xml to associate the drag-and-drop action method with the business processing logic that reads the data from the server.

<!--get System home content information--><business name= "maincontent" business-class= "com.medical.server.data.MainDataAction"/ >

(2) Define the service-side read Data business processing class Com.medical.server.data.MainDataAction

@Overridepublic  string execute ()  throws FrameException{    //  Gets the current record index value     string currentindex = getparameter ("Currentindex");     if  (Frameutil.isempty (currentindex))     {         topicresultbean result = new topicresultbean ();         result.seterrorcode (Frameerrorcode.request_param_error);         return gson.tojson (Result);    }         //  reading data from the database     int index = integer.valueof ( Currentindex);     list<topicdao> topiclist = topicutil.gettopiclist ( Index);    if  (Frameutil.isempty (topiclist))     {        &nbSp Topicresultbean result = new topicresultbean ();         result.seterrorcode (Frameerrorcode.request_content_empty);         return gson.tojson (Result);    }         //  What you need to assemble the interface     List<TopicBean> topicBeanList = new  Arraylist<topicbean> ();    for  (topicdao element : topiclist)     {        UserDAO author =  Userutil.getuserbyname (Element.getuserid ());                 topicbean bean = new topicbean ();         bean.setusername (Author.getuserid ());         Bean.setusericon (Author.geticoNpath ());         bean.setnickname (Author.getusersign ());                 bean.settopicid ( Element.gettopicid ());         bean.settopictitle (Element.getTopicTitle ());         bean.setcommentnum (Commentutil.getcommentnum ( Element.gettopicid ());         bean.settopicsummary (GetTopicSummary ( Element.getprescript ()));         bean.settopictime ( Element.gettopictime ());                 topicbeanlist.add (Bean);    }    //  return JSON results      topicresultbean result = new topicresultbean ();     Result.seterrorcode (0);     result.settopicList (topicbeanlist);     return gson.tojson (result);} 

Remarks: In order to make the content concise, some processing functions are omitted in the middle.

5, the page data through the DOM elements drawn on the page

(1) Read data asynchronously and judge the legitimacy of the data

  Set query Identity isqueryflag = true;asyncrequest ("Maincontent.data",  data, function (Result) {     //  If the read data is not successfully returned directly to     var resultjson = eval ( result);     if (resultjson.errorcode != 0)     {         return;    }    var topiclist  = resultjson.topiclist;    if (!topiclist) {         return;    }        //  Reset Data Current index value     CURRENT_ITEM_INDEX = CURRENT_ITEM_INDEX + topicList.length;         //  manipulating the DOM to draw data onto the page     $.each (topiclist,  function (I, item) {        appenddata (I, item);     });         //  reset Query ID     isqueryflag = false;}); 

(2) Implementation of DOM element drawing

/** *  manipulate the DOM to draw data onto the page  */function appenddata (i, item) {    var  topicitem = $ ("<div />"). attr ("Class",  "Main_item");     Topicitem.appendto ($ ("#main_content_dynamic_id"));    //  Add user avatar            var usericon = $ ("<i />"). attr ("Class",   "Main_item_icon");     usericon.appendto (Topicitem);    //  Add Challenge Content     var content = $ ("<div />"). attr ("Class",  "Main_ Item_content ");     content.appendto (Topicitem);    // >> >>>> Set Challenge topic title      var topwrapper = $ ("<div />"). attr ("Class",  "Main_item_wrapper");     var topictitle = $ ("<div  /> "). attr (" Class ", " MAin_item_title ")     var titlelink = $ (" <a /> ") attr (" href "),   "#"). Text (item.topictitle);     titlelink.appendto (Topictitle);     topictitle.appendto (Topwrapper);     topwrapper.appendto (content);     // >>>>>> Set Challenge topic title     var topictime = $ ("< Div /> "). attr (" Class ", " Main_item_time "). Text (item.topictime);     Topictime.appendto (topwrapper);    // >>>>>> set user name and nickname      var centerwrapper = $ ("<div />"). attr ("Class",  "Main_item_wrapper") ;     var username = $ ("<label />"). attr ("Class",  "Main_item _author "). Text (item.username + ", ");     var usernick = $ (" < Label /> "). attr (" Class ",  " Main_item_nickname "). Text (item.nickname);     username.appendto (Centerwrapper);     usernick.appendto (Centerwrapper);     centerwrapper.appendto (content);     // >>>>>> Set Topic summary information     var middleWrapper  = $ ("<div />"). attr ("Class",  "Main_item_wrapper");    var  topicsummary = $ ("<div />"). attr ("Class",  "Main_item_substance"). HTML ( Item.topicsummary);     topicsummary.appendto (Middlewrapper);     Middlewrapper.appendto (content);    // >>>>>> set up topic affiliate information      var bottomwrapper = $ ("<div />"). attr ("Class",  "Main_item_wrapper") ;     var topicattach = $ ("<div />"). attr ("Class",  "Main_ Item_attach ");     topiCattach.appendto (Bottomwrapper);     bottomwrapper.appendto (content);     // >>>>>>>>>>>> Set topic focus information     var  followlink = $ ("<a />"). attr ("href",  "#");    var  followicon = $ ("<i />"). attr ("Class",  "Main_item_attention");     followicon.appendto (Followlink);     followlink.appendto (TopicAttach);     followlink.text ("Attention");    // >>>>>>>>>>> > Set topic Focus Information     var commentlink = $ ("<a />"). attr ("href",  " # ");     var commenticon = $ (" <i /> "). attr (" Class ", " Main_ Item_discuss ");     commenticon.appendto (Commentlink);     Commentlink.appendto (Topicattach);    &Nbsp;commentlink.text (item.commentnum +  "People review");    // >>>>> >>>>>>> set up topic sharing information     var sharelink = $ ("<a /> "). attr (" href ", " # "),     var shareicon = $ (" <i /> "). attr (" Class ", " Main_item_share ");     shareicon.appendto (Sharelink);     Sharelink.appendto (Topicattach);     sharelink.text ("Share");    //  >>>>>>>>>>>> Set Topic collection information     var favoritelink =  $ ("<a />"). attr ("href",  "#");     var favoriteicon = $ ("<i />"). attr ("Class",  "Main_item_collection");     favoriteicon.appendto ( Favoritelink);     favoritelink.appendto (Topicattach);     Favoritelink.text ("Collection");}

6. Effect Demonstration

(1) Add two records to the data sheet topictable

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/47/5F/wKiom1P56pHDhGuzAAD-vLZtWng669.jpg "title=" Data logging. png "alt=" wkiom1p56phdhguzaad-vlztwng669.jpg "/>

(2) In the browser input http://localhost:8080/medical, the effect is as follows:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M01/47/60/wKioL1P57AyREnk5AAMyG2VYpuI000.jpg "title=". png " alt= "Wkiol1p57ayrenk5aamyg2vypui000.jpg"/>

"Remarks":

1, you can insert more records, you can observe the drag effect 650) this.width=650; "src=" Http://img.baidu.com/hi/jx2/j_0057.gif "alt=" J_0057.gif " />

2, the drag-and-drop event here does not take into account the shrinking and magnification of the window

3, for the sake of brevity, did not increase the return top function

This article is from the "Green Guest" blog, please be sure to keep this source http://qingkechina.blog.51cto.com/5552198/1544928

"Dou Medical" "18" Web application development 20 days