In ligerUI layout, the Tab height in the Center is too small.
1.0 reference js and css
<link href="/Content/scripts/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" /> <link href="/Content/scripts/ligerUI/skins/ligerui-icons.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.8.2.js"></script> <script src="/Content/scripts/ligerUI/js/ligerui.all.js"></script>
2.0 use js Code to set ligerUI layout and Tab height
<Script> var tab; $ (function () {$ ("# layout1 "). ligerLayout ({leftWidth: 200, topHeight: 80}); $ ("# accordion1 "). ligerAccordion ({height: 300}); // important code. Set the height of the newly added tab to the height of the center div. var height = $ (". l-layout-center "). height (); tab = $ ("# tab1 "). ligerTab ({height: height}) ;}); // You can dynamically Add a tab, but which functions of the element addTab (url, text, tabid) {tab. addTabItem ({url: url, text: text, tabid: tabid}) ;}</script>
3.0 simple style setting
<style type="text/css"> body { padding: 10px; margin: 0; } #layout1 { width: 100%; margin: 40px; height: 400px; margin: 0; padding: 0; } #accordion1 { height: 270px; } h4 { margin: 20px; } #accordion1 ul li { font-size: 14px; margin-left: 15px; } a { color: black; text-decoration: none; } a:hover { color: #ff6a00; } </style>
4.0 body content
<Body style = "padding: 10px "> <div id =" layout1 "> <div position =" left "title =" feature list "> <div id =" accordion1 "> <div title =" Project Management "> <ul> <li> <a href =" javascript: void (0) "onclick =" addTab (' http://www.youku.com ', 'Specify team', 1) "> specify team' </a> </li> <a href =" javascript: void (0) "onclick =" addTab (' http://www.jd.com ', 'View Project', 2) "> View project </a> </li> </ul> </div> <div title =" user management "> <ul> <li> <a href =" javascript: void (0) "onclick =" addTab (' http://www.baidu.com ', 'User Review', 3) "> User audit </a> </li> <a href =" javascript: void (0) "onclick =" addTab (' http://www.sina.com ', 'View users', 4) "> View users </a> </li> </ul> </div> <div title =" other "style =" padding: 10px "> other content </div> <div position =" center "id =" tab1 "> </div> <div position =" top "style =" line-height: 80px; "> <span style =" font-size: 28px; font-weight: bolder; font-family: weight body; "> super administrator background </span> <a href = '@ Url. action ("LoginOut", "Admin") 'style = "margin-right: 20px; font-size: 18px; color: # CD; float: right; "> exit </a> </span> </div> <div position =" bottom "> </div> </body>
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
