Detailed description of the velocity template makes Java Web html + js modular, and velocityjavaweb

Detailed description of the velocity template makes Java Web html + js modular, and velocityjavaweb

Detailed description of the velocity template makes Java Web html + js Modular

Some basic data on the page or some frequently used parts on other pages can be made into small components independently. The component reserves the call entry, and the required page can be called directly.
, The Display category and search tag in the page are used repeatedly on multiple pages. you can separate the content into components for future development and call:

The classify_search_tag.html file contains HTML nodes and jQuery code;

<! -- Display the usage of classification and search tag components: 1. new parent page call method: goodsClassifyAndSearchTag is called when the page is loaded. getFirstLevelClassify ();/** initialize a level-1 Display category **/2. parent page call method during editing: goodsClassifyAndSearchTag is called during page loading. getClassifyAndSearchTag (String classifys); json String of the ShowClassifyList type. For details, refer to \ js \ standard_v2 \ group \ group_edit.js. groupGoodsObj. getEditClassify (); 3. return to the displayed category and search tag selected on the page, and call goodsClassifyAndSearchTag. returnSelectedClassifyAndTag (); Note: js conflicts may occur. Js is best to load --> <! -- Display classification --> <div class = "row form-horizontal"> <div class = "col-md-12"> <div class = "form-group"> <label class = "col-md-1 control-label pr0 "> display classification </label> <div class =" col-md-1 "> <select class =" form-control "id =" first_classify "onchange =" goodsClassifyAndSearchTag. getSecondClassify (this) "> <option value =" 0 "> select </option> </select> </div> <div class =" col-md-1 "> <select class =" form-control "id =" second_classify "Onchange =" goodsClassifyAndSearchTag. getThirdClassify (this) "> <option value =" 0 "> select </option> </select> </div> <div class =" col-md-1 "> <select class =" form-control "id =" third_classify "onchange =" goodsClassifyAndSearchTag. getSearchTag (this) "> <option value =" 0 "> select </option> </select> </div> <! -- Search tag --> <div class = "row mb15"> <div class = "col-md-12"> 
The location of the module in the HTML file of the page is referenced by velocity:

#parse("/classify_search_tag.html")
Call the entry method in the js file of the page:

New call

$ (Function () {goodsClassifyAndSearchTag. getFirstLevelClassify ();/** initialize a level-1 Display category **/});
Edit call:
$ (Function () {goodsClassifyAndSearchTag. getClassifyAndSearchTag ("required parameter");/** display Display category and search tag **/});
Obtain the selected return value:
goodsClassifyAndSearchTag.returnSelectedClassifyAndTag()
Thank you for reading this article. I hope it will help you. Thank you for your support for this site!