月度归档:2015年02月

IT分享jquerymobile抽屉菜单mmenu

jquery.mmenu.js实现侧边导航非常适用于手机版站

最近在做一个页面,用到一个插件适用于网站目录导航,所以把它分享出来。

jQuery.mmenu 实现了类似手机上经常使用的抽屉式菜单,如下图所示:

IT分享jquerymobile抽屉菜单mmenu

下面是使用教程:

首先是引用文件

<link type="text/css" rel="stylesheet" href="../src/css/jquery.mmenu.all.css" />

<script type="text/javascript" src="../src/js/jquery-1.8.2/jquery-1.8.2.js"></script>
<script type="text/javascript" src="../src/js/jquery.mmenu.min.all.js"></script>

然后创建html

<div id="page">
			<div class="header">
				<a href="#menu"></a>
				Demo
			</div>
			<div class="content">
				<p><strong>This is a demo.</strong><br />
					Click the menu icon to open the menu.</p>
				<p>For more demos, a tutorial, documentation and support, please visit <a href="http://mmenu.frebsite.nl" target="_blank">mmenu.frebsite.nl</a></p>			
			</div>
			<nav id="menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#about">About us</a>
						<ul>
							<li><a href="#about/history">History</a></li>
							<li><a href="#about/team">The team</a>
								<ul>
									<li><a href="#about/team/management">Management</a></li>
									<li><a href="#about/team/sales">Sales</a></li>
									<li><a href="#about/team/development">Development</a></li>
								</ul>
							</li>
							<li><a href="#about/address">Our address</a></li>
						</ul>
					</li>
					<li><a href="#contact">Contact</a></li>
				</ul>
			</nav>
		</div>

最后绑定脚本事件:

<script type="text/javascript">
			$(function() {
				$('nav#menu').mmenu();
			});
		</script>

脚本事件可以写一些其他的,在官方有,可以去看。

支持功能:

1、基本的滑动:支持左 上 右方向的抽出

2.支持查询

3.支持在每个菜单上显示个数。

下面分享官方地址:http://mmenu.frebsite.nl/

下载地址:http://mmenu.frebsite.nl/download.html

DIV+CSS图片背景切割减少请求次数

CSS切割图片,使用一张包含很多ico等图片的素材使用在不同的元素里。CSS切割真正意义上的并不是切割,而是利用CSS的属性取图片其中的一部分显示出来。这样的好处就是大大减少了网页打开的时间,提高了网站体验度。

CSS实现一张大图切割的方式有两种,一种是作为某一个元素的背景图片,另外一种是利用img的属性。

1、img元素属性clip的rect。用法说明:

img{ 
    position:absolute; 
    clip:rect(20px 100px 50px 20px); 
}

clip的4个参数,分别是对应图片img的左上角为坐标起点,第1个参数y1是定位的y坐标(垂直方向)的起点,第二个参数x1定位的x坐标(水平方向)的起点 ,第三个y2定位的y坐标(垂直方向)的终点 ,第四个x2定位的x坐标(水平方向)的终点 。

2、用CSS中background属性。事例代码:

background:transparent url(123.jpg) no-repeat scroll -140px -20px;

transparent表示透明无颜色 

-140px 表示水平位置在图片的-140px处(以图片的左上角为0,0) 

-20px 表示垂直位置在图片的-20px处(以图片的左上角为0,0) 

DIV+CSS图片背景切割减少请求次数 (转载网络)