Home > Developer > Web Develop
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:
Action1. 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
