左滑动面板效果:

右滑动面板效果:

@{

    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. Hibernate每个具体类一张表映射(使用注释）

    在每个类创建一张表的情况下, 表中不使用Null值的列. 这种方法的缺点是在子类表中创建了重复的列. 在这里,我们需要在父类中使用@Inheritance(strategy = Inheritance ...

  2. [Android L]关于Android L的Service启动问题

    一 问题描写叙述 Android L[Android5.X.X] 版本号通过Intent隐式启动service时将会报出下面错误: AndroidRuntime(  792): java.lang.I ...

  3. ios 关于collectionView.performBatchUpdates()方法 --时时更新

    今天想实现一个简单的collectionView动画效果,查阅相关资料发现,实现 collectionView.performBatchUpdates()方法即可,于是掉坑里了. 文档: public ...

  4. day16 递归函数：一般的递归方法

    一.递归,在一个函数里面 调用 自己: pycharm的最大递归次数是997 查看与修改方法: # # print(sys.getrecursionlimit()) # sys.setrecursio ...

  5. 大话DFT频谱分析（并不是我的话）

    有限长信号DFT结果的频谱泄露 提出问题 依照我们在"信号与系统"这门课建立的印象,不管如何频率的连续正弦信号,其频谱应当是两根笔直的谱线(含负频率) 但是,当我们把一段正弦信号採 ...

  6. 【BZOJ2882】工艺 后缀自动机

    [BZOJ2882]工艺 Description 小敏和小燕是一对好朋友. 他们正在玩一种神奇的游戏,叫Minecraft. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的 ...

  7. oracle中如何判断某个日期是星期几

    SELECT to_char(to_date('2011-03-13','YYYY-MM-DD'),'d') FROM DUAL 其中 红色部分为传入日期 to_char的其他用法 Select to ...

  8. 微信小程序网络请求的setDate

    我感觉这个无比的奇葩..... 因为之前react的时候,我习惯在请求成功的时候直接this.setDate.........但是,在微信小程序中,一定要将this换成一个变量...一定要!!!否则会 ...

  9. RabbitMQ中Queue详细介绍

    新建队列 新建Queue时有很多参数,都代表什么含义,在这里解释一下: 前述:Rabbit版本为3.7.6 ErLang 版本为 21.0.1 Name 必填项,队列的名字,建议格式可以为多个字段,表 ...

  10. FTP上传和下载文件的应用

    FTP(File Transfer Protocol)协议主要用来在网络上进行文件传输.FTP通讯除了有一个默认的端口21外,还有其他端口,同城两个端口同时进行数据传输.一个是默认的端口(通常为21) ...