Operamasks-ui2.0 + mvc4.0 + ef5.0 three business functional areas and Tab controls (Tab)

In the previous article, the function menu is displayed in a tree. The following describes the main business functional area in the central area of the system layout. You can use the tab control to open multiple tab pages, to facilitate system operations and business operations.

First, let's talk about the initialization of the front-end tab control. In the index view of the home controller, do the following:

1. add reference to the OM-related CSS style sheet in the head label.

@ Styles. Render ("~ // Operamasksui/CSS/default/om-default.css ")

2. Add the following references to the JS file before the </body> tag.

@ Scripts. Render ("~ /Operamasksui/JS/jquery163.min. js ")

@ Scripts. Render ("~ /Operamasksui/JS/operamasks-ui200.min.js ")

3. Add a UL element to the Left area of the layout control, as shown below:

<Div id = "center-panel"> <Div id = "tabs"> <ul> <li> <a href = "# tab1"> welcome </a> </LI> </ul> <Div id = "tab1"> welcome to the MVC development framework </div>

NOTE: If only <Div id = "tabs"> </div> is added, the function is abnormal. This is caused by the imperfection of the OM framework, here I add a default tab to place the welcome information. Of course, you can also place the site map or system description.

4. Compile JS as follows:

        function LoadTabs()        {            $('#tabs').omTabs({                width: 'fit',                height: 'fit',                               closable: true            });        }

The default attribute of width and height is auto. I changed it to 'fit ', that is, the parent container is automatically filled, which looks more beautiful.

The preceding operations complete the initialization of the tab page control. The following describes how to work with the tree control to enable multiple business function pages.

Add a click event for the tree node. After clicking it, a tab page is automatically added to the tab control in the central area. The IFRAME method is used to open the URL address corresponding to the function menu, the basic functions are as follows:

function TreeNodeClick(node, event) {      $("#tabs").omTabs('add', {      title: node.text,      content: '<iframe scrolling="yes" frameborder="0"  src=' + node.url + ' style="width:100%;height:100%;"></iframe>',      closable: true,      tabId:node.id      });}

You can directly use the function menu name for the tab title. IFRAME is embedded in the content, and the unique Tabid ID is added to determine whether the currently clicked function menu tree node has been opened in the tabs control.

There are still some details to consider when completing basic functions. We need to add two logics. One is to determine whether a tree node is a leaf node. If it is a menu classification, no operation is performed, otherwise, perform operations on the tab control. Second, you need to determine whether the current tab control list already exists. To open the function menu, if it does not exist, add a new tab page and open it. if it already exists, you only need to activate it, the tab page displayed.

The first point is to determine whether the node is a leaf node. Here is a simple way to determine whether the node URL attribute is empty. If it is empty, it is considered as a menu category. In fact, it is not a clever way to judge the logic of the leaf node in a strict sense, but it is more flexible. For example, if the menu category also adds the URL attribute, you can also click to open the corresponding function page.

The second point is to determine whether it has been enabled. The OM control does not provide a simple method. You need to use the existing method to complete it yourself. The implementation is as follows:

        function CheckTabsExist(currentTabId)        {            var total = $('#tabs').omTabs('getLength');                        for (i = 0; i < total; i++)            {                var tabId = $('#tabs').omTabs('getAlter', i);                                if (tabId == currentTabId)                {                    return true;                }                            }            return false;        }

After the improvement, the tree node click processing method is as follows:

　　

function TreeNodeClick(node, event)        {            if (node.url)            {                                if (CheckTabsExist(node.id))                {                    var index = $('#tabs').omTabs('getAlter', node.id);                                      $("#tabs").omTabs('activate', index);                }                else                {                    $("#tabs").omTabs('add', {                        title: node.text,                        content: '<iframe scrolling="yes" frameborder="0"  src=' + node.url + ' style="width:100%;height:100%;"></iframe>',                        closable: true,                        tabId: node.id                    });                }            }                   }

As shown above, if the tag already exists, it is activated. If the tag does not exist, a new tag is added.

When more and more tabs are opened, a new requirement is generated, that is, to close tags in batches. Similar to browsers, this requirement can be achieved by adding right-click menus. You only need to add the attribute tabmenu: true to the loadtabs initialization of the tab control, and right-click the tab header, there will be three menus: "close", "Close other", and "close all". If you want to disable the left and right sides of the browser, the existing control om does not provide this function, you need to expand it yourself.

 

Finally, let's talk about the difference with easyui. So far, three controls of easyui, layout, tree, and tab, have been replaced with Om. In my opinion, easy is more user-friendly and perfect. Humanization is embodied in the fact that the default attribute is as close as possible to the actual situation, for example, whether to automatically fill the parent form without additional user-specified. Perfection is reflected in the response to various situations. At least, I did not find any JS errors when using easyuri. However, Om is often used, it is often impossible to obtain some width and height. For example, in actual practice, when a div label has no content closure, an error is reported. When a tab control is used, if only one div is written, it is initialized, an error occurred while obtaining the scroller length. Another key point is whether the provided attributes and methods are more in line with developers' needs. Take the tree node click event in this article as an example. The following describes how to use easyui to write:

       　　　var node = $('#mainMenu').tree('getSelected');             var isLeaf = $('#mainMenu').tree('isLeaf', node.target);             if (isLeaf == true)             {                 if ($("#mainTabs").tabs('exists', node.text) == false)                 {                     $("#mainTabs").tabs('add', {                         title: node.text,                         content: '<iframe scrolling="yes" frameborder="0"  src=' + node.attributes + ' style="width:100%;height:100%;"></iframe>',                         closable: true,                         cache: false                     });                 }                 else                 {                     $("#mainTabs").tabs('select', node.text);                 }             }

First, obtain the current click value to determine whether it is a leaf node. There are ready-made methods available to determine whether a menu already exists on the tab, and there are also ready-made methods available, however, Om seems clumsy, and both logics must be written by themselves. There is a clear gap in the friendliness of developers. This does not mean that OM is worse than easyui, and OM also provides some more powerful functions. I just want to make a simple comparison of the functions used from my business needs and functional plans, I think easyui is better.