左滑动面板效果:

右滑动面板效果:

@{

    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. Hook length formula 学习笔记 UVALive 6625

    最近做到一个关于杨氏矩阵的题目. UVALive 6625 题目大意是用n以内的数填充杨氏矩阵,要求行严格递增,列不严格递增. 求方案数. 数据范围很小,我直接上爆搜,结果TLE了. 后来发现一位学长 ...

  2. ActiveMQ部署步骤和后台管理网站Service Unavailable问题解决笔记

    最近部署ActiveMQ的时候,发现有的服务器可以打开后台管理网址,有的服务器无法打开,Jetty报503 Service Unavailable. 搞了很久终于发现了问题,现将部署和解决过程做笔记如 ...

  3. phpcms v9 配置sphinx全文索引教程

    英文介绍:http://www.sphinxsearch.com/docs/manual-0.9.9.html 一.首先需要在服务器上安装sphinx 在Windows上安装sphinx     1. ...

  4. oracle ora-01652/oracle表空间

    参考: oracel bigfile tablespace:(推荐) http://blog.chinaunix.net/uid-20779720-id-3078273.html ora-01652解 ...

  5. 初窥ElasticSearch

    初窥ElasticSearch 官网上面的,不知道讲的是什么.. youtube上面有一个start with,内容是在windows以下跑这个elastic search,然后用一个fidler工具 ...

  6. python爬虫：正则表达式

    符号: . : 匹配任意字符(类似占位符,多少个.就表示多少个字符),换行符除外(与re.S相反) *:匹配前面一个字符0次或无限次 ?:匹配前面一个字符0次或1次 组合: .* : 贪心算法 一次匹 ...

  7. MariaDB二进制包简单安装部署

    一.简介: MySQL最早是由Michael Widenius在所研发,而在后来Michael先生以10亿美元的价格把MySQL卖给了SUN以后不久SUN就被Oracle公司给收购了,在Oracle收 ...

  8. ThinkPHP部分内置函数

    D.F.S.C.L.A.I 他们都在functions.php这个文件家下面我分别说明一下他们的功能 D() 加载Model类M() 加载Model类 A() 加载Action类L() 获取语言定义C ...

  9. Sharepoint server 2016自定义作业不能部署

    最近帮客户部署SharePoint server 2016生产环境,自定义作业总是不能部署上,原来我在部署过程中MinRole选的是Web前端服务器:经过几天的测试研究,发现要有single serv ...

  10. 关于angularjs的select下拉列表存在空白的解决办法

    angularjs 的select的option是通过循环造成的,循环的方式可能有ng-option或者</option  ng-repeat></option>option中 ...