左滑动面板效果:

右滑动面板效果:

@{

    ViewBag.Title = "JQuery Mobile Web Page";

}

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Jquery Mobile Web Page</title>

    <link href="~/Content/css/themes/default/jquery.mobile.structure-1.4.0-beta.1.min.css" rel="stylesheet" />

    <link href="~/Content/css/themes/default/jquery.mobile-1.4.0-beta.1.min.css" rel="stylesheet" />

    <script src="~/Content/js/jquery.js"></script>

    <script src="~/Content/js/jquery.mobile-1.4.0-beta.1.js"></script>

</head>

<body>

    <div data-role="page" id="page">

        <div data-role="header">

            <h4>人力资源管理系统 </h4>

            <a href="#leftpanel" data-icon="gear" class="ui-btn-left" data-mini="true">职位</a>

            <a href="#rightpanel" data-icon="bars" class="ui-btn-right" data-mini="true">设置</a>

            <div data-role="navbar">

                <ul>

                    <li><a href="#" class="ui-btn-active">人事资料</a></li>

                    <li><a href="#" class="ui-btn-active">招聘管理</a></li>

                    <li><a href="#" class="ui-btn-active">考勤管理</a></li>

                    <li><a href="#" class="ui-btn-active">培训管理</a></li>

                </ul>

            </div>

            <!-- /navbar -->

        </div>

        <div data-role="content">

            <ul data-role="listview" data-inset="true" data-theme="a">

                <li>通讯录管理</li>

                <li>参与培训计划</li>

                <li>企业公告发布浏览</li>

                <li>工资查询

                </li>

                <li>考勤查询

                </li>

                <li>出差查询

                </li>

                <li>休假查询

                </li>

            </ul>

        </div>

        <div data-role="panel" id="leftpanel" data-theme="a">

            <a href="#" data-theme="a" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-rel="close">返回</a>

            <ul data-role="listview" data-inset="true" data-theme="a">

                <li>项目经理

                </li>

                <li>项目执行经理

                </li>

                <li>技术负责人

                </li>

                <li>生产经理

                </li>

                <li>

                    <select name="slider-flip-m" id="slider-flip-m" data-role="slider" data-mini="true" data-theme="a">

                        <option value="off">关</option>

                        <option value="on" selected="">开</option>

                    </select><h2>离线获取员工资料</h2>

                </li>

            </ul>

            <!-- panel content goes here -->

        </div>

        <div data-role="panel" id="rightpanel" data-theme="b" data-position="right">

            <ul data-role="listview" data-inset="true" data-theme="a">

                <li>用户管理</li>

                <li>角色管理</li>

                <li>系统日志</li>

                <li>密码修改</li>

                <li>机构管理</li>

            </ul>

            <a href="#" data-theme="a" data-role="button" data-icon="check" data-mini="true" data-inline="true" data-rel="close">保存</a>

            <!-- panel content goes here -->

        </div>

        <!-- /panel -->

        <div data-role="footer">

            <h1>Copyright 2013 </h1>

        </div>

    </div>

</body>

</html>

主攻ASP.NET MVC4.0之重生:Jquery Mobile 面板的更多相关文章

  1. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 列表

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  2. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 表单元素

    相关代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  3. 主攻ASP.NET MVC4.0之重生:Jquery Mobile 按钮+对话框使用

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

  5. 主攻ASP.NET MVC4.0之重生:Asp.Net MVC WebApi OData

    1.新建MVC项目,安装OData Install-Package Microsoft.AspNet.WebApi.OData -Version 4.0.0 2.新建WebAPI Controller ...

  6. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC Web API

    UserController代码: using GignSoft.Models; using System; using System.Collections.Generic; using Syste ...

  7. 主攻ASP.NET MVC4.0之重生:CheckBoxListHelper和RadioBoxListHelper的使用

    在项目中新建Helpers文件夹,创建CheckBoxListHelper和RadioBoxListHelper类. CheckBoxListHelper代码 using System; using ...

  8. 主攻ASP.NET MVC4.0之重生:MVC Controller修改Controller.tt模版,自动添加版本注释信息

    第一步找到MVC 4.0 CodeTemplates 一般路径在:C:\Program Files (x86)\Microsoft Visual Studio 11.0\Common7\IDE\Ite ...

  9. 主攻ASP.NET MVC4.0之重生:上下滑动屏幕动态加载数据

                @{ ViewBag.Title = "Index"; } <!DOCTYPE html> <html> <head> ...

随机推荐

  1. pycharm2018.1.4激活破解方法与汉化包-2018年6月19日

    记录下来备用,顺便分享给大家,有能力的还是希望能够支持正版!支持正版!支持正版! 方法1:激活服务器,最简单快速(截止2018年6月19日可用) 在激活Jetbrains旗下任意产品的时候选择激活服务 ...

  2. Oracle常见死锁发生的原因以及解决方法

    Oracle常见死锁发生的原因以及解决办法 一,删除和更新之间引起的死锁 造成死锁的原因就是多个线程或进程对同一个资源的争抢或相互依赖.这里列举一个对同一个资源的争抢造成死锁的实例. Oracle 1 ...

  3. 甲醛(Formaldehyde)

    化学式:HCHO 又称蚁醛 无色气体,有特殊的刺激气味 气体相对密度1.067(空气=1),液体密度0.815g/cm³(-20℃).熔点-92℃,沸点-19.5℃.易溶于水和乙醇.水溶液的浓度最高可 ...

  4. kafka 集群--3个broker 3个zookeeper创建实战

    准备工作: 1. 准备3台机器,IP地址分别为:192.168.0.10,192.168.0.11,192.168.0.12 2. 下载kafka稳定版本,我的版本为:kafka_2.9.2-0.8. ...

  5. 用ElasticSearch搭建自己的搜索和分析引擎【转自腾讯Wetest】

    本文大概地介绍了ES的原理,以及Wetest在使用ES中的一些经验总结.因为ES本身涉及的功能和知识点非常广泛,所以这里重点挑出了实际项目中可能会用到,也可能会踩坑的一些关键点进行了阐述. 一 重要概 ...

  6. 用训练好的caffemodel对单个/批量图片进行分类

    一.单个图片进行分类 这个比较简单,在*.bat文件中输入以下代码: @echo off set BIN_DIR=D:\caffe\caffe-windows\Build\x64\Release se ...

  7. [Noip2016]天天爱跑步 LCA+DFS

    [Noip2016]天天爱跑步 Description 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.?天天爱跑步?是一个养成类游戏,需要玩家每天按时上线,完成打卡任 ...

  8. angularjs 发送ajax请求的问题

    在angularjs中使用 ajax 如果使用 jquery的 ajax发送请求会遇到结果返回了,但是页面的值却没有改变,如: $scope.queryNameMatch = function() { ...

  9. pycharm如何自定义模板?

    按照上图箭头方向设置即可.

  10. of 循环 改变 对象值 对const的理解 对象的字面量 计算属性

    const arr = [{a:23,b:34},{a:123,b:134}]console.log(arr)for (let v of arr){console.log(v)const old = ...