直接上代码

<%@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. Java IO6 ：IO总结

    字节流.字符流继承关系 前几篇文章讲解了字节流.字符流的使用,不过Java提供给用户的流类远不止此,限于篇幅原因,没办法一一讲解,而且也没有必要一一讲解,就像我在写博客的时候多次提到的,有问题的时候学 ...

  2. JavaScript数组知识网络

    JavaScript数据类型 基本数据类型 Boolean Null Number String Symbol Undefined 对象数据类型Object Build-in object Array ...

  3. C++程序中不同变量、函数在内存中内存中的分布情况

    一.一个C++编译的程序占用的内存分为以下几个部分 1.栈区:由编译器自动分配 存放函数的参数值,局部变量的值等,操作方式类似于数据结构中的栈. 2.堆区:一般由程序员分配释放,若程序员不释放,程序结 ...

  4. oracle 联表更新

    依 a 表 cate_pub_id  为依据 更新 v 表的 cate_pub_id update td_tobrel_cate_pub_attrval v set v.CATE_PUB_ID=(se ...

  5. linux访问windows共享文件夹的两种方法

    有时需要在linux下需要访问windows的共享文件夹,可以使用mount挂载或者使用samba连接. 1.mount挂载 首先创建被挂载的目录: $ mkdir windows 将共享文件夹挂载到 ...

  6. Jquery表单与表格的运用

    1,表单的应用: a. 单行文本框的应用  多行文本框的应用 b.复选框的框的应用 c.下拉框的应用 d.表单验证 2,表格的应用: a. 表格变色 b.表格展开关闭 d.表格内容筛选 3,多行文本框 ...

  7. Javascript经典实例 - 字符串

    1] 'this is a string'这是字符串直接量,new String('this is a string')这是字符串对象,字符串对象可以用字符串对象所带的属性和方法,直接量在“表面上”也 ...

  8. Sublime 插件安装

    转http://www.cnblogs.com/Rising/p/3741116.html

  9. information_schema.routines 学习

    information_schema.routines 用户查看mysql中的routine信息 1.information_schema.routines 表中的常用列: 1.

  10. hdu Buy the Ticket

    import java.math.BigInteger; import java.util.*; public class Main { public static void main(String ...