左滑动面板效果:

右滑动面板效果:

@{

    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. Javascript间歇调用和超时调用

    间歇调用:每隔指定的时间就执行一次代码 超时调用:在指定的时间过后执行代码  HTML Code  12345678910111213141516171819   <!DOCTYPE html& ...

  2. How to convert BigDecimal to Double in spring-data-mongodb framework

    问题描述:我们都知道对于涉及钱的数据必须使用BigDecimal类型进行存储,今天在查询mongo时仍然有精度问题,虽然我在代码中使用了Big Decimal类型,但mongo中使用的是double类 ...

  3. Jmeter BeanShell 引用变量报错jmeter.util.BeanShellInterpreter: Error invoking bsh method: eval Parse error at line 14, column 181 : Error or number too big for integer

    如果你通过CSV Data Set Config或者_StringFromFile函数来参数化你的请求,需要特别注意当参数为纯数字时,jmeter会默认将其识别成int型数据,说明jmeter并不是默 ...

  4. python urllib2/urllib实现

    urllib2和urllib是Python中的两个内置模块,要实现HTTP功能,实现方式是以urllib2为主,urllib为辅 urllib2提供一个基础函数urlopen,通过向指定的url发出请 ...

  5. Android无线测试之—UiAutomator UiDevice API介绍三

    获取坐标与坐标点击 一.坐标相关的知识: 1)手机屏幕坐标:左上角开始到右下角结束 2)DP:设备独立像素,例如320像素显示到640像素上要拉伸一倍 3)Point:代表一个点(x,y),左上角的坐 ...

  6. 【BZOJ3444】最后的晚餐 乱搞

    [BZOJ3444]最后的晚餐 Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人在举行最后的离别晚餐时,饭店老板觉得十分纠结.因为有m名学生偷偷找他,要求和自己暗恋 ...

  7. RTSP安防摄像机（海康大华宇视等）如何推送到RTMP流媒体服务器进行直播

    方案介绍 目前互联网直播的CDN和标准RTMP流媒体服务器通常只能接收RTMP格式的音视频推流.目前市场上有一些自带RTMP推流的摄像机和编码器,可以直接在其rtmp推流配置里面配置推送到RTMP流媒 ...

  8. mixin 在传参中可以出现 参数 在类内部可以定义 作用域

    mixin 在传参中可以出现 参数  在类内部可以定义

  9. https nginx openssl 自签名

    公私钥:公钥可以唯一解密私钥加密过的数据,反之亦然.以下用P指代公钥,V指代私钥.SSL过程:需要两对公私钥(P1,V1),(P2,V2),假设通信双方是A和B,B是服务器,A要确认和它通信的是B:A ...

  10. python模块学习(三)

    logging模块 简单应用 import logging  logging.debug('debug message')  logging.info('info message')  logging ...