Page building and JS Front end have to say that thing

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

As a micro-blog page construction Engineer, the main responsibility is to use HTML&CSS, high-quality static page to complete the production, to ensure that the project completed on time. and the page needs the JS effect to the downstream of the JS front-end engineers to do. On Weibo, these two jobs are separate. But in everyone's mindset may feel that these two posts should be done by a person to complete the best, after all, the page construction engineer to write HTML structure is not necessarily the kind of JS engineer, JS engineers may have more efficient way. Therefore, before the page construction, it is best to communicate with JS engineers, the implementation of the plan to determine good.

But in the actual project process, when the page is built, the product manager may not be scheduled to the JS resources, then we can only according to the needs of the product and their own ideas to write HTML structure, not only to take into account the design of the restoration of the manuscript, browser compatibility, the future may be added to the foreseeable location of new features, Also consider how to write HTML structure can make JS the most convenient to complete the product interactive effect. As a responsible page builder, it says Alexander! So, we often look at the page source, we will find such a comment, to tell JS engineers how to operate the DOM structure.

Sometimes in order to achieve the most simple, we have to consider for a long time, the London Olympic Games, Weibo first to the right to add an Olympic gold medal list of the module, the request has to put up and expand the button, used to display different content.

This is a very common interactive effect for the site. Specific HTML implementation may have students think, do two Div, each contains expanded content and content. When you click the Expand button, one appears, another is hidden; This kind of thing itself is not right and wrong, can achieve the effect is good. However, as the module appearing on the homepage of Weibo, and appearing in the position of the first screen, the optimization of performance must be done enough. Can try to do in our CSS layer, never put it to JS side to do. My approach is to put up the spread of the style are written, put together, so that JS in the default expansion or click to expand when the display turn_olym_on, in the click to replace the Turn_olym_off, so JS is just a class name to replace the amount of code, For the two buttons that expand, I also show and hide by changing the class name.

Specific HTML code:

Here put all the code used together, put a state without the display of hidden, such as the expansion of the state, class= "Show_less w_linecolor" div and expanded button class= "W_moredown" Do not display, You can write on the outermost div:

CSS temporarily hides these two elements:

And when it is closed, the outermost div becomes:

The CSS then displays the two previously hidden elements and hides the list of four or five class= "No_45″ 's TR tags, class=" Show_more "and" class= "buttons that need to be hidden:

In this way, only need JS in the click of the time to put turn_olym_on into Turn_olym_off, and click on the expansion of the Turn_olym_off replaced by turn_olym_on, the rest of the hidden show all have CSS to fix.

Summary：

It is our common goal to understand some upstream and downstream work, so that the upstream and downstream communication smoother, improve work efficiency.

The work of page construction faces a lot of challenges, the new tags of HTML5, the various APIs natively supported by advanced browsers, the new CSS3 properties, etc. All need us to learn, do not ask for complete mastery, but to understand the familiar, can know what is going on. Applying new knowledge to practical projects is good for the company and for the team.

Fang, what do you think?

(Weibo UDC original blog, reproduced please indicate the source)