直接上代码

<%@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. Android 多线程断点下载（非原创）

    1.服务器的CPU分配给每条线程的时间片相同,服务器带宽平均分配给每条线程,所以客户端开启的线程越多,就能抢占到更多的服务器资源,这里在客户端开启多个线程来从服务器下载资源 2.fragment_ma ...

  2. Java---文件夹及文件操作

    /** * 获取文件夹大小 * @param file File实例 * @return long */ public static long getFolderSize(java.io.File f ...

  3. 使用react-native做一个简单的应用－05 navigator的使用

    今天生病了,难受... Navigator顾名思义就是导航器的意思. 在Android和iOS中,导航器的样式是不一样的 ,有一个比较好的网址可以提供大家学习(网址),由于样式的不统一,于是我决定自己 ...

  4. Linux中yum的安装

    下载安装yum: wget http://yum.baseurl.org/download/3.2/yum-3.2.28.tar.gz .tar.gz cd touch /etc/yum.conf c ...

  5. sqlite3---代码操作

    1.创建数据库 NSString * docPath = [NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainM ...

  6. find系列之xargs命令

    xargs的功能-->     将标准输入转换为命令行参数,供后面的命令调用,但是一次只能依据-d和-n限定的行数来推送一行 xargs的作用-->     使那些不能利用stdin的命令 ...

  7. PAT 1059. Prime Factors (25) 质因子分解

    题目链接 http://www.patest.cn/contests/pat-a-practise/1059 Given any positive integer N, you are suppose ...

  8. Ultra-QuickSort(树状数组+离散化)

    Ultra-QuickSort  POJ 2299 Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 50495   Accep ...

  9. js阻止事件冒泡的方法

    /********************************************js方法*************************************************** ...

  10. WPF中获取控件之间的相对位置

    1,获取元素相对于父控件的位置 使用Vector VisualTreeHelper.GetOffset(Visual visual)方法,其会返回visual在其父控件中的偏移量,然后你再将返回值的V ...