当前位置: 首页 > news >正文

JSP合用html5 尝试(一)

直接上代码

<%@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>

 

转载于:https://www.cnblogs.com/jokerjason/p/5718759.html

相关文章:

  • 文件夹的一个小勾(复选框)
  • 外网主机访问虚拟机下的web服务器(NAT端口转发)
  • 什么是Web Service?
  • javascript学习之路之元素获取和设置属性
  • Mongo数据模型
  • linux目录结构,文件管理
  • 键盘ASCII码
  • 数据备份 rsyncd服务器
  • 奇葩属性:layout_weight 的解释及使用
  • DDoS***防御和分析
  • Oracle字符分隔函数(split)
  • 编译u-boot命令和u-boot常用命令
  • Win7的ftp功能
  • 初识linux之LEMP
  • ORACLE expdp/impdp详解
  • 【译】理解JavaScript:new 关键字
  • Apache的基本使用
  • C语言笔记(第一章:C语言编程)
  • Dubbo 整合 Pinpoint 做分布式服务请求跟踪
  • Effective Java 笔记(一)
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • flutter的key在widget list的作用以及必要性
  • JavaScript DOM 10 - 滚动
  • JavaScript创建对象的四种方式
  • java取消线程实例
  • Linux gpio口使用方法
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • Redux系列x:源码分析
  • seaborn 安装成功 + ImportError: DLL load failed: 找不到指定的模块 问题解决
  • vue2.0开发聊天程序(四) 完整体验一次Vue开发(下)
  • 动态规划入门(以爬楼梯为例)
  • 关于Flux,Vuex,Redux的思考
  • 深度学习入门:10门免费线上课程推荐
  • 职业生涯 一个六年开发经验的女程序员的心声。
  • Java数据解析之JSON
  • ​ ​Redis(五)主从复制:主从模式介绍、配置、拓扑(一主一从结构、一主多从结构、树形主从结构)、原理(复制过程、​​​​​​​数据同步psync)、总结
  • #13 yum、编译安装与sed命令的使用
  • #我与Java虚拟机的故事#连载14:挑战高薪面试必看
  • $(selector).each()和$.each()的区别
  • (delphi11最新学习资料) Object Pascal 学习笔记---第8章第5节(封闭类和Final方法)
  • (html转换)StringEscapeUtils类的转义与反转义方法
  • (Matalb时序预测)WOA-BP鲸鱼算法优化BP神经网络的多维时序回归预测
  • (二)Pytorch快速搭建神经网络模型实现气温预测回归(代码+详细注解)
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (转)使用VMware vSphere标准交换机设置网络连接
  • (转载)深入super,看Python如何解决钻石继承难题
  • .NET 4 并行(多核)“.NET研究”编程系列之二 从Task开始
  • .NET Core 中插件式开发实现
  • .NET Framework与.NET Framework SDK有什么不同?
  • .NET 药厂业务系统 CPU爆高分析
  • /usr/bin/env: node: No such file or directory
  • @Query中countQuery的介绍
  • @基于大模型的旅游路线推荐方案
  • [ 手记 ] 关于tomcat开机启动设置问题
  • [AMQP Connection 127.0.0.1:5672] An unexpected connection driver error occured