直接上代码

<%@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. C# using垃圾回收详解

    简介 定义一个范围,将在此范围之外释放一个或多个对象. 语法 using (Font font1 = new Font("Arial", 10.0f)) { } C# 语言参考 主 ...

  2. 使用do...while的方法输入一个月中所有的周日

    do{ var date = Number(prompt('请输入一个月的总天数')); var start = (prompt('请输入一个月的一号是周几')); for(var i=0;i< ...

  3. _ConnectionPtr.CreateInstance(__uuidof(Connection))“不支持此接口”错误解决

    最近在换了win7 64位的系统,今天突然发现以前写的ADO连接数据库的代码编译后在windows2003下会执行到: _ConnectionPtr.CreateInstance(__uuidof(C ...

  4. C++ 语言特性的性能分析

    转载:http://www.cnblogs.com/rollenholt/archive/2012/05/07/2487244.html      大多数开发人员通常都有这个观点,即汇编语言和 C 语 ...

  5. mysql函数全解析

    本文摘自:http://www.cnblogs.com/cocos/archive/2011/05/06/2039469.html mysql函数大全 对于针对字符串位置的操作,第一个位置被标记为1. ...

  6. 【solr专题之三】Solr常见异常

    1.RemoteSolrException: Expected mime type application/octet-stream but got text/html 现象: SLF4J: Fail ...

  7. ElasticSearch入门知识扫盲

    ElasticSearch 入门介绍 tags: 第三方 lucene [toc] 1. what Elastic Search(ES)是什么 全文检索和lucene 全文检索 优点:高效,准确,分词 ...

  8. SET XACT_ABORT 的用法[转]

    SET XACT_ABORT指定当 Transact-SQL 语句产生运行时错误时,Microsoft® SQL Server™ 是否自动回滚当前事务. 语法 SET XACT_ABORT { ON ...

  9. Firebug介绍及使用技巧

    一.介绍 Firebug是网页浏览器Firefox下的一款开发调试工具.安装firebug后在浏览器的插件工具栏中(上方)会有一个小甲虫的图标. F12打开和关闭Firebug窗口. 二.FireBu ...

  10. 无聊写了一个最简单的MVC4+Highcharts连数据库例子

    乱搞了个数据库 后面发现没定INT类型 直接将ID当数据显示了 效果图: 前端 @{ Layout = null; } <!DOCTYPE html> <html> <h ...