直接上代码

<%@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. Web系统如何做到读取客户电脑MAC等硬件信息且兼容非IE浏览器

    我们在实际Web应用中,可能会遇到“需要限定特定的电脑或用户才能使用系统”的问题. 对于一般情况来说,我们用得最多的可能是使用ActiveX控件的方法来实现,但此方案只适用于IE浏览器.为了能兼容不同 ...

  2. qq去广告

    首先呢,在文件资源管理器中选择查看"隐藏的项目"或"显示隐藏的文件.文件夹和驱动器"(入口不一样,选择显示隐藏文件的方式也不一样),随后进入 C:\Users\ ...

  3. HDU 5815 - Golden Week

    题意: 王国地图为 n 个节点的根树,首都为 1, m 个旅行家要去不同的终点旅游,他们分别有各自的预算,如果路上总费用超过预算就不去了 给每条路定价, 让赚的钱最多 分析:    DP[i][j]表 ...

  4. 2014年亚洲区域赛北京赛区现场赛A,D,H,I,K题解(hdu5112,5115,5119,5220,5122)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud 下午在HDU上打了一下今年北京区域赛的重现,过了5题,看来单挑只能拿拿铜牌,呜呜. ...

  5. [Head First Python]6. summary

    1- 字典-内置数据结构,数据值与键值关联 键-字典中查找部分 值-字典中数据部分 使用dict()工厂函数或者只用{}可以创建一个空字典 >>> list = {} >> ...

  6. python之安装

    1.python控制软件pyenv 依赖软件:git [root@localhost ~]# curl https://raw.github.com/yyuu/pyenv-installer/mast ...

  7. opencv中的图像区域复制

    openCV作为已经成熟的开源库,很多操作它都已经有了高效,使用方便的方法.我的应用场景是这样的,从一张大图片中抠出一小部分,然后处理这一小部分后再放到大图像中.对于抠出来可以这样实现: Rect r ...

  8. c#POST请求和接收post请求

    c# post请求发送数据 /// <summary> /// POST请求 /// </summary> /// <param name="url" ...

  9. hdu 1466 计算直线的交点数

    http://acm.hdu.edu.cn/showproblem.php?pid=1466 N条直线的交点方案数 = c 条直线交叉的交点数与(N-c)条平行线 + c 条直线本身的交点方案 = ( ...

  10. C# ADO基础 SqlHelper

    class SqlHelper { //这个是将连接数据库的字符串写到配置文件中的 private static string connStr = ConfigurationManager.Conne ...