糖醋排骨 » code

基于json数据的jQuery无限级下拉菜单插件

interjc — Mon, 24 Jan 2011 10:08:35 +0000

自己写的一个小插件，基于jQuery，取得json数据以后可以生成一个下拉菜单，理论上是无限级的。

也可以通过SVN下载（由于代码无限修改中，所以暂不提供压缩包下载，还请见谅）：

https://interjc.googlecode.com/svn/trunk/jquery/nav

这个小插件目前只提供了最基本的线框样式，以后会逐步完善，相关实现方法及使用说明都会后续报道的。天冷不想打字，今天先到这了..

2011/02/24, liveme 说: 导航菜单还是简洁一点好……
2011/03/01, weiking 说: ShadowBlue 导航栏是不是也是用这个插件呢？你那个压缩编译过，看不到！求解，谢谢
2011/03/06, interjc 说: @weiking, ShadowBlue导航栏没有用这个插件，是临时写的脚本，几个都没有压缩过代码，你所说压缩过的是jquery.min.js吧？ ShadowBlue 源码在此 http://code.google.com/p/interjc/source/browse/trunk/shadowblue/javascript.js
2011/03/07, power cord 说: 不错，这个功能很好，收藏了，谢谢博主分享。
2011/04/16, RISEN 说: 这个功能很好
2011/09/08, 皇家元林说: 用CSS就可以搞定了，只不过不支持IE6

延展阅读:

用DD_belatedPNG插件修复IE6 PNG

interjc — Sat, 10 Jul 2010 10:50:11 +0000

IE6是一个令人作呕的话题，个人极为厌恶IE6，并且恨屋及乌，不过没有办法，中国就是这么一个神奇的国度，到了2010年仍然有不少人以使用“简单、快捷”的IE6为荣，不知道浏览器为何物的也更加不提了，而这种人往往又是互联网中广告点击的生力军，消费能力强，所以你必须照顾到他们的感受。

我对IE6恨之入骨的重要原因之一，恐怕就是对PNG各种半透明的支持情况了。我们在其他浏览器可以轻松实现的图片半透明效果，到了IE6这儿就得纠结蹉跎，虽然IE6勉强的支持PNG-8格式的伪半透明，但这个和GIF图片的效果相差并不大，如果你使用PNG-32的话，你所有的半透明区域都会变成灰底。

网上有不少IE6上实现PNG半透明的工具，各有千秋，大多数使用了IE的一个滤镜：AlphaImageLoader，使用后会有各种诸如问题（比如background-position和background-repeat属性支持的不完善，有些还会擅自更改背景图片的尺寸）。DD_belatedPNG提供了一种新的选择，他使用微软的VML语言对PNG图片进行重新绘制，以达到半透明的效果，并且能支持background-position和background-repeat属性。

查看Demo | 打包下载

其使用方法也不难，先在此下载DD_belatedPNG ，然后插入head标签中：

将所有需要需要修补的元素加上class=”png”即可

PS：对于:focus和:hover伪类，则需要将以上代码中的 :
DD_belatedPNG.fix(‘.png’);
修改为 :
DD_belatedPNG.fix(‘.png,a.png:hover,.png:focus’);

BTW：虽然这样可以缓解IE6下PNG的问题，不过会带来性能问题，还有一些其他的问题，自然是不如对png半透明有原生支持的浏览器的。所以，赶快让该死的IE6下地狱吧。阿门！

2010/09/05, 夏小淚说: 我现在都推荐我身边的朋友使用chrome或是FF,有些不会用的，就把IE6直接升级IE8了~！！
2010/09/08, interjc 说: @夏小淚, good job！
2010/09/10, Runescapegold 说: ie6很少有人用了
2010/09/10, 皇家元林说: 你那个链接前面的图标是怎么加上去的？而且只是链接有，图片没有呢？
2010/09/10, interjc 说: @皇家元林, 神奇吧，哈哈～ jquery+css...
2010/09/10, 皇家元林说: 能教教我吗？谢谢！
2010/09/10, interjc 说: @皇家元林, 这个说来话长啊，你可以看我的源码中文哦style.css和javascript.js，搜索more-link看相关代码..
2010/11/24, Tao Zhu 说: 想消灭IE6的最好方法就是尽快让XP滚蛋！
2011/11/07, 张垒说: 加入JS代码后，用IE8打开网页时，提示参数无效。不知道怎么解决，您有什么方法吗？
2011/11/08, interjc 说: @张垒, 这玩意儿只在IE6菜生效啊，检查下你代码的全角半角什么的看看。

关于本Blog的页面载入效果

interjc — Fri, 01 Jan 2010 09:58:32 +0000

Zed童鞋向我询问本站载入效果的做法，由于比较繁琐，遂写到Blog中来，一来是这样比QQ等手段更有条理性，二来可以保留下来提高重用率。

废话不多说，现在开始：

1.结果
本效果完成后的效果就是你在打开本站每一个页面的时候会出现一个半透明遮罩一个loading画面然后页面载入完以后遮罩消失的效果。

2.思路
这个半透明遮罩首先被载入，这样他才能在一开始就出现，他上面有一张图片和一段文字告诉浏览者这是在loading，而不是笔记本快没电了或者什么；然后，页面的DOM就Ready了，这个时候为了验证各种库(比如我所使用的jQuery)载入完毕，CSS也下载完了，我们使用jQuery语句来使这个遮罩层隐藏起来，这个时候这个效果就完成了。

3.准备
你需要一个已经安装好的网站，和一个可以在你自己控制之下的文件系统。说简单点，拿Wordpress举例，你得能够修改自己的模板全部代码；你需要一个jQuery库、一个载入用的图片、和一个好用的文本编辑器(当然你可以用记事本，不过我这里推荐Notepad++)。

4.动手
以下我们以修改一个Wordpress模板为例，其他所有类型网页修改方法都大同小异，只是文件的命名方式有少许不同而已。

找到header.php文件，用编辑器打开，如果你的模板本身没有使用jQuery库，那么请在标签内加入以下代码：

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/loading.js"></script>

还是header.php文件，找到body标签，将其修改并在其下添加遮罩层，如下：

<body style="height:100%; width:100%; position:relative;">
<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;">页面载入中..</p>
</div>

未达到最佳效果，请将上面代码中background里url括号内的图片下载至你的模板文件夹(比如img文件夹)内，并将此图片网址改为如下：

background:#000 url(('stylesheet_directory'); ?>/img/load.gif) no-repeat center center;

最后通过jQuery来控制整个遮罩(也就是页面载入效果)的行为：
在模板文件夹随便什么地方(这里我们使用其根目录)新建一个名为loading的js文件loading.js ，在其中添加如下代码：

//载入中 Loding..
jQuery(function(){
  jQuery('#loading-one').empty().append('页面载入完毕.').parent().fadeOut('slow');
});

Update(2010.1.9)：

默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户…

我觉得他说得很对，于是我就加上了，在此对默默童鞋表示感谢。如果你也需要这样的功能，可以这么做：
打开header.php文件，把刚才的那段添加在body标签之下的关于遮罩的代码替换成如下代码即可：

<div id="loading" style="position:fixed !important;position:absolute;top:0;left:0;height:100%; width:100%; z-index:999; background:#000 url(http://interjc.googlecode.com/svn/trunk/waterfall/img/load.gif) no-repeat center center; opacity:0.6; filter:alpha(opacity=60);font-size:14px;line-height:20px;" onclick="javascript:turnoff('loading')">
<p id="loading-one" style="color:#fff;position:absolute; top:50%; left:50%; margin:20px 0 0 -50px; padding:3px 10px;" onclick="javascript:turnoff('loading')">页面载入中..</p>
</div>
<script type="text/javascript">
//[CDATA[
  function turnoff(obj){
    document.getElementById(obj).style.display="none";
  }
//]]>
</script>

5.完工
这个时候把所有修改过的文件保存，然后上传，应该就成功了。需要注意的是，如果你使用的是UTF-8编码的话，所有的文件必须使用编辑器转换为UTF-8无BOM模式之后再保存，不然也许会出现各种诸如乱码之类的问题。更改格式的办法如左图(以notepadd++为例)。

有意见或者建议欢迎在楼下指出，have fun！

2010/01/01, 锋子说: 耍酷用····
2010/01/01, Zeddicus 说: 好东西啊！谢谢interjc哥哥~
2010/01/01, Zeddicus 说: 搞定啦哈哈哈哈！谢谢啊！
2010/01/01, interjc 说: @Zeddicus, 呵呵，搞定就好～
2010/01/01, Zeddicus 说: @interjc, 感激不尽哈哈~
2010/01/02, 珍井坊说: 深更半夜睡不着，来看看博主的文章，呵呵，有时间也记得会放下我司小站。www.99187.cn 刚做，博主不要笑话。
2010/01/02, macfee 说: 围观，学习，飘过
2010/01/07, 奇文共赏之Interjc Jquery Loding Effect - Zeddicus Blog - 设计生活技术感悟杂谈分享说: [...] 　　马上访问：《关于本Blog的页面载入效果》类归于：资源分享 — Zed @ 8:00 下午评论 (6) 版权信息 [...]
2010/01/08, 默默说: 呵呵，有点意思。不过我总觉得这样的显示方式更注重的是花哨而不是实用。
2010/01/08, interjc 说: @默默, 这种方式的实用处在于，不会再页面最基本的东西还没有载入完毕的时候，页面就会被点击，有些js的运行会妨碍后面的js的载入。而且这个载入效果完毕以后，至少代表我的jQuery库和CSS载入完毕了.. 另：我有时候用这个来debug..如果js写的不对，遮罩就总不会消失..
2010/01/09, 默默说: @interjc, 的确，你这样是保证了页面没有载入完毕的时候页面不被点击，但是对于网速比较慢的用户来说，可能我需要的不是你的页面全部载入完毕，我只需要我想看的东西载入完毕就行了，这部分主要是文字。比如你的首页，我一打开，看到这篇文章，我有兴趣，想点击标题继续阅读，但是这个时候css和其他东西还没有载入完毕，遮罩就会阻碍我点击我想要的链接，这个时候我就必须一直等待，知道你的页面完全加载完毕。这样的情况下，无疑浪费了访客的时间，让对方下载了自己不需要的数据。
2010/01/09, interjc 说: @默默, 你说的不错，我现在就加上点击立刻取消遮罩的功能～多谢建议～
2010/01/14, 安逸哇说: 学习了,不过我的站点速度有点慢.不太适合用这个.
2010/01/14, interjc 说: @安逸哇, 呵呵，这个就是用来让浏览者等待时不觉得时间太长的啊～
2010/01/26, WordPress jQuery页面载入进度条 | 超人流水账说: [...] 因为前几天换上这款主题之后，本身就有很多jQuery小机关。发现很多wordpress博客中都使用了jQuery页面载入进度条。觉得相当帅气，今天在糖醋排骨的博客中：关于本Blog的页面载入效果一文中找到了方法。于是马上折腾上，方法如下： [...]
2010/01/28, 对shadowblue模板的调整 | 枫之居说: [...] ……原谅我吧我又对shadowblue这个模板折腾了。通过后台的该模板作者（糖醋排骨）。我对该模板增加了2个功能： 1、在该模板的基础上新增页面载入效果。详细请看：关于本Blog的页面载入效果 [...]
2010/02/04, 11 说: 怎么用在asp.net（c#）页面中呢？？
2010/02/04, interjc 说: @11, 一样的，这里都是html+js，什么语言都一样，只是放的文件位置不同而已..
2010/02/13, [jQuery]頁面載入效果★やみろぐ。说: [...] 剛剛在昨天不經意逛到糖醋排骨，他家的載入效果真的是太炫了(閃) 載入圖片(很明顯就是臉●的產物)+「頁面載入中」字句+半透明黑色背景=ネ申 [...]
2010/03/01, 关于本Blog的页面载入效果 | iOver | 爱窝网说: [...] Update(2010.1.9)：默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户… [...]
2010/03/01, lp452 说: 非常感谢！请教一下。是改正这样吗?
2010/03/01, interjc 说: @lp452, 是这样，没错
2010/04/30, 郑美园说: 用了这个效果，在搜索结果下方做了鸣谢链接。谢谢:)
2010/04/30, interjc 说: @郑美园, 客气，感谢捧场
2010/05/03, Jest 说: 为什么我在博客上测试 “页面载入”几个字消失之前要变乱码一下~~~ = =
2010/05/03, Jest 说: 哦不对现在情况是没有乱码但是一直在载入· ······
2010/05/03, Jest 说: “如果你使用的是UTF-8编码的话，所有的文件必须使用编辑器转换为UTF-8无BOM模式之后再保存，不然也许会出现各种诸如乱码之类的问题” “另：我有时候用这个来debug..如果js写的不对，遮罩就总不会消失..” 我就复制的文章里提供的代码···
2010/05/03, interjc 说: @Jest, 我猜想是文件编码的问题
2010/05/03, Jest 说: 已经按UTF-8无BOM模式保存了啊在IE里打开会提示loading.js 有错缺少对象 - -
2010/05/04, interjc 说: @Jest, 原因有好多，看了看你的博客貌似已经去除了相应代码，所以看不出来问题原因。如果你使用的是shadowblue的话，只需要加入
而无需载入库文件 shadowblue的下一个版本会考虑加入这个功能，自己不想弄的话敬请等待，呵呵。
2010/05/04, Jest 说: @interjc, 嗯用的shadowblue 之前修改的时候打开header.php 看到已经载入"jQuery.js"了也就仅仅只加了载入loading.js的代码我再自己捣鼓一下
2010/06/04, king2z 说: 用上了，但是用上了发现和willin的ajax回复评论有点冲突，那个提交loading按钮一直显示出来，又无奈去掉了。
2010/06/04, 天天天蓝说: 好文章，好好学学下……
2010/06/04, interjc 说: @king2z, 下次修改下代码，弄个更能适应恶劣代码环境的出来
2010/06/27, 凡小爱说: 打开每一页都有着效果？岂不是每一页都要这样做？
2010/06/28, interjc 说: @凡小爱, 动态网页只用添加一处就行了
2010/08/09, 开源博客 · Blog的页面载入效果说: [...] 默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户… [...]
2010/08/09, Richard 说: 使用后发现网站展示图片另外一组无法拉动，求解。就是网站第一块使用后无法拉动
2010/08/09, interjc 说: @Richard, 实在看不懂你的意思
2010/08/11, snowxh 说: 请问下这个和Ajax-comment的冲突怎么解决呢 loading的按钮会一直出现恶
2010/08/17, 方丈说: @snowxh, 嘿嘿嘿……被我发现了哇……
2010/08/17, snowxh 说: @方丈, 我贴了传送门的好不好~
2010/08/17, 方丈说: @snowxh, 完了……没有看见……类目……
2010/08/17, interjc 说: @snowxh, 最简单直接的办法是在加上 onload="javascript:document.getElementById('loading').style.display='none';" 既：
这种问题我也不知道是那里引起的，我这也装了不少插件啊，也没这个问题
2010/08/17, snowxh 说: @interjc, 已经解决了~是跟一个 id重名了囧
2010/09/07, 关于本Blog的页面载入效果 - 堕落∮木头's BLOG 说: [...] 默默觉得需要一个点击就立刻取消遮罩的功能，可以照顾到网速慢的用户… [...]
2010/09/09, Fanr 说: 必须得收藏！超级实用，嘿嘿 ~~
2010/10/15, Dawnson 说: 看着不错，试一下去，谢了！
2010/11/01, Weitian Zhao 说: 测试下回复会不会一直loading...
2011/03/18, leaves 说: 很喜欢这个效果，用了，谢过。
2011/04/13, 张衡说: 这个效果，学习了。。。
2011/06/02, 雨丸说: 太厉害了！！！！果然很华丽

延展阅读:

一个jQuery+CSS幻灯片播放器

interjc — Thu, 08 Oct 2009 15:48:34 +0000

写了一个幻灯片播放器，是用纯jQuery+CSS写的，如果你不喜欢Flash幻灯片播放器可以试试这个。其主要特点是高度宽度可以自由重新设定，幻灯片的数量也可以自由增减（当然也不能过于离谱..），使用jquery+css节省了代码，使载入更迅速..等等..

效果是这样的，请点击这里。

安装方法很简单，首先在合适的地方（你想要插入幻灯片的地方）插入以下代码：

然后找到你的header.php（假设你使用Wordpress），在/head标签之前添加如下代码：

糖醋排骨 » code

基于json数据的jQuery无限级下拉菜单插件

评论

延展阅读:

用DD_belatedPNG插件修复IE6 PNG

评论

关于本Blog的页面载入效果

评论

延展阅读:

一个jQuery+CSS幻灯片播放器