18910140161

Html

首页 >> 前端开发 >> Html

JSP合用html5尝试（一)

顺晟科技

2021-09-16 11:31:29

91

直接上代码

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

 

上一篇：纯Html Ajax和JSP对比的个 下一篇：JSP (2) - JSP和HTML
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！