使用jquery构建mvc_使用jQuery Mobile构建移动面板

就屏幕尺寸而言，移动设备的屏幕比PC显示器小。 在查看网页或应用程序时，某些元素会进行翻译以适应此屏幕限制。 通常，在右侧或左侧有一个按钮，当点击它时，它将显示隐藏的元素。

以iOS版Facebook应用为例； 如果单击左侧的图标，则将显示用于导航应用程序的链接菜单，而如果单击右侧的图标，则将显示您的在线联系人。 当今大多数应用程序都采用类似的方法。

在我们之前的文章中，Jake向您展示了如何使用jQuery从头构建这种功能 。 今天，我们将探索另一种使用jQuery Mobile的方式。

jQuery Mobile是一个专门设计用于为iOS，Android，Windows Phone，Blackberry和Symbian等移动设备构建用户界面和交互的框架。 在我们的讨论上下文中，它提供了一个名为Panel Slide的组件，可以更轻松地构建该功能。

需求

首先，您需要下载jQuery，jQuery Mobile Library和jQuery Mobile Stylesheet。 然后将它们链接到您HTML文档，就像这样。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>

HTML标记

根据您构建的应用程序，Panel可以是任何东西。 在此示例中，我将按照Facebook进行简化。

在本文中，我将创建左右两个面板。 左侧面板用于放置应用程序菜单导航，左侧面板用于列出当前在线的人员。

我们的演示页面包括四个部分，标题，内容和两个面板。 在jQuery Mobile中 ，这些部分使用HTML5 data-role属性定义，如下所示。

<div data-role="page">
	<div class="header" data-role="header">
		<span class="open left"><a href="#panel-01">&#61641;</a></span>
        <span class="title">Hello World</span>
		<span class="open right"><a href="#panel-02">&#9776;</a></span>
	</div>
    <div class="content" data-role="content">
        <h3>This is the content</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam [...].</p>
    </div>
    <div class="panel left" data-role="panel" data-position="left" data-display="push" id="panel-01">
        <ul>
            <li class="newsfeed"><a href="#" title="Home">News Feed</a></li>
            <li class="profile"><a href="#" title="Profile">Profile</a></li>
            <li class="setting"><a href="#" title="Setting">Setting</a></li>
            <li class="logout"><a href="#" title="Logout">Logout</a></li>
            <li class="report"><a href="#" title="Report">Report Bug</a></li>
        </ul>
    </div>
	<div class="panel right" data-role="panel" data-position="right" data-display="overlay" id="panel-02">
	    	<ul>
	    		<li><a href="#" title="John Doe"><span class="avatar"><img src="img/mambows_120.jpg" width="30" height="30"></span>John Doe</a></li>
	    		<li><a href="#" title="Jessy Doe"><span class="avatar"><img src="img/mkalalang_120.jpg" width="30" height="30"></span>Jessy Doe</a></li>
	    	</ul>
	</div>
</div>

jQuery Mobile提供了三种显示面板的方法，即reveal ， push和overlay ； 这些方法通过data-display属性指定。

reveal将通过滑动内容页面来显示面板。 如果未明确指定属性，则将应用默认方法。 push方法将通过同时滑动面板和内容来显示面板，而overlay方法将面板显示在页面内容的顶部。

CSS和主题

由于已链接jQuery Mobile样式表，因此我们的页面也已设置样式，而无需其他样式规则。

您可以应用使用data-theme属性提供data-theme 。 但是，在此示例中，我们将仅保留上面屏幕截图中所示的标题样式，然后自行设置页面和面板的样式。 这是我们的样式规则。

.open a, .open a:hover {
	padding: 7px 15px;
	background-color: #000;
	border-radius: 3px;
}
.open { 
	color: #fff;
	position: absolute;
}
.open.left {
	left: 20px;
	cursor: pointer;
}
.open.right {
	right: 20px;
	cursor: pointer;
}
.panel {
	background: #7F8C8D;
	color: #ECF0F1;
}
.panel a {
	color: #FFF !important;
	text-shadow: 0 0 0 rgba(0,0,0,0);
	font-size: 14px;
	padding: 15px 20px 15px 60px;
	display: block;
	text-decoration: none;
	border-bottom: 1px solid #475657;
	border-top: 1px solid #95A5A6;
	position: relative;
	font-weight: 400;
}
.panel ul {
	padding: 0;
	margin: 0;
	list-style: none;
	border-bottom: 1px solid #95A5A6;
}
.panel .avatar {
	position: absolute;
	top: 8px;
	left: 20px;
}
.ui-panel-inner {
	padding: 0;
}
.panel a:hover {
	background-color: #95A5A6;
}
.panel.right a:before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	position: absolute;
	background-color: #2ECC71;
	right: 20px;
}
.panel.left a:before {
	content: '';
	display: inline-block;
	position: absolute;
	width: 24px;
	height: 24px;
	top: 15px;
	left: 20px;
	font-family: 'hk-demo';
	text-align: center;
	font-size: 18px;
}
.panel.left .newsfeed a:before { 
	content: '\f09e';
}
.panel.left .profile a:before { 
	content: '';
}
.panel.left .setting a:before { 
	content: '\2699';
}
.panel.left .logout a:before { 
	content: '\e78e';
}
.panel.left .report a:before { 
	content: '\f0e0';
}

正如我们在之前的文章中已经讨论过的那样，我将不会逐点剖析这些样式的工作方式，例如Pseudo-elements和Font Icons 。

这就是我们所需要的。 我们不需要添加额外JavaScript，因为所有这些都已由框架处理，并且面板现在可以使用了。

您可以从该演示中实际看到它。 您可以单击标题上的图标，或者如果您在启用触摸功能的设备中查看它，也可以滑动屏幕以显示面板。

• 观看演示
• 下载源

翻译自: https://www.hongkiat.com/blog/mobile-panel-with-jquery/