jQuery archive at chisdy.A.Pro

Archive for the ‘jQuery’ Category

AutoSprites – jquery导航插件

Posted in jQuery by chisdy on October 29th, 2009 2,567Views and 25 Comments »

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>

基于jquery的载入提示

Posted in jQuery by chisdy on March 7th, 2009 3,958Views and 8 Comments »

一直想找个好的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;
}