jQuery MiniUI

标题: html网页如何填充整个mini-tabs [打印本页]

作者: hjane    时间: 2018-6-13 08:26:27     标题: html网页如何填充整个mini-tabs



[attach]10981[/attach]

您好!请问在每个mini-tabs页面里都没有充满。留有边框,请问如设置。如这条红色的边框,实际上是.mini-tabs-bodys的背景色。而淡黄色是html的背景色。请问怎么设置可以使html页面填满.mini-tabs-bodys而不显示出他底色出来。


作者: dforce    时间: 2018-6-13 09:04:19

你这页面是怎么放的?tab上url引入的吗?
作者: hjane    时间: 2018-6-13 10:08:09

dforce 发表于 2018-6-13 09:04
你这页面是怎么放的?tab上url引入的吗?

是的,是从tab上的url 引入的。
作者: hjane    时间: 2018-6-13 10:11:37

dforce 发表于 2018-6-13 09:04
你这页面是怎么放的?tab上url引入的吗?

    function activeTab(item) {

            var tabs = mini.get("mainTabs");
            var tab = tabs.getTab(item.id);
            if (!tab) {
                tab = { name: item.id, title: item.text, url: item.url, iconCls: item.iconCls, showCloseButton: true };
                tab = tabs.addTab(tab);
            }
            tabs.activeTab(tab);
        }
你们的例题上也是从tab的url引入的。只要你改下css的background的颜色就会显示出来。
作者: dforce    时间: 2018-6-13 11:02:25

hjane 发表于 2018-6-13 10:11
function activeTab(item) {

            var tabs = mini.get("mainTabs");

请设置url加载的页面的样式
html,body{
  height:100%;width:100%;
}
作者: hjane    时间: 2018-6-13 11:12:54

dforce 发表于 2018-6-13 11:02
请设置url加载的页面的样式
html,body{
  height:100%;width:100%;

设了也是一样的,起不了作用
html, body
{
    width:100%;
    height:100%;
    overflow:visible;
    margin:0;
    padding:0;
    border:0;
   
} 你们测试下你们的例子也是一样的。如以下是你们例子的html
<head>
    <title></title>
</head>
<body>
    <div id="time"></div>
</body>
</html>
<script>
    document.getElementById("time").innerHTML = new Date().getTime();
</script>
加载到tab里也是一样的有框出来
作者: dforce    时间: 2018-6-13 11:34:46

hjane 发表于 2018-6-13 11:12
设了也是一样的,起不了作用
html, body
{

[attach]10984[/attach]测试过了,只要那个子页面有这全局样式就能撑满
作者: hjane    时间: 2018-6-13 11:44:30

dforce 发表于 2018-6-13 11:34
测试过了,只要那个子页面有这全局样式就能撑满

您好,您发现您这个tab与左边的菜单栏之前一个白色的条子吗?我说的就是这个空隙。
要这个白色的条子也是蓝色就可以了。
作者: hjane    时间: 2018-6-13 11:58:06

hjane 发表于 2018-6-13 11:44
您好,您发现您这个tab与左边的菜单栏之前一个白色的条子吗?我说的就是这个空隙。
要这个白色的条子也是 ...

[attach]10985[/attach]按你设置,我重设了下tab.css中的.mini-tabs-bodys {    border-color:transparent;
    background:red;
}就会出现。你们设的是transparent。而在index.css中.navbar中就可以跟左边的菜单贴在一起。
在index.html中有以下代码:
<div class="navbar">
    <div class="navbar-header">
        <div class="navbar-brand"><img src="../MenuImgs/logo.png" /></div>
        <div class="navbar-brand navbar-brand-compact">M</div>
    </div>

<div class="container">
    <div class="sidebar">
        <div class="sidebar-toggle"><i class = "fa fa-fw fa-dedent" ></i></div>
        <div id="mainMenu"></div>
    </div>
    <div class="main">
        <div id="mainTabs" class="mini-tabs main-tabs" activeIndex="0" style="height:100%;" plain="false" buttons="#tabsButtons" arrowPosition="side" >
            <div name="index" iconCls="fa-android" title="控制台" url="../DeskHomeTab/TabIndex.html"></div>
        </div>
        <div id="tabsButtons">
            <a class="tabsBtn"><i class="fa fa-home"></i></a>
            <a class="tabsBtn"><i class="fa fa-refresh"></i></a>
            <a class="tabsBtn"><i class="fa fa-remove"></i></a>
            <a class="tabsBtn"><i class="fa fa-arrows-alt"></i></a>
        </div>   
    </div>
</div>

所以我认为有可能是<div class="container">控制了与左边的距离。

作者: dforce    时间: 2018-6-13 12:06:19

hjane 发表于 2018-6-13 11:58
按你设置,我重设了下tab.css中的.mini-tabs-bodys {    border-color:transparent;
    background:red; ...

tabs的body区域默认有5px的padding,可以设置bodyStyle="padding:0"去除




欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2