ASP. NET MVC build Project Background UI Framework-4, TAB multi-page support

Source: Internet
Author: User

Catalogue
    1. ASP. NET MVC build Project Background UI Framework-1, background main frame
    2. ASP. NET MVC build Project Background UI Framework-2, menu effects
    3. ASP. NET MVC build Project Background UI Framework-3, panel folding and unwinding
    4. ASP. NET MVC build Project Background UI Framework-4, TAB multi-page support
    5. ASP. NET MVC build Project Background UI Framework-5, demo demo Controller and view interaction

When I click on the options in the left-hand menu, I want to have ExtJS, Easyui, and other similar tab features, because this can support the browsing of multiple pages, sometimes we may need to open multiple pages at the same time, if you do not use the page, then every time you want to view a page to recall and refresh, If the internet is slow or the interface is time-consuming to load, it can be a rush. Because I do not want to introduce the whole ExtJS and so on content. Naturally, I think of the Internet to find this UI plugin. Found a lot, but I think clevertabs is more suitable for my project. The effect is as follows:

Action

1. Modify the right view and add the following JS reference:

    <link href= "~/lib/clevertabs/context/themes/base/jquery-ui.css" rel= "stylesheet"/> <script    src= "~/ Scripts/jquery-1.8.3.min.js "></script>    <script src=" ~/lib/clevertabs/scripts/jquery-ui.js "> </script>    <script src= "~/lib/clevertabs/scripts/jquery.clevertabs.js" ></script>    < Script src= "~/lib/clevertabs/scripts/jquery.contextmenu.js" ></script>

2, add JS method:

<script type= "Text/javascript" >vartabs; $(function () {               varH = $ (document). Height ()-35; $("#tabs"). Height (h); About here I want to explain, if not set the height, it is not the default 100% full screen, so I used the method of calculation, the initialization interface height tabs= $ (' #tabs '). Clevertabs (); $ (window). Bind (' Resize ',function() {Tabs.resizepanelcontainer ();               }); Tabs.add ({URL:' http://www.cnblogs.com/jiekzou/', Label:' My blog ',                   //whether to lock when tab is turned on (not allowed, default: false)Lockfalse               }); $(' input[type= ' button "] '). button ();           }); functionAddTab (url,name) {Tabs.add ({url:url, label:name}           ); }</script>

3. Modify body body in right view:

<Body>     <Divclass= "Sidebar Fleft"><Divclass= "BTN"ID= "Divfolding"></Div></Div>    <DivID= "Tabs"style= "Overflow:hidden; padding-top:0px; height:400px;">        <ul>        </ul>    </Div>    </Body>

4. In the left view, add the following JS method: Invoke the Add Tab method in the right view when the menu in left is clicked AddTab

        function Gonewpage (url,name) {            self.parent.frames["MainFrame"].addtab (Url,name);        }

To modify the call method of a menu in the left view

<li><a target= "MainFrame" id= "Channelmanage" onclick= "gonewpage ('/channel/index ', ' channel Management ');" > Channel Management </a></li>

5, F5 run, you will see the following effects:

Frame used in the JS and CSS, Img:cssjsimg source code

ASP. NET MVC build Project Background UI Framework-4, TAB multi-page support

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.