ACE框架整合记录1基础框架【完结】

来源：互联网发布：识图的软件编辑：程序博客网时间：2024/06/06 01:59

2016-4-11 21:31更新内容
1，新增谷歌支持
2，处理Tab标签内部padding-16*12引起的下边距太大和双滚动条的问题的问题
修复前后对比

初次加载是正常的，缩小之后就会出现上面2个问题

修复后，在ie、火狐、谷歌都是随着浏览器大小改变，都是单滚动条和底差1px

---------------------------------------------------------------

最近发现一个Bootstrap开发的ACE，能够适应各种浏览器以及手机端。
不过这套框架有个弊端就是没有JS代码全都是CSS，没有类似JQUI系列那些生成调用的API。所以整合起来就比较坑了。
目前只是整理了一个大概。
官方框架下载地址：http://www.daimajiayuan.com/preview/18152.html
以下是大概几个难点的地方：
1，整合Tab模式中间布局飘动问题。
ace自带的布局是单页面模板布局。改源码的时候内部的page地方不能用，所以改用了头部部分，如下

2,Tab标签常规高度自定填充问题，目前只做了火狐和IE的处理，新家谷歌支持
相关代码
<script type="text/javascript">
//主页Tab内容区域的高度

window.onload = window.onresize = function () {

//可视区域的高度

var documentHeight = parseInt(document.documentElement.clientHeight);

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

var isOpera = userAgent.indexOf("Opera") > -1;

if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

//4为IE版本的一个偏差值

documentHeight = parseInt($("html").outerHeight(true));

documentHeight -= 4;

};

if (userAgent.indexOf("Firefox") > -1) {

documentHeight = parseInt(document.documentElement.clientHeight);

}

if (userAgent.indexOf("Chrome") > -1) {

//2为谷歌版本的一个偏差值

documentHeight -= 2;

}

//减1主要是为了给底部留一条缝隙

//主要由tab-content的padding引起

var contentHeight = documentHeight - 1 - (parseInt($("#tab-titles ul").outerHeight(true)) + parseInt($("#navbar").outerHeight(true)));

$("#tab-content div").css("height", contentHeight + "px");

}

</script>
效果图小布局

最终效果

后续相关JS处理还在研究中。。。
Tab高度自动适应，缩小版的估计还有小问题
全部代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebApplication4.Index" %>

<!DOCTYPE html>

<title>Process Rule Management</title>

<!--[if IE 7]>

<![endif]-->

<!--[if lte IE 8]>

<![endif]-->

<!--[if lt IE 9]>

<![endif]-->

</head>

<small>

Admin

</small>

</a>

</div>

</a>

4 Tasks to complete

</li>

<li>

<span class="pull-left">Software Update</span>

</div>

</div>

</a>

</li>

<li>

<span class="pull-left">Hardware Upgrade</span>

</div>

</div>

</a>

</li>

<li>

<span class="pull-left">Unit Testing</span>

</div>

</div>

</a>

</li>

<li>

<span class="pull-left">Bug Fixes</span>

</div>

</div>

</a>

</li>

<li>

<a href="#">See tasks with details

</a>

</li>

</ul>

</li>

</a>

8 Notifications

</li>

<li>

New Comments

</span>

</div>

</a>

</li>

<li>

Bob just signed up as an editor ...

</a>

</li>

<li>

New Orders

</span>

</div>

</a>

</li>

<li>

Followers

</span>

</div>

</a>

</li>

<li>

<a href="#">See all notifications

</a>

</li>

</ul>

</li>

</a>

5 Messages

</li>

<li>

Ciao sociis natoque penatibus et auctor ...

</span>

<span>a moment ago</span>

</span>

</a>

</li>

<li>

<span class="blue">Susan:</span>

Vestibulum id ligula porta felis euismod ...

</span>

<span>20 minutes ago</span>

</span>

</a>

</li>

<li>

Nullam quis risus eget urna mollis ornare ...

</span>

</span>

</a>

</li>

<li>

<a href="inbox.html">See all messages

</a>

</li>

</ul>

</li>

<small>Welcome,</small>

Jason

</span>

</a>

<li>

Settings

</a>

</li>

<li>

Profile

</a>

</li>

<li>

Logout

</a>

</li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</a>

</button>

</button>

</button>

</button>

</div>

</div>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

组件

</a>

</li>

<li>

按钮 & 图表

</a>

</li>

<li>

树菜单

</a>

</li>

<li>

jQuery UI

</a>

</li>

<li>

可拖拽列表

</a>

</li>

<li>

三级菜单

</a>

<li>

第一级

</a>

</li>

<li>

第四级

</a>

<li>

添加产品

</a>

</li>

<li>

查看商品

</a>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li>

</a>

<li>

简单 & 动态

</a>

</li>

<li>

jqGrid plugin

</a>

</li>

</ul>

</li>

<li>

</a>

<li>

表单组件

</a>

</li>

<li>

向导提示 & 验证

</a>

</li>

<li>

编辑器

</a>

</li>

<li>

文件上传

</a>

</li>

</ul>

</li>

<li>

</a>

</li>

<li>

<span class="menu-text">日历

</span>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

<li>

用户信息

</a>

</li>

<li>

收件箱

</a>

</li>

<li>

售价单

</a>

</li>

<li>

购物车

</a>

</li>

<li>

时间轴

</a>

</li>

<li>

</a>

</li>

</ul>

</li>

<li>

<span class="menu-text">其他页面

</span>

</a>

<li>

帮助

</a>

</li>

<li>

404错误页面

</a>

</li>

<li>

500错误页面

</a>

</li>

<li>

网格

</a>

</li>

<li>

空白页面

</a>

</li>

</ul>

</li>

</ul>

</div>

Home

</a>

</li>

<li>

Profile

</a>

</li>

</a>

<li>

<a data-toggle="tab" href="#dropdown1">@fat

</a>

</li>

<li>

<a data-toggle="tab" href="#dropdown2">@mdo

</a>

</li>

</ul>

</li>

</ul>

</div>

<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.</p>

</div>

<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p>

</div>

<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin.</p>

</div>

</div>

</div>

window.jQuery || document.write("<script src='JSPlug/Assets/js/jquery.min.js'>" + "<" + "/script>");

</script>

<!--[if IE]>

window.jQuery || document.write("<script src='JSPlug/Assets/js/jquery.min.js'>"+"<"+"/script>");

</script>

<![endif]-->

if ("ontouchend" in document) document.write("<script src='JSPlug/Assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");

</script>

<!--[if lte IE 8]>

<![endif]-->

//主页Tab内容区域的高度

window.onload = window.onresize = function () {

//可视区域的高度

var documentHeight = parseInt(document.documentElement.clientHeight);

var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串

var isOpera = userAgent.indexOf("Opera") > -1;

if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {

//4为IE版本的一个偏差值

documentHeight = parseInt($("html").outerHeight(true));

documentHeight -= 4;

};

if (userAgent.indexOf("Firefox") > -1) {

documentHeight = parseInt(document.documentElement.clientHeight);

}

if (userAgent.indexOf("Chrome") > -1) {

//2为谷歌版本的一个偏差值

documentHeight -= 2;

}

//减1主要是为了给底部留一条缝隙

//主要由tab-content的padding引起

var contentHeight = documentHeight - 1 - (parseInt($("#tab-titles ul").outerHeight(true)) + parseInt($("#navbar").outerHeight(true)));

$("#tab-content div").css("height", contentHeight + "px");

}

</script>

</form>

</body>

</html>

0 0