直接上代码

  1. <%@page pageEncoding="utf-8"
  2. contentType="text/html;charset=utf-8" %>
  3. <%@taglib prefix="c1" uri="http://www.tarena.com/mytag" %>
  4. <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
  5. <c1:sessionValidate/>
  6. <html>
  7.     <head>
  8.         <title>emplist</title>
  9.         <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
  10.  
  11.                 <!-- meta使用viewport以确保页面可自由缩放 -->
  12. <meta name="viewport" content="width=device-width, initial-scale=1">
  13.  
  14. <!-- 引入 jQuery Mobile 样式 -->
  15. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  16.  
  17. <!-- 引入 jQuery 库 -->
  18. <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  19.  
  20. <!-- 引入 jQuery Mobile 库 -->
  21. <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  22.  
  23.     </head>
  24.     <body>
  25.          <!-- Begin PageSingle -->
  26.     <div data-role="page" id="pageSingle" >
  27.         <div data-role="header" data-theme="b">
  28.         <h1>神农</h1>
  29.         <div data-role="navbar" >
  30.             <ul>
  31.                 <li><a href="#" data-transition="fade"  data-theme="c" class="ui-btn-active ui-state-persist" >项目列表</a></li>
  32.                 <li><a href="#pageUnSingle" data-transition="fade"  data-theme="c" >我的信息</a></li>
  33.             </ul>
  34.         </div>
  35.         </div>
  36.  
  37.         <div data-role="content">
  38.             <ul data-role="listview"  id="singleList" data-filter="true" data-filter-placeholder="请输入姓名或者年龄">
  39.                 <!-- 动态 显示列表 -->           
  40.  
  41.                   <table class="table">
  42.                         <tr class="table_header">
  43.                             <td>
  44.                                 ID
  45.                             </td>
  46.                             <td>
  47.                                 项目名
  48.                             </td>
  49.                             <td>
  50.                                 性别要求
  51.                             </td>
  52.                             <td>
  53.                                 日期
  54.                             </td>
  55.                             <td>
  56.  
  57.                             </td>
  58.                         </tr>
  59.                     <c:forEach var="project" items="${projects}"
  60.                     varStatus="status">
  61.                         <tr class="row${status.index % 2 + 1}">
  62.                             <td>
  63.                                 ${project.pid}
  64.                             </td>
  65.                             <td>
  66.                                 ${project.pname}
  67.                             </td>
  68.                             <td>
  69.                                 <c:if test="${user.gender == 'm'}">男</c:if>
  70.                                 <c:if test="${user.gender == 'f'}">女</c:if>
  71.                             </td>
  72.                             <td>
  73.                                 ${project.date}
  74.                             </td>
  75.                             <td>
  76.                                 <a href="pdetail.do?id=${project.pid}">详细</a>
  77.                             </td>
  78.                         </tr>
  79.                         </c:forEach>
  80.                     </table>
  81.  
  82.             </ul>
  83.         </div>
  84.  
  85.         <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
  86.         <div data-role="navbar">
  87.             <ul>
  88.                 <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist" >项目列表</a></li>
  89.                 <li><a href="#pageSystem" data-transition="slide" data-icon="star" >我的项目</a></li>
  90.                 <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>
  91.             </ul>
  92.         </div>
  93.         </div>
  94.     </div>
  95.     <!-- End PageSingle -->
  96.  
  97.     <!-- Begin PageUnSingle -->
  98.     <div data-role="page" id="pageUnSingle">
  99.         <div data-role="header"  data-theme="b" >
  100.         <h1>JokerJason</h1>
  101.         <div data-role="navbar">
  102.             <ul>
  103.                 <li><a href="#pageSingle" data-transition="fade" data-theme="c" >项目列表</a></li>
  104.                 <li><a href="#" data-transition="fade" class="ui-btn-active ui-state-persist"  data-theme="c" >我的信息</a></li>
  105.             </ul>
  106.         </div>
  107.  
  108.         </div>
  109.  
  110.         <div data-role="content">
  111.  
  112.                    <table class="table">
  113.                         <tr class="table_header">
  114.                             <td>
  115.                                 ID
  116.                             </td>
  117.                             <td>
  118.                                 姓名
  119.                             </td>
  120.                             <td>
  121.                                 性别
  122.                             </td>
  123.                             <td>
  124.                                 日期
  125.                             </td>
  126.                             <td>
  127.  
  128.                             </td>
  129.                         </tr>
  130.                     <c:forEach var="user" items="${users}"
  131.                     varStatus="status">
  132.                         <tr class="row${status.index % 2 + 1}">
  133.                             <td>
  134.                                 ${user.id}
  135.                             </td>
  136.                             <td>
  137.                                 ${user.username}
  138.                             </td>
  139.                             <td>
  140.                                 <c:if test="${user.gender == 'm'}">男</c:if>
  141.                                 <c:if test="${user.gender == 'f'}">女</c:if>
  142.                             </td>
  143.                             <td>
  144.                                 ${user.age}
  145.                             </td>
  146.                             <td>
  147.                                 <a href="userDetail.do?id=${user.id}">详细</a>
  148.                             </td>
  149.                         </tr>
  150.                         </c:forEach>
  151.                     </table>
  152.  
  153.         </div>
  154.  
  155.         <div data-role="footer" data-position="fixed"  data-theme="b" data-id="pageFooter">
  156.         <div data-role="navbar">
  157.             <ul>
  158.                 <li><a href="#" data-transition="slide" data-icon="grid" class="ui-btn-active ui-state-persist">项目列表</a></li>
  159.                 <li><a href="#pageSystem" data-transition="slide" data-icon="star">我的项目</a></li>
  160.                 <li><a href="#pageSetting" data-transition="slide" data-icon="gear">系统设置</a></li>
  161.             </ul>
  162.         </div>
  163.         </div>
  164.  
  165.     </div>
  166.     <!--- End PageUnSingle-->
  167.  
  168.     </body>
  169. </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. ext.net中ComboBox空间实现模糊查询

    ComboBox中的属性添加Mode="Local"可以实现第一个字的模糊查询但是搜索中间的字无法实现 现提供一下方法使用正则表达式实现全模糊查询 <ext:ComboBox ...

  2. Cisco cmd命令（三）动态路由协议

    路由选择协议:1.矢量距离协议 2.链路状态协议 RIP路由选择协议:1.使用矢量距离协议 2.RIPv1只能使用有类路由 3.RIPv2可以使用无类路由 路由更新定时器:用于将路由器本身完整的路由选 ...

  3. OC中限制UITextView的最大字数的实现

    一.属性 //自定义的textview @property (weak, nonatomic) IBOutlet UITextView *textview; //添加一个bool类型的属性 @prop ...

  4. UIScrollView 滑动试图

    UIScrollView --->UIView //创建UIScrollView testScrollView=[[UIScrollView alloc]init]; testScrollVie ...

  5. VIM编辑器操作指令

    VIM有三种操作模式: 1,命令模式--command mode 2,输入模式--insert mode 3,底行模式--last line mode [在命令模式的时候,按Shift +  :出现的 ...

  6. 简易的WPF MVVM模式开发

    Model层 public class Song { private string _artistName; private string _songTitle; public string Song ...

  7. jQuery中$.proxy()的原理和使用

    jQuery.proxy(),接受一个函数,然后返回一个新函数,并且这个新函数始终保持了特定的上下文(context )语境. jQuery.proxy( function, context ) fu ...

  8. text-overflow 文字溢出时的设置

    text-overflow : clip | ellipsis clip: 不显示省略标记(...),而是简单的裁切. ellipsis: 当对象内文本溢出时显示省略标记(...) 设置或检索是否使用 ...

  9. Reverse Linked List 解答

    Question Reverse a singly linked list. Solution 1 -- Iterative Remember to set head.next = null or i ...

  10. （转载）HDU4565

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4565 这个博客讲的比较好:http://blog.csdn.net/ljd4305/article/d ...