首页 > 代码库 > layout(布局)

layout(布局)

2024-08-14 10:05:12   214人阅读

布局容器有4个区域：头部选项条、左侧选项目录、右侧内容上方的选项卡（tabs）、右侧中间内容区域。北、南、东、西和中间。

技术分享

创建布局

1、使用完整页面创建布局

（1）头部选项条

<div class="navbar-wrapper">    <div class="navbar navbar-fixed-top">        <div class="container-fluid cl">            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="javascript:;</a>            <div id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">                <ul class="cl">                    <li>您好, 开发者</li>                    <li class="dropDown dropDown_hover">                        <a class="dropDown_A" href="#">开发者<i class="Hui-iconfont">&#xe6d5;</i></a>                        <ul class="dropDown-menu menu radius box-shadow">                            <li><a href="javascript:;">清除缓存</a></li>                            <li><a href="javascript:;">修改密码</a></li>                            <li><a href="javascript:;">安全退出</a></li>                        </ul>                    </li>                </ul>            </div>        </div>    </div></div>

（2）左侧选项目录

<div class="Hui-aside">    <div class="menu_dropdown bk_2">        <dl class="menu-hos">
            <!-- 一级导航 -->
            <dt>应用管理</dt>
            <!-- 二级导航 -->            <dd>                <ul>                    <li><a href="javascript:;" _href="api.php" data-title="API的应用">API的应用</a></li>                </ul>            </dd>        </dl>    </div></div>

目前的H-adminUI版本只支持到二级导航，暂不支持三级导航。如需要在内容区域打开新的页面，需要在二级导航的a标签设置 "_href" 属性，填入需要打开的页面的url，注意与 "href" 属性区分，前者比后者多了下划线 "_"。当前打开的页面会有相应的选项显示在内容区域上方的选项卡上，通过设置a标签的 "data-title" 属性可以设置当前页面的title，方便使用者更直观的知道当前页面的内容。

（3）主要内容区域

<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div><section class="Hui-article-box">    <div id="Hui-tabNav" class="Hui-tabNav hidden-xs">        <div class="Hui-tabNav-wp">            <ul id="min_title_list" class="acrossTab cl">                <li class="active"><span title="我的桌面">我的桌面</span><em></em></li>            </ul>        </div>        <div class="Hui-tabNav-more btn-group">            <a id="js-tabNav-prev" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d4;</i></a>            <a id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont">&#xe6d7;</i></a>        </div>    </div>    <div id="iframe_box" class="Hui-article">        <div class="show_iframe">            <div class="loading no-display"></div>            <iframe scrolling="yes" frameborder="0" src="home.php"></iframe>        </div>        </div></section>

通过iframe标签中的 "src" 属性，可以设置首次登陆访问的默认页面。

layout(布局)


联系
我们