zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    C# 操作ini配置文件
    2015-2016跨年感想
    HTTP 状态码总结 (HTTP Status Codes)
    简单、精准、高效的使用搜索引擎,快速的找到你想要的结果
    ASP.NET前后台交互之JSON数据
    软件开发项目做需求分析的一点心得
    我是如何自学编程的“3遍读书法”
    C#中Request.ServerVariables详细说明及代理
    C#
    JavaScript如何计算两个日期间的时间差
  • 原文地址:https://www.cnblogs.com/jokerjason/p/5718759.html
Copyright © 2011-2022 走看看