代码改变世界

个人学习笔记:WordPress 管理界面前端技术

2010-10-21 18:58  鹤冲天  阅读(1701)  评论(2编辑  收藏  举报

WordPress 的管理界面做的非常漂亮,动态效果也很完美:image 

顶部菜单(CommandBar)

截取代码片断如下:

<div id="wpcombar" class="snap_nopreview no-grav">
    <div class="quicklinks">
        <ul>
            <li class="ab-me">
                <a href="http://ludapeng.wordpress.com/wp-admin/profile.php">
                <img alt='' src='http://1.gravatar.com/avatar/d9e62abd16e624f8d74f1be739da52fc?s=16&amp;d=identicon&amp;r=G' class='avatar avatar-16' height='16' width='16' /></a>
            </li>
            <li class="menupop ab-my-account">
                <a href="http://ludapeng.wordpress.com/wp-admin/profile.php">
                    <span>我的首页</span></a>
                <ul>
                    <li class="ab-new-quickpress-post">
                        <a href="http://wordpress.com/quickpress/">New QuickPress Post</a>
                    </li>

采用嵌套的 ul 作为多级菜单,是一种比较流行的做法。动态脚本使用的 Superfish 插件,Superfish 最大的优点就是弹出菜单时非常的体贴:鼠标移入移出时,菜单并不是马上的弹出和收回,而是有一个小小的延迟。

这个延迟可是一个重大的改进,鼠标移入移出某个菜单项必然要触发相应的事件,但未必意味着是要弹出它的子菜单,可能只是路过。延迟就解决了这个问题,即提高了效率又改进了用户体现,一举两得。延迟实现使用了另外一个 jQuery 插件 hoverIntent$.event.special.hover,在 Superfish 中,会自动检测有没有使用这 hoverIntent$.event.special.hover 并会自动使用它们。

延迟这个名称对 hoverIntent$.event.special.hover 可能不够专业,hoverIntent$.event.special.hover 其实是具有推断 hover 意图(Intent)功能的 hover。 $.event.special.hover 是对 hoverIntent 的更新和改进。

防止被包含

一些小网站经常直接采用包含大网站页面来提高自身影响了,对这种无耻的行径可以使用 WordPress 中的一段脚本来预防:

if (window.top !== window.self) {
    window.top.location.href = window.self.location.href;
}

no-js 样式

body 中代码摘取如下:

<body class="wp-admin no-js  index-php">...</body>

其中的 no-js 比较有意思,如果没有理解错误的话,它是用来保证在客户端禁用脚本时页面也能正常显示和使用,也就是 Unobtrusive CSS 和 Unobtrusive JavaScript。

从 global.css 中找到和 no-js 相关的样式,如下:

.no-js .hide-if-no-js {
    display: none;
}

页面中还有一段相应的 js 代码:

var c = document.body.className;
c = c.replace(/no-js/, 'js');
document.body.className = c;

这段代码用来移除 body 的 no-js 样式,初看很怪:既然给了 body no-js 的样式,为什么还要用脚本再把它移除呢,不给不就得了!

仔细想想,这样设计的确实比较巧妙:客户端禁用脚本时,body 带有 no-js 样式,(body中)凡是 class 为 hide-if-no-js 的元素,都将隐藏。反之,没有禁用脚本时,body 中的 no-js 样式将被移除(注意 no-js 只能用在 body上),这样因为没有任何HTML元素拥有 no-js 样式,所以 .no-js .hide-if-no-js 这个样式就不会生效了,class 为 hide-if-no-js 的元素将会显现出来。