Web Development tips: Creating pop-ups with custom data properties

When developing a web app, you sometimes use JavaScript to get information outside of the document, and in some cases we need some tricks to handle the extra information to ensure that the Web app works. In general, the trick is to plug additional information into the event handler or misuse the REL attribute or class attribute to facilitate the injection behavior. Thanks to the HTML specification introduced custom data attributes, so that the past gone.

All custom data properties begin with a prefix for the database, and the validator for the HTML document ignores it when it is validated. Developers can add custom data attributes to any element, which can be a photo's metadata, latitude or longitude coordinates, or the size of a pop-up window. Best of all, you can use custom data properties in almost all browsers, because we can easily use JavaScript to get them.

1, the separation of behavior and content, or why set the onclick is not good

In the past few years, the pop-up has been a bad name, and that's usually a natural thing. Pop-ups are often used to display ads to users, or to disguise as spyware or viruses that are not suspected, and the worst is to cheat personal information and sell it later. Therefore, it is not surprising that most browsers have plug-ins that block pop-up windows.

However, pop-ups are not always bad. Developers of web apps often need to rely on pop-ups to display online Help information, additional options, or other important user interface features to the user. To keep the pop-up window from getting boring, we need to implement it in an unobtrusive way. When you browse Awesomeco's Human Resources page, you'll see several links that open the pop-up window that shows the terms of service, most of which are implemented as follows:

The way a popup is triggered by a link is quite common. In fact, JavaScript novices are most likely to use this approach when they learn how to implement pop-up windows. Before we can further achieve the desired effect, we want to point out two problems with this approach.

2. Improve accessibility

The destination address of the link is not set! If JavaScript is disabled, the link will not be able to guide the user to the page. This is a very serious problem that we need to resolve immediately. I recommend that developers never omit the href attribute, and do not assign "longevity" and similar values to the H ref property under any circumstances. Now, we assign the address of the resource shown in the popup window to the H ref attribute, the code is as follows:

In the above code, we read the href attribute value of the A element through JavaScript code, and then we get the link address of the resource. Building accessible pages, the first step is to ensure that JavaScript is disabled and all functions are still functioning.

3. Obsolete onclick

Note the retention behavior is separated from the content, just as you would keep the style information separated by a linked style sheet. In the beginning, the use of the onclick will bring convenience, but imagine that there are 10 links on the page, then you will see the OnClick method

Out of control of the scene. You will be able to write repetitive JavaScript code over and over again. If you are generating browser-side code from server-side code, you are adding JavaScript events that can lead to a lot of unnecessary HTML code.

The workaround is to assign a recognizable CSS class name to each link:

The above code uses the jquery selector to get the element with the class name popup, and then we add a listener for each of the element's click events. When someone clicks the link, the code in the click Method is executed.

The Preventdefault method is used to block the default click event behavior. In the example, it prevents the page from jumping.

We also forgot one thing-the size information and location information of the window is not set, and we set it in the code that is not optimized. We hope that even page designers who are unfamiliar with JavaScript code can set the window size on a per-link basis.

4, custom data properties to rescue

When you create a wer app that has JavaScript applied, the situation I just mentioned is more common. As you can see, it is advisable to store the desired height and width of the window in your code, but the OnClick method has many drawbacks. We can change the way we embed attributes on elements to implement them. Now what to do is to transform the link into the following form:

Only one step away from completion, modify the previously written click event to crawl the individual custom data properties set on the link, and then pass it to the Window.Open method.

Knock it off! Now, when you click the link, a new window opens.

5. Fallback

As long as the browser supports. JavaScript, custom data properties will work as expected. Custom data properties do not cause errors in the browser, and the HTML document type declaration guarantees that the document is valid because properties that begin with data are ignored.

6. Future Prospects

Once new tags and attributes are widely supported, we can use them to do some interesting things. With the plot style table, we can easily identify and hide the navigation and the tail of the article:

With scripting language, we are able to quickly identify all articles within a site or page. But most importantly, the tags we use can properly describe what they're tagged in, so we can write better stylesheets and more powerful JavaScript code.

Developers can embed a variety of information into tags with custom data properties. With custom data properties, using Javescript to navigate to all data-remote=true form labels, you can tell which form labels should be submitted using a leveling AX, which is consistent with the practice in the RUBV on Rails framework.

We can also use custom data properties to cache dates and times on the page and display the date and time as a baseline for the user's time zone. Simply place the time in the HTML page in UTC, and the client converts it to the user's local time. Custom data properties allow developers to embed real, useful data in a page, and more and more frameworks and libraries take advantage of it. I'm sure you'll find it a lot of use in your daily work.

At this point, we can eradicate the abuse of Div once and for all.

This article is from the >> school; reprint Please specify: http://www.sxt.cn/u/13421/blog/9066

Web Development tips: Creating pop-ups with custom data properties