ace--2.基本布局

最新推荐文章于 2019-06-01 16:19:46 发布
最新推荐文章于 2019-06-01 16:19:46 发布
阅读量1.8k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26553781/article/details/78072373
版权

1      结构

 可参看http://blog.csdn.net/alex_chen_16/article/details/50889924

2      Jsp

2.1  总体布局Index.jsp

 

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>方正管理系统</title>

    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />

    <jsp:include page="template/csshead.jsp"flush="true" />
    <jsp:include page="template/jshead.jsp"flush="true" />

</head>

<body>

<!--加入头部-->
<jsp:include page="layout/header.jsp"flush="true" />

<!--主内容区域-->
<div class="main-container"id="main-container">
    <script type="text/javascript">
        try{ace.settings.check('main-container' , 'fixed')}catch(e){}
    </script>

    <div class="main-container-inner">
        <!--左侧的导航栏-->
        <jsp:include page="layout/navigation.jsp"></jsp:include>

        <!--右侧的内容-->
        <div class="main-content">
            <!--右侧上方的导航指标和搜索按钮-->
            <%--<jsp:includepage="layout/breadcrumbs.jsp"></jsp:include>--%>

            <!--中心的内容区域-->
            <div class="page-content">
                <div class="row">
                    <div class="col-xs-12" style="padding-left:5px;">
                        <ul class="nav-my-tab">
                            <li class="leftbackward"><a href="#" >
                                <i class="icon-backward"></i></a>
                            </li>
                            <li class="rightforward"><a href="#">
                                <i class="icon-forward"></i></a>
                            </li>
                           <li class="middletab">
                                <ul class="nav nav-tabs" role="tablist">
                                    <li class="active"><a href="#Index" role="tab" data-toggle="tab">
                                        <i class="icon-home"></i>系统首页</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-paneactive" id="Index">
                                <img src="${path}/static/img/1.jpg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div><!-- /.main-content -->
        <!-- 加入边上皮肤选择 -->
       <%-- <jsp:includepage="layout/settings.jsp"flush="true"></jsp:include>--%>
    </div><!-- /.main-container-inner -->

    <!-- 回到顶部按钮 -->
    <jsp:include page="layout/btnscrollup.jsp"flush="true"></jsp:include>

</div><!-- /.main-container -->

<!--加入底部导航栏-->
<jsp:include page="layout/footer.jsp"flush="true"/>

    <jsp:include page="template/jsbody.jsp"flush="true" />
</body>
</html>
 

2.2  header.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>

<div class="navbar navbar-default" id="navbar">
    <script type="text/javascript">
        try{ace.settings.check('navbar' , 'fixed')}catch(e){}
    </script>

    <div class="navbar-container" id="navbar-container">
        <div class="navbar-header pull-left">
            <a href="#" class="navbar-brand">
                <small>
                    <i class="icon-leaf"></i>
                    方正
                </small>
            </a><!-- /.brand -->
        </div><!-- /.navbar-header -->

        <div class="navbar-header pull-right" role="navigation">
            <ul class="nav ace-nav">
                <li class="grey">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-tasks"></i>
                        <span class="badge badge-grey">4</span>
                    </a>

                    <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="icon-ok"></i>
                            4 Tasks to complete
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Software Update</span>
                                    <span class="pull-right">65%</span>
                                </div>

                                <div class="progress progress-mini ">
                                    <div style="width:65%" class="progress-bar "></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Hardware Upgrade</span>
                                    <span class="pull-right">35%</span>
                                </div>

                                <div class="progress progress-mini ">
                                    <div style="width:35%" class="progress-bar progress-bar-danger"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Unit Testing</span>
                                    <span class="pull-right">15%</span>
                                </div>

                                <div class="progress progress-mini ">
                                    <div style="width:15%" class="progress-bar progress-bar-warning"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                    <span class="pull-left">Bug Fixes</span>
                                    <span class="pull-right">90%</span>
                                </div>

                                <div class="progress progress-mini progress-striped active">
                                    <div style="width:90%" class="progress-bar progress-bar-success"></div>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                See tasks with details
                                <i class="icon-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="purple">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-bell-alt icon-animated-bell"></i>
                        <span class="badge badge-important">8</span>
                    </a>

                    <ul class="pull-right dropdown-navbar navbar-pink dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="icon-warning-sign"></i>
                            8 Notifications
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                 <span class="pull-left">
                                    <i class="btn btn-xs no-hover btn-pink icon-comment"></i>
                                    New Comments
                                 </span>
                                    <span class="pull-right badge badge-info">+12</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="btn btn-xs btn-primary icon-user"></i>
                                Bob just signed up as an editor ...
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                 <span class="pull-left">
                                    <i class="btn btn-xs no-hover btn-success icon-shopping-cart"></i>
                                    New Orders
                                 </span>
                                    <span class="pull-right badge badge-success">+8</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <div class="clearfix">
                                 <span class="pull-left">
                                    <i class="btn btn-xs no-hover btn-info icon-twitter"></i>
                                    Followers
                                 </span>
                                    <span class="pull-right badge badge-info">+11</span>
                                </div>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                See all notifications
                                <i class="icon-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="green">
                    <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                        <i class="icon-envelope icon-animated-vertical"></i>
                        <span class="badge badge-success">5</span>
                    </a>

                    <ul class="pull-right dropdown-navbar dropdown-menu dropdown-caret dropdown-close">
                        <li class="dropdown-header">
                            <i class="icon-envelope-alt"></i>
                            5 Messages
                        </li>

                        <li>
                            <a href="#">
                                <img src="${path}/static/assets/avatars/avatar.png" class="msg-photo" alt="Alex's Avatar" />
                                <span class="msg-body">
                                 <span class="msg-title">
                                    <span class="blue">Alex:</span>
                                    Ciao sociis natoque penatibus et auctor ...
                                 </span>

                                 <span class="msg-time">
                                    <i class="icon-time"></i>
                                    <span>a moment ago</span>
                                 </span>
                              </span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="${path}/static/assets/avatars/avatar3.png" class="msg-photo" alt="Susan's Avatar" />
                                <span class="msg-body">
                                 <span class="msg-title">
                                    <span class="blue">Susan:</span>
                                    Vestibulum id ligula porta felis euismod ...
                                 </span>

                                 <span class="msg-time">
                                    <i class="icon-time"></i>
                                    <span>20 minutes ago</span>
                                 </span>
                              </span>
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <img src="${path}/static/assets/avatars/avatar4.png" class="msg-photo" alt="Bob's Avatar" />
                                <span class="msg-body">
                                 <span class="msg-title">
                                    <span class="blue">Bob:</span>
                                    Nullam quis risus eget urna mollis ornare ...
                                 </span>

                                 <span class="msg-time">
                                    <i class="icon-time"></i>
                                    <span>3:15 pm</span>
                                 </span>
                              </span>
                            </a>
                        </li>

                        <li>
                            <a href="inbox.html">
                                See all messages
                                <i class="icon-arrow-right"></i>
                            </a>
                        </li>
                    </ul>
                </li>

                <li class="light-blue">
                    <a data-toggle="dropdown" href="#" class="dropdown-toggle">
                        <img class="nav-user-photo" src="${path}/static/assets/avatars/user.jpg" alt="Jason's Photo" />
                        <span class="user-info">
                           <small>Welcome,</small>
                           Jason
                        </span>

                        <i class="icon-caret-down"></i>
                    </a>

                    <ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
                        <li>
                            <a href="#">
                                <i class="icon-cog"></i>
                                设置
                            </a>
                        </li>

                        <li>
                            <a href="#">
                                <i class="icon-user"></i>
                                个人信息
                            </a>
                        </li>

                        <li class="divider"></li>

                        <li>
                            <a href="#">
                                <i class="icon-off"></i>
                                注销
                            </a>
                        </li>
                    </ul>
                </li>
            </ul><!-- /.ace-nav -->
        </div><!-- /.navbar-header -->
    </div><!-- /.container -->
</div>

2.3  navigation.jsp

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>

<!--导航栏-->
<div class="sidebar" id="sidebar">
    <ul class="nav nav-list" id="menu"></ul>
    <div class="sidebar-collapse" id="sidebar-collapse">
        <i class="icon-double-angle-left" data-icon1="icon-double-angle-left" data-icon2="icon-double-angle-right"></i>
    </div>
</div> 

2.4  breadcrumbs.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<div class="breadcrumbs" id="breadcrumbs">
    <script type="text/javascript">
        try {
            ace.settings.check('breadcrumbs', 'fixed')
        } catch (e) {
        }
    </script>

    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="#">Home</a>
        </li>

        <li>
            <a href="#">Tables</a>
        </li>
        <li class="active">Simple & Dynamic</li>
    </ul><!-- .breadcrumb -->

    <div class="nav-search" id="nav-search">
        <form class="form-search">
         <span class="input-icon">
             <input type="text" placeholder="Search ..." class="nav-search-input"  id="nav-search-input" autocomplete="off"/>
             <i class="icon-search nav-search-icon"></i>
         </span>
        </form>
    </div><!-- #nav-search -->
</div> 

2.5  settings.jsp

<div class="ace-settings-container" id="ace-settings-container">
    <div class="btn btn-app btn-xs btn-warning ace-settings-btn" id="ace-settings-btn">
        <i class="icon-cog bigger-150"></i>
    </div>

    <div class="ace-settings-box" id="ace-settings-box">
        <div>
            <div class="pull-left">
                <select id="skin-colorpicker" class="hide">
                    <option data-skin="default" value="#438EB9">#438EB9</option>
                    <option data-skin="skin-1" value="#222A2D">#222A2D</option>
                    <option data-skin="skin-2" value="#C6487E">#C6487E</option>
                    <option data-skin="skin-3" value="#D0D0D0">#D0D0D0</option>
                </select>
            </div>
            <span>  Choose Skin</span>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-navbar" />
            <label class="lbl" for="ace-settings-navbar"> Fixed Navbar</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-sidebar" />
            <label class="lbl" for="ace-settings-sidebar"> Fixed Sidebar</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-breadcrumbs" />
            <label class="lbl" for="ace-settings-breadcrumbs"> Fixed Breadcrumbs</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-rtl" />
            <label class="lbl" for="ace-settings-rtl"> Right To Left (rtl)</label>
        </div>

        <div>
            <input type="checkbox" class="ace ace-checkbox-2" id="ace-settings-add-container" />
            <label class="lbl" for="ace-settings-add-container">
                Inside
                <b>.container</b>
            </label>
        </div>
    </div>
</div><!-- /#ace-settings-container --> 

2.6  btnscrollup.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>

<!-- 回到顶部按钮 -->
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
    <i class="icon-double-angle-up icon-only bigger-110"></i>
</a>

2.7  footer.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<div class="hr hr32 hr-dotted"></div>--%>
<!--<div style="text-align: center;display:none">-->
<div style="text-align: center;background-color: #c9d6e5">
    Copyright © 2018 <a href="#">方正</a> All Rights Reserved
</div>


 

 http://download.csdn.net/download/qq_26553781/10226387

qq_26553781
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ace admi 三 侧边栏
whaleluo的博客
05-28 2221
1.布局用于侧边栏的默认HTML布局是：快捷按钮：可选.nav-list：包含侧边栏项目展开/折叠按钮：可选&lt; div class = “ sidebar responsive ” id = “ sidebar ” &gt; &lt; div class = “ sidebar-shortcuts ” id = “ sidebar-shortcuts ” &gt; ... ...
管理员登录成功后隐藏禁用菜单
weixin_59334478的博客
05-26 262
如果一个权限被超级管理员禁用了之后，即使拥有该权限的管理员登录之后，此权限应当不可见或不可操作。 1.设置为不可用 在Index.jsp页面添加如下语句 <!-- 菜单2 --> <c:forEach items="${menuList}" var="menu1"> <li> <a href="#" class="dropdown-toggle"> &lt
4-2 用户登陆接口与界面开发
kiloyip的博客
04-22 642
1、登陆 Controller@Controller public class UserController { @Autowired private SysUserService sysUserService; @RequestMapping("/login") public void login(HttpServletRequest request, HttpServletRes...
我有回来了
tfy1332的专栏
07-16 4407
Gallery - Beautiful很酷很炫的图片效果----IT is SHow Time /translator/assets/css/bootstrap.min.css" /> /translator/assets/css/font-awesome.min.css" /> /translator/assets/css/colorbox.css"
${pageContext.request.contextPath} JSP取得绝对路径
SKY的专栏
03-12 350
一．问题 JSP中究竟采用绝对路径还是采用相对路径随着所采用技术的越来越复杂，这个问题也变得越来越难以解决。 １）采用相对路径遇到的问题 相对路径固然比较灵活，但如果想复制页面内的代码却变得比较困难，因为不同的页面具有不同的相对路径，复制后必须修改每一个连接的路径。 如果页面被多于一个的页面所包含，那么被包含页面中的相对路径将是不正确的。 如果采用Struts的
关于<c:set value="${pageContext.request.contextPath}" var="path" scope="page"/>
暮然回首
09-30 2948
以前没关注的一个前端知识，今天在看一个项目的页面源码时发现不知道这是干嘛用的。就是下面这句： 在这句中我们都知道标签用于保存数据。 ${pageContext.request.contextPath} 是获取当前根目录。var="path" 相当于一个获取到的当前根目录的别名。 在使用时我们把配置了这句话的文件引入到我们的页面中，这样我们就可以在后文脚本中引用。 是在easyui
AutoCAD-Electrical培训教程完整版资料.ppt
11-15
知识点4: ACE基本工作原理 ACE的基本工作原理包括导线、元件符号、不可见图块和不可见属性等概念。这些概念是ACE设计和编辑的基础。 知识点5: ACE基本工作流程 ACE的基本工作流程包括新建项目、画原理图、画面板...
ACE面板布置制作.doc
10-01
一旦基本的配电柜和辅助元件位置确定，可以进一步细化布局，例如添加端子排，调整元件间的间距，以及编辑属性以满足报告需求。属性编辑包括但不限于元件的尺寸、连接信息、标识标签等，这些都是确保生产图纸完整性和...
oxideous.github.io:斯宾塞-项目1
05-20
### 15年7月21日开始###功能-布局基本完整-游戏完成直至结束并重置-功能多个套牌，提示和活动标记-如果出现胸围，请检查ace并将其转换为1。 ### Bugs-Have yet to figure out all of the logic for game winning. ...
Bootstrap ACE后台管理界面模板(扁平化)
11-10
响应式Bootstrap网站后台管理系统模板ace admin，非常不错的轻量级易用的admin后台管理系统，基于Bootstrap3，拥有强大的功能组件以及UI组件，基本能满足后台管理系统的需求，而且能根据不同设备适配显示，而且还有...
ACE前端模板-一个UI框架，很方便
11-30
一个很实用的UI框架，基于BootStrap，使用方法很简单，下载好源码之后，一边打开浏览器查看样式，一边打开编译器查看代码，看到合适的，喜欢用的组件之后，直接复制源码就可以了，样式可以自己设置。
bootstrap+ace+spring作者的对话
08-09
NULL 博文链接：https://yangsong158.iteye.com/blog/2173855
带tab页的ace模板
10-14
网上有许多关于ace模板，但是他们大多数是将模板搬过来，有的喜欢带tab却很少，本模板在原来的基础上进行了优化
ace后台管理系统
03-23
1、兼容BootStrap，兼容Jquery UI。所以可以用bootstrap和jqueryui的功能。当然还有jquery了。这太省心了！ 2、图标使用font awesome 3.2，可以使用字体图标，这就免去了，查找png图标的工作。 3、表格可以用bootstrap的表格，也可以用jqueryui的表格，也可以用jqgrid的表格，jqgrid我用的还是比较多，功能很强大。 4、图表的话，我看ace里有jquery.flot 和?jquery.easy-pie-chart。不过我自己使用的百度的 Echarts，这个功能比较强大。 5、还有一个比较不错的js插件，bootbox.js这个 做提示框我很喜欢！ 6、日历插件，有daterangepicker.min.js等，不过我用的My97DatePicker这个也很赞。 7、另外ace admin还预设了4中样式效果，根据自己喜好进行选择；固定页面中一些元素，宽屏窄屏等等。也比较不错
example-react-dashboard:使用 react、ace 编辑器、bootstrap 和 highcharts 的基本管理仪表板
05-31
目录布局 . ├── /build/ # The folder for compiled output ├── /node_modules/ # 3rd-party libraries and utilities ├── /src/ # The source code of the application │ ├── /api/ # REST API / ...
JqGrid之实际应用
观山是山
08-31 4053
1.主界面： try { ace.settings.check('main-container', 'fixed') } catch (e) { } function cc(data){ alert(data); } try { ace.set
table a
qq 117791303
10-19 314
try { ace.settings.check("main-container", "fixed") } catch (e) { } <!--
Java中使用Select标签绑定下拉框以及通过选中下拉框内容动态回填
weixin_42271651的博客
06-01 3921
Java中绑定下拉框以及通过选中下拉框内容动态回填 MySql里数据库里的表格 思路：选择下拉框内容，动态回填旁边的表格数据： 效果图： 注意看路径，别把路径写错了； JDBC的配置前面的博客里有说到，在这里就不写了。 下面是代码部分： 主要组成部分：一个servlet、一个Jsp、一个po类、一个dao、一个dao实现类、一个service、一个service...
web-inf目录下的jsp无法引用外部css的解决方案
qhlpptdyfn的博客
07-18 1893
看大多数的方法时 &lt;c:set value="${pageContext.request.contextPath}" var="path" scope="page"/&gt; &lt;link type="text/css" href="${path}/css/xxx.css" rel="stylesheet"&gt; //貌似是这样是会返回we
ace-drv32.dll下载
最新发布
09-01
ace-drv32.dll是一个动态链接库（DLL）文件，常用于用于ACE Hardware Corporation的设备驱动程序。该DLL文件是用来与ACE Hardware的设备进行通信和交互的。它包含了一组函数和指令，用于控制硬件设备的操作和功能。 要下载ace-drv32.dll文件，你可以按照以下步骤进行： 首先，在你信任的和可靠的网站上搜索ace-drv32.dll下载。确保选择一个官方或受信任的来源，以确保文件的安全性和完整性。 然后，找到适合你的操作系统的版本。ace-drv32.dll可能有多个版本，以适应不同的操作系统。确保选择与你的系统版本匹配的正确文件。 一旦你找到合适的版本，点击下载按钮或链接。下载可能需要一些时间，具体取决于你的网络速度和文件大小。 下载完成后，你将获得一个压缩文件（通常是一个ZIP文件）。解压缩文件到你希望存储ace-drv32.dll的位置。你可以选择创建一个新的文件夹来存放该文件，以便稍后更容易找到。 完成后，你现在可以使用ace-drv32.dll文件了。在你的程序中引用该文件，并使用内部的函数和指令来与ACE Hardware设备进行交互。 需要注意的是，下载和使用DLL文件需要小心谨慎。确保你从可靠的来源下载文件，并在使用前进行杀毒扫描，以确保文件的安全。如果你对如何下载和使用ace-drv32.dll文件有任何疑问，建议你查阅相关的技术文档或寻求专业的技术支持。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值