Fork me on GitHub

jQuery mobile

jQuery Mobile is a touch-optimized HTML5 UI framework designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

Ref:http://demos.jquerymobile.com/1.4.1/

复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="header">
            <h1>審批信息</h1>
        </div>
        <div role="main" class="ui-content">
            <label for="text-basic">批示意見:</label>
            <input type="text" name="text-basic" data-clear-btn="true" id="text-basic">
            <input type="button" value="同意">
            <input type="button" value="拒絕">
            <form>
                <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                    <legend>申請人資料</legend>
                    <div class="ui-field-contain">
                        <label for="textinput-1">建議書編號：</label>
                        <input type="text" name="textinput-1" id="textinput-1" data-mini="true" value="P-001">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-2">批示日期：</label>
                        <input type="text" name="textinput-1" id="textinput-2" data-mini="true" value="01/01/1014">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-3">預留鐘數：</label>
                        <input type="text" name="textinput-1" id="textinput-3" data-mini="true" value="20">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-4">申請編號：</label>
                        <input type="text" name="textinput-1" id="textinput-4" data-mini="true" value="000001-14">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-5">申請人：</label>
                        <input type="text" name="textinput-1" id="textinput-5" data-mini="true" value="Max">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-6">申請日期：</label>
                        <input type="text" name="textinput-1" id="textinput-6" data-mini="true" value="05/02/2014">
                    </div>
                </fieldset>
                <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                    <legend>申請明細</legend>
                    <div class="ui-field-contain">
                        <table class="ui-responsive table-stroke table-stripe" id="table1" data-role="table" data-mode="reflow">
                            <thead>
                                <tr>
                                    <th data-priority="persist">日期</th>
                                    <th data-priority="1">時間</th>
                                    <th data-priority="2">原因</th>
                                    <th data-priority="3">補償類別</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>01/02/2014</th>
                                    <td>8:00-9:00</td>
                                    <td>xxx</td>
                                    <td>02</td>
                                </tr>
                                <tr>
                                    <th>02/02/2014</th>
                                    <td>10:00-11:00</td>
                                    <td>xxx</td>
                                    <td>01</td>
                                </tr>
                                <tr>
                                    <th>03/02/2014</th>
                                    <td>7:00-9:00</td>
                                    <td>xxx</td>
                                    <td>01</td>
                                </tr>
                                <tr>
                                    <th>04/02/2014</th>
                                    <td>9:00-10:00</td>
                                    <td>xxx</td>
                                    <td>02</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
                <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                    <legend>審批歷史</legend>
                    <div class="ui-field-contain">
                        <table class="ui-responsive table-stroke table-stripe" id="table2" data-role="table" data-mode="reflow">
                            <thead>
                                <tr>
                                    <th data-priority="persist">審批人</th>
                                    <th data-priority="1">審批時間</th>
                                    <th data-priority="2">批示意見</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Nick</th>
                                    <td>06/02/2014</td>
                                    <td>同意</td>
                                </tr>
                                <tr>
                                    <th>Sam</th>
                                    <td>06/02/2014</td>
                                    <td>同意</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</body>
</html>
View Code
复制代码
复制代码
<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>

<body>
<div data-role="page">
    <div data-role="header">
        <a class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-refresh" href="#">刷新</a>
         <h1>工作清單</h1>
    </div>
    <div role="main" class="ui-content">
        <form>
            <div class="ui-field-contain">
                <table class="ui-responsive table-stroke table-stripe" id="tablex" data-role="table" data-mode="reflow">
                    <thead>
                        <tr>
                            <th data-priority="persist">選擇</th>
                            <th data-priority="persist">申請編號</th>
                            <th data-priority="1">申請人</th>
                            <th data-priority="2">申請日期</th>
                            <th data-priority="3">建議書編號</th>
                            <th data-priority="4">批示日期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th>
                                <input type="checkbox" /></th>
                            <th>000001-14</th>
                            <td>Nick</td>
                            <td>01/02/2014</td>
                            <td>P-001</td>
                            <td>02/02/2014</td>
                        </tr>
                        <tr>
                            <th>
                                <input type="checkbox" /></th>
                            <th>000002-14</th>
                            <td>Sam</td>
                            <td>02/02/2014</td>
                            <td>P-002</td>
                            <td>03/02/2014</td>
                        </tr>
                        <tr>
                            <th>
                                <input type="checkbox" /></th>
                            <th>000003-14</th>
                            <td>Max</td>
                            <td>03/02/2014</td>
                            <td>P-003</td>
                            <td>04/02/2014</td>
                        </tr>
                    </tbody>
                </table>
                <input type="button" value="審批">
            </div>
        </form>
    </div>
    </div>
</body>
</html>
View Code
复制代码
复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-role="header">
            <a class="ui-btn-left ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-back" href="#">返回</a>
            <h1>審批信息</h1>
        </div>
        <div role="main" class="ui-content">
            <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                <legend>選取列表</legend>
                <div class="ui-field-contain">
                    <fieldset data-role="controlgroup" data-type="horizontal">
                        <button class="ui-shadow ui-btn ui-corner-all ui-icon-check ui-btn-icon-left">同意</button>
                        <button class="ui-shadow ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left">拒絕</button>
                        <button class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-l ui-btn-icon-left">上一個</button>
                        <button class="ui-shadow ui-btn ui-corner-all ui-icon-arrow-r ui-btn-icon-left">下一個</button>
                    </fieldset>
                    <div class="ui-field-contain">
                        <ul data-role="listview" data-inset="true">
                            <li data-role="list-divider">申請編號：000001-14<span class="ui-li-count" style="color:green;">同意</span></li>
                            <li><h2>情況屬實</h2></li>
                            <li data-role="list-divider">申請編號：000002-14<span class="ui-li-count" style="color:red;">拒絕</span></li>
                            <li><h2>情況不符合</h2></li>
                        </ul>

                    </div>
                </div>
                <label for="text-basic">批示意見:</label>
                <input type="text" name="text-basic" data-clear-btn="true" id="text-basic">
                <input type="button" value="確定">
            </fieldset>
            <form>
                <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                    <legend>申請人資料</legend>
                    <div class="ui-field-contain">
                        <label for="textinput-1">建議書編號：</label>
                        <input type="text" name="textinput-1" id="textinput-1" data-mini="true" value="P-001">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-2">批示日期：</label>
                        <input type="text" name="textinput-1" id="textinput-2" data-mini="true" value="01/01/1014">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-3">預留鐘數：</label>
                        <input type="text" name="textinput-1" id="textinput-3" data-mini="true" value="20">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-4">申請編號：</label>
                        <input type="text" name="textinput-1" id="textinput-4" data-mini="true" value="000001-14">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-5">申請人：</label>
                        <input type="text" name="textinput-1" id="textinput-5" data-mini="true" value="Max">
                    </div>
                    <div class="ui-field-contain">
                        <label for="textinput-6">申請日期：</label>
                        <input type="text" name="textinput-1" id="textinput-6" data-mini="true" value="05/02/2014">
                    </div>
                </fieldset>
                <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                    <legend>申請明細</legend>
                    <div class="ui-field-contain">
                        <table class="ui-responsive table-stroke table-stripe" id="table3" data-role="table" data-mode="reflow">
                            <thead>
                                <tr>
                                    <th data-priority="persist">日期</th>
                                    <th data-priority="1">時間</th>
                                    <th data-priority="2">原因</th>
                                    <th data-priority="3">補償類別</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>01/02/2014</th>
                                    <td>8:00-9:00</td>
                                    <td>xxx</td>
                                    <td>02</td>
                                </tr>
                                <tr>
                                    <th>02/02/2014</th>
                                    <td>10:00-11:00</td>
                                    <td>xxx</td>
                                    <td>01</td>
                                </tr>
                                <tr>
                                    <th>03/02/2014</th>
                                    <td>7:00-9:00</td>
                                    <td>xxx</td>
                                    <td>01</td>
                                </tr>
                                <tr>
                                    <th>04/02/2014</th>
                                    <td>9:00-10:00</td>
                                    <td>xxx</td>
                                    <td>02</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
                <fieldset data-role="collapsible" data-collapsed="false" data-collapsed-icon="carat-d" data-expanded-icon="carat-u">
                    <legend>審批歷史</legend>
                    <div class="ui-field-contain">
                        <table class="ui-responsive table-stroke table-stripe" id="table4" data-role="table" data-mode="reflow">
                            <thead>
                                <tr>
                                    <th data-priority="persist">審批人</th>
                                    <th data-priority="1">審批時間</th>
                                    <th data-priority="2">批示意見</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th>Nick</th>
                                    <td>06/02/2014</td>
                                    <td>同意</td>
                                </tr>
                                <tr>
                                    <th>Sam</th>
                                    <td>06/02/2014</td>
                                    <td>同意</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
</body>
</html>
View Code
复制代码

 

posted @   Nick.Chung  阅读(385)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· C# 13 中的新增功能实操
· Vue3封装支持Base64导出的电子签名组件
· 万字长文详解Text-to-SQL
· Ollama本地部署大模型总结
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（4）
点击右上角即可分享
微信分享提示
AI原生IDE