Implement the tab of the C/S mode in the Web

Before we explore the tab of the C/S mode, let's summarize what the B/S tab is usually like. The Common tab design in the Web is often used to display a large amount of information in sections to improve the utilization of page space, which is usually static or simple to interact with. The technology for dynamically loading tab content through Ajax is also designed for this scenario.

With the development of web technology, more and more desktop applications are transforming to Web applications. In this process, many of the application scenarios of C/s mode will inevitably be ported to the Web. However, the relatively weak interaction of B/S model determines that some transplants are difficult to achieve or not effective. The tab design of the C/s mode is one of them.

The so-called C/S Mode tab is actually designed to work on multiple objects at the same time without having to open multiple applications to improve productivity. This application scenario in the B/s transplant process, if the use of B/s commonly used tab technology, through AJAX Dynamic loading tab content, there will be some technical difficulties:

• In the B/s architecture, the same Type of tab page is usually the same physical page, for example, order A and Order B's tab page is actually the corresponding order.php this page, but the requested get parameter is not the same. This way, if both the tab of order A and order B are loaded, then the HTML and JS of the two pages are likely to collide.
• We need to distinguish different tab pages with an identity and avoid opening the same tab page repeatedly. For example, if order A is already open, if you try to open order a again, then the tab of order a should be activated instead of opening an order a.
• If you open a large number of tabs, or the tab page with complex interactions, a lot of content, the browser is prone to performance problems, the speed becomes very slow.
• There are a lot of potential, trivial problems that can make us crazy at any moment. At this point, I have a painful lesson ...

In fact, there are many ways to solve these problems. After some attempts, failures, and summaries, I chose a modern, retro-style approach: dynamically generating an iframe and distinguishing the different tabs with the SRC attribute of the IFRAME. With this approach, the problem is solved, and the only disadvantage is that the interaction between the tab page and the home page becomes more complex. Please click here to see the demo. This demo simulates a view, modify the order of the application scenario, the main implementation of these features:

1. When you add a tab, you dynamically generate an IFRAME. And when the tab is switched, all the IFRAME is not refreshed.
2. The height of the IFRAME's highly adaptive content.
3. When you try to open an existing tab, the tab is activated and the same tab is not opened repeatedly.
4. The tab can be closed, and the tab corresponding IFRAME will be removed when it is closed.

Here we will step-by-step implementation of the above functions.

The first step: writing the demo framework

This demo uses the jquery and jquery UI libraries, the file structure

which

• index.html is the home page of the demo.
• order.php is the detailed page of the order, and each Order Details tab is the page loaded.
• index.css is the style sheet for the home page.
• Index.js is the homepage of the JS script.

Due to space limitations, there is no code, the demo source code can be downloaded at the end of the article.

Step Two: Initialize jquery tab

Now we can start writing the index.js. The first is to initialize tab:

// Initialize tab$ ("#tabs" ). Tabs ({    ' <li><a href= ' #{href} ' >#{label}</a><a class= ' Close "href=" # ">x</a></li>",    truefunction(event, UI) {      this). Tabs ("Select", "#" + ui.panel.id);});

The tabtemplate in the initialization parameter is prepared for the subsequent closing tab. A Tabsadd event handler is also bound to check the new tab immediately after the tab is added.

Step three: Dynamically generating an IFRAME

If you open the page now, only see the Order List a tab, below we let the list of connections are clicked, add a new tab to display the corresponding order details:

//Click the Add tab page$ (". List A"). Click (function(e) {e.preventdefault (); varhref = $ ( This). attr ("href" ); varOrderID = href.substring (Href.indexof ("-") + 1 ); varTabID = "order-" +OrderID; varurl = "Order.php?orderid=" +OrderID; varLabel = "Order Details-" +OrderID; AddTab (tabid, URL, label);}); //Add Tab InterfacefunctionaddTab (ID, URL, label) {varMaintab = $ ("#tabs" ); varPanel = $ ("<div/>"). attr ({"id": ID}).         AppendTo (Maintab); Maintab.tabs ("Add", "#" +ID, label); $( "<iframe/>"). attr ({"frameborder": "0",        "Scrolling": "No",        "Allowtransparency": "True",        "SRC": URL}). CSS ({"width": "100%",        "Height": "100px"}). Load (function() {        variframe = $ ( This ); Iframe.height (Iframe.contents (). Find ("Body"). Height ()); }). AppendTo (panel);}

In the above code, we have written a method as a common interface for adding tab. When we click on an order link, we call this Add tab interface and do these things sequentially:

1. Generate a Div, as a panel of jquery tab, which is the container for the IFRAME.
2. The interface that calls jquery tab adds a tab to the div you just made and selects the tab (the Tabsadd event you just bound).
3. Create and initialize an IFRAME, and then add it to the div you just generated. Where, at initialization time, we added a handler for the Load event to the IFRAME to allow the IFRAME to adapt to the height of the content.

Fourth step: Prevent double-opening tab

Now if you click on the same link in the order list more than once, we will open more than one tab. To avoid this, we need to determine whether the tab has been opened or not, and if it has already been opened, the tab (4 lines to 15 lines) before the tab is added:

//Add Tab InterfacefunctionaddTab (ID, URL, label) {varMaintab = $ ("#tabs" ); varAdded =false; $( "iframe", Maintab). each (function(i) {varsrc = This. src.substring ( This. Src.lastindexof ("/") + 1 ); if(src = =URL) {Added= $( This );         }    }); if(added) {Maintab.tabs ("Select", "#" + added.parent (). attr ("id" )); return; }         varPanel = $ ("<div/>"). attr ({"id": ID}).         AppendTo (Maintab); Maintab.tabs ("Add", "#" +ID, label); $( "<iframe/>"). attr ({"frameborder": "0",        "Scrolling": "No",        "Allowtransparency": "True",        "SRC": URL}). CSS ({"width": "100%",        "Height": "100px"}). Load (function() {        variframe = $ ( This ); Iframe.height (Iframe.contents (). Find ("Body"). Height ()); }). AppendTo (panel);}

Fifth Step: Close tab

Finally we make the close link on the tab work. The usual way to do this is to bind closing the tab handler every time the tab is added (Tabsadd event). But here we're going to do this with a new feature in jquery 1.3,--live event:

// Dynamic bind Close tab event function (e) {    e.preventdefault ();     var  This ). Parent ());    " #tabs "). Tabs (" Remove ", index);});

Simply put, the live event is a pre-existing element-bound event handler that may not exist in the DOM, but will be dynamically added to the DOM in the future. For more information on live event, please refer to jquery documentation.

So far, all the features in the demo have been implemented. This implementation of the C/S Mode tab, for the moment, I think is not perfect, but it is the most feasible. Some other common requirements that may arise in real-world development, such as the loading effect of loading an IFRAME, will be easier to implement.

Implement the tab of the C/S mode in the Web