chisdy.A.Pro » jQuery http://chisdy.com chisdy.A.Pro Mon, 03 May 2010 04:20:40 +0000 en hourly 1 http://wordpress.org/?v=3.0 AutoSprites – jquery导航插件 http://chisdy.com/autosprites-jquery-navigation-plugin/ http://chisdy.com/autosprites-jquery-navigation-plugin/#comments Thu, 29 Oct 2009 15:00:11 +0000 chisdy http://chisdy.com/autosprites-jquery-navigation-plug-in/ CSS Sprites相信大家都比较熟悉了，早在2005年CSS Zengarden的园主Dave Shea就在AListApart发表对该技术的详细阐述，也不算是新鲜事了。之前要应用时都为了算位而烦恼，好在目前多了很多在线生成工具，减少了些繁琐的过程，我也在打算下一步把目前这个theme所用到的图片妖一下，瘦下身，这是下一步的工作，这次先分享个jquery的AutoSprites导航插件，初步了解，效果还不错。

horiz_sprites_post

相应的图片弄好之后，接着就是html结构：

<ul id="hnav">
	<li id="hnavhome"><a href="#">Home</a></li>
	<li id="hnavlocal"><a href="#">Local Industry</a></li>
	<li id="hnavhigher"><a href="#">Higher Education</a></li>
	<li id="hnavcomm"><a href="#">Our Community</a></li>
	<li id="hnavnews"><a href="#">News</a></li>
</ul>

接着需要设置下css文件：

#hnav { position: absolute; top: 0; left: 0; width: 615px; height: 72px; background: url('horiz_sprites.gif') no-repeat; }
#hnav li { position: absolute; left: 0; height: 72px; }
#hnav #hnavhome { width: 82px; left: 0px; }
#hnav #hnavlocal { width: 146px; left: 82px; }
#hnav #hnavhigher{ width: 162px; left: 228px; }
#hnav #hnavcomm { width: 143px; left: 390px; }
#hnav #hnavnews { width: 82px; left: 533px; }
#hnav li a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 72px; text-indent: -9999em; }

接着只需设置下相应的参数就行了：

$(document).ready(function(){
$('#hnav').autosprites({
offset: '72px'
});
});

其中的72px设置的是横向导航的高度，默认的是横向设置。偏移值设置，横向导航设置的offset值是其高度，纵向设置的是其宽度。还有些扩展设置：

settings = $.extend({
offset: '100%', //偏移位置
orientation: 'horizontal', //'vertical' 为纵向导航
over: { opacity: 'show' },
overSpeed: 500,
out: { opacity: 'hide' },
outSpeed: 500
}, settings);
DEMO地址 下载地址 原文地址

Related Posts

]]> http://chisdy.com/autosprites-jquery-navigation-plugin/feed/ 25 原来学东西真的需要复习之css的position http://chisdy.com/need-to-review-the-position-of-the-css/ http://chisdy.com/need-to-review-the-position-of-the-css/#comments Mon, 07 Sep 2009 08:01:39 +0000 chisdy http://chisdy.com/?p=155 最近在弄网站的时候出现个问题，也是之前一直没去解决的，一个非常简单的问题，花了我几个小时的时间一步步去查找，如果平时的知识点能好好的积累的话，根本没必要花这样的冤枉时间，NND。

我习惯于用css的position属性去制作网页的头部跟其他我觉得没必要去float的东西，说实话挺讨厌float的，老是需要清除浮动以至于得到满意的效果。用position的话，不仅可以考虑在去掉css的情况下html文档的重点输出顺序，还可以减少不必要的嵌套代码，更重要的就是自由，爱放哪放哪。

这次的问题出现在position:relative同辈元素的z-index设置上，一般同辈元素都是靠z-index去定位层级，z-index数值越大者越居上。在例子中#header跟#ibanner为同辈元素，在不设置z-index值的情况下，因为#ibanner的html输出在#header的后面，所以#ibanner层对比#header层来说是居上叠加的，看Demo1

Demo1在IE(IE6、IE7、IE8，Jquery紧支持IE6+)浏览器下，很好的证明的这点。但在非IE浏览器下.nav的z-index属性值战胜了#ibanner，跑到上面去了。.nav的父辈元素是#menubar祖辈元素是#header，没理由啊，想不通，后来看了14px发布的《层叠加的五条叠加法则》后才明白过来，原来白为IE鼓掌了，最后变成又是IE的问题了。

接下来最终目的是要把.nav的层级提高，那么只需要搞定IE就行了，这个就简单了，设置#header跟#ibanner的z-index值就OK了。看Demo2（中间迷失了一个多小时，以为#ibanner设置z-index值就OK了，一直在测试就是不行，还用上了判断为IE浏览器的时候，#ibanner的z-index值为-1，太扯了，太瞎了。还有个可能是jquery的问题。）

我是明白过来了，估计看这篇文章的人一下子反应不过来，去看下14px发布的《层叠加的五条叠加法则》就清楚了，自己测试摸索吧，这样才记得牢。

Related Posts

]]> http://chisdy.com/need-to-review-the-position-of-the-css/feed/ 12 基于jquery的载入提示 http://chisdy.com/create-loading-bar-by-jquery/ http://chisdy.com/create-loading-bar-by-jquery/#comments Sat, 07 Mar 2009 13:44:11 +0000 chisdy http://chisdy.com/?p=13 一直想找个好的loading用在网站载入慢的时候提示提示，不用干等着，不是滋味。Jquery可以很好的实现这一效果，在老外那找到这代码太爽了，简单易用实用。

在代码<head></head>里加入以下代码：

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function(){
    $("#loading").hide();
})
</script>

在里<body></body>加入以下代码：

<div id="loading">
Loading content, please wait..
<img src="loading.gif" alt="loading.." />
</div>

在里的这代码必须保证在网页载入的最前面。

接着是css代码：

#loading{
position:absolute;
width:300px;
top:0px;
left:50%;
margin-left:-150px;
text-align:center;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}

一个基于jquery的loading效果就完成咯。

Related Posts

]]> http://chisdy.com/create-loading-bar-by-jquery/feed/ 8 基于jquery的一个横向导航菜单 http://chisdy.com/jquery-nav-menu/ http://chisdy.com/jquery-nav-menu/#comments Sun, 22 Feb 2009 14:14:12 +0000 chisdy http://chisdy.com/?p=3 今天逛老外网站又发现了个基于jquery的横向导航菜单，感觉不错，以后估计用得上，就索性的抓了下来。

jquery_menu

里面用到了Superfish这个插件，挺方便的。

预览地址：http://chisdy.com/demo/menu/jmenu/index.html

Related Posts

]]> http://chisdy.com/jquery-nav-menu/feed/ 6 这不就搞笑吗? http://chisdy.com/that-is-a-joke/ http://chisdy.com/that-is-a-joke/#comments Mon, 12 Nov 2007 15:35:38 +0000 chisdy http://chisdy.com/misc/54.html 以为可以坚持，可第一篇就漫不经心才憋了出来，下班回来确实什么都不想动了，呵呵。

这个月主要是报价系统，公司在这方面太缺乏流程制度了。搞得每天怨天由人，唉声叹气的，我们的目标应该是怎样工作的更轻松，更有效率，而更快的实现小康奔共同富裕。哈哈！也许这话说的太多次了，默念太多遍了，时不时的想起，还真有些别扭。我看到的许多BLOG都是写技术性的东西，不知道我为什么写不出来，在工作中有很多技术上的问题，也解决了好些，可真要拿上来写写，却觉得不值一提，慢慢的又忘了，好象从来没弄过一样。前段时间才真正开始学jQuery,还一个人在公司弄到11点多，通了，懂了的感觉确实很爽。但感觉用不上，应该是不想用。就公司目前的客户对象，用上这好东西给他，也不会觉得什么。慢慢的特别现实了，哈哈！不过，如果有客户以同样的价钱要求我用div+css，jQuery兼容大部分浏览器，并把优化做到更好，我想，我通宵不睡给他弄，也会特别爽。

现在用table比div更熟手了，哈哈！不知道是种进步还是倒退，之前崇尚的标准，现在似乎改观了不少。没有了所谓的标准，只要客户满意，也许是最大的标准。但我对待这种标准的态度还没适应的很好，我考虑的是客户的客户，而客户考虑的是他自己，不禁觉得枉做好人，哈哈！毕竟用户体验是根本。

在公司，有人跟我提到网站SEO，太高兴了。这不是搞笑，虽然我喜欢弄这些东西，但面对客户，我无语。如果我找人做，也许也是这样的。

Related Posts

]]> http://chisdy.com/that-is-a-joke/feed/ 5