直接上代码

<%@page pageEncoding="utf-8"

contentType="text/html;charset=utf-8" %>

<%@taglib prefix="c1" uri="http://www.tarena.com/mytag" %>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<c1:sessionValidate/>

<html>

    <head>

        <title>emplist</title>

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>

                <!-- meta使用viewport以确保页面可自由缩放 -->

<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- 引入 jQuery Mobile 样式 -->

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- 引入 jQuery 库 -->

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- 引入 jQuery Mobile 库 -->

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    </head>

    <body>

         <!-- Begin PageSingle -->

    <div data-role="page" id="pageSingle" >

        <div data-role="header" data-theme="b">

        <h1>神农</h1>

        <div data-role="navbar" >

            <ul>

                <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >项目列表</a></li>

                <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >我的信息</a></li>

            </ul>

        </div>

        </div>

        <div data-role="content">

            <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="请输入姓名或者年龄">

                <!-- 动态 显示列表 -->           

                  <table class="table">

                        <tr class="table_header">

                            <td>

                                ID

                            </td>

                            <td>

                                项目名

                            </td>

                            <td>

                                性别要求

                            </td>

                            <td>

                                日期

                            </td>

                            <td>

                            </td>

                        </tr>

                    <c:forEach var="project" items="${projects}"

                    varStatus="status">

                        <tr class="row${status.index % 2 + 1}">

                            <td>

                                ${project.pid}

                            </td>

                            <td>

                                ${project.pname}

                            </td>

                            <td>

                                <c:if test="${user.gender == 'm'}">男</c:if>

                                <c:if test="${user.gender == 'f'}">女</c:if>

                            </td>

                            <td>

                                ${project.date}

                            </td>

                            <td>

                                <a href="pdetail.do?id=${project.pid}">详细</a>

                            </td>

                        </tr>

                        </c:forEach>

                    </table>

            </ul>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >项目列表</a></li>

                <li><a href="#pageSystem" data-transition="slide" data-icon="star" >我的项目</a></li>

                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>

            </ul>

        </div>

        </div>

    </div>

    <!-- End PageSingle -->

    <!-- Begin PageUnSingle -->

    <div data-role="page" id="pageUnSingle">

        <div data-role="header"  data-theme="b" >

        <h1>JokerJason</h1>

        <div data-role="navbar">

            <ul>

                <li><a href="#pageSingle" data-transition="fade" data-theme="c" >项目列表</a></li>

                <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >我的信息</a></li>

            </ul>

        </div>

        </div>

        <div data-role="content">

                   <table class="table">

                        <tr class="table_header">

                            <td>

                                ID

                            </td>

                            <td>

                                姓名

                            </td>

                            <td>

                                性别

                            </td>

                            <td>

                                日期

                            </td>

                            <td>

                            </td>

                        </tr>

                    <c:forEach var="user" items="${users}"

                    varStatus="status">

                        <tr class="row${status.index % 2 + 1}">

                            <td>

                                ${user.id}

                            </td>

                            <td>

                                ${user.username}

                            </td>

                            <td>

                                <c:if test="${user.gender == 'm'}">男</c:if>

                                <c:if test="${user.gender == 'f'}">女</c:if>

                            </td>

                            <td>

                                ${user.age}

                            </td>

                            <td>

                                <a href="userDetail.do?id=${user.id}">详细</a>

                            </td>

                        </tr>

                        </c:forEach>

                    </table>

        </div>

        <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">

        <div data-role="navbar">

            <ul>

                <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">项目列表</a></li>

                <li><a href="#pageSystem" data-transition="slide" data-icon="star">我的项目</a></li>

                <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>

            </ul>

        </div>

        </div>

    </div>

    <!--- End PageUnSingle-->

    </body>

</html>

JSP合用html5 尝试（一）的更多相关文章

  1. JSP笔记01——尝试

    JSP ————> servlet 我的第1个Java Web应用程序——index.jsp 我的第2个Java Web应用程序——welcome-file 我的第3个Java Web应用程序— ...

  2. （转） 浅析HTML5在移动应用开发中的使用

    (转)浅析HTML5在移动应用开发中的使用 (原)http://www.iteye.com/magazines/67   2012-03-07  来自 UECD.163.com  编辑 wangguo ...

  3. HTML5能取代IOS原生应用吗

    介绍 移动应用程序(App)和HTML5都是目前最火的技术,二者之间也有不少重叠之处.在移动设备浏览器里运行的html5的web页面,也可以重新打包成不同平台上运行的app.目前很多浏览器都有很好的跨 ...

  4. SpringBoot使用JSP（官网Demo）

    最开始接触java的时候,前端页面基本都是用jsp来写,最近公司项目要使用SpringBoot重构,查看SpringBoot文档,发现SpringBoot不建议使用JSP,因为jsp在使用内嵌serv ...

  5. 从HTML5移动应用现状谈发展趋势

    时光如梭,自2008年HTML5诞生以来已经过去了5年的时间,作为新一代的Web标准,它自问世以来就受到方方面面的强烈关注,也引起了许多争议,支持者因其开放强大的特点而鼓吹它的美好前景,质疑者因其迟迟 ...

  6. JSP的会话（Session）跟踪

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/session-tracking.html: 会话(Session) HTTP是一个“无状态”协议,这意味 ...

  7. JSP的Cookie处理

    以下内容引用自http://wiki.jikexueyuan.com/project/jsp/Cookies-handling.html: Cookies是存储在客户端计算机的文本文件,保存各种跟踪目 ...

  8. jsp：useBean的属性class值一直报错的问题

    先附上代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8 ...

  9. HTML5能取代Android和iOS应用程序吗？

    大量新生移动设备的兴起,改变了互联网的未来.在技术的发展上,HTML5会取代App应用吗?或者说能够在多大程度上取代呢?在HTML5规范中,已经加入了相机.磁力罗盘.GPS信息的支持.很多新兴浏览器也 ...

随机推荐

  1. （原）ubuntu16在torch中使用caffe训练好的模型

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/5783006.html 之前使用的是torch,由于其他人在caffe上面预训练了inception模型 ...

  2. 基于VMware的eCos环境编译redboot(脚本配置redboot)

    基于VMware的ecos,redboot及hello world(1)安装请参照[[ecos学习2]wmware运行redboot[方法二]--图形实现配置 ] (2)修改内存布局文件:~/i386 ...

  3. js刷新页面

    reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页 ...

  4. 手把手教你学习FPGA系列视频教程_救护车鸣笛声

    本套教程主要面对FPGA初学者,本次DIY活动不仅让初学者掌握FPGA硬件电路设计以及焊接方面的知识,更重要的是让初学者学习硬件描述语言 (VerilogHDL)描述数字电路,以及Quartus II ...

  5. CSS--table之min-height

    table中min-height不起作用. 但是height其实相当于min-height 超过的部分会自动撑开.

  6. Why Does Qt Use Moc for Signals and Slots（QT官方的解释：GUI可以是动态的）

    GUIs are Dynamic C++ is a standarized, powerful and elaborate general-purpose language. It's the onl ...

  7. Grid++Report 报表开发工具

      Grid++Report 报表开发工具   版本 更新日期 大小 下载 说明 Grid++Repoert6.0.0.6 2015/08/08 16.0M [下载] 锐浪报表工具最新版本,新增功能说 ...

  8. 理解最短路径——迪杰斯特拉（dijkstra）算法

    原址地址:http://ibupu.link/?id=29 1.       迪杰斯特拉算法简介 迪杰斯特拉(dijkstra)算法是典型的用来解决最短路径的算法,也是很多教程中的范例,由荷兰计算机科 ...

  9. Randomized QuickSelect

    In this blog, we give a solution for Quick Select. Here, we have an improvement. The idea is to rand ...

  10. PHP MySQL Delete From 之 Delete

    删除数据库中的数据 DELETE FROM 语句用于从数据库表中删除记录. 语法 DELETE FROM table_name WHERE column_name = some_value 注释:SQ ...