四有新人

七 06

Wang Wen HaoWeb开发, 互联网 jQuery, WordPress 9 Comments

最近上人人网的时候，发现页面的底部有一个“返回顶部”的按钮，于是在自己的网站上也搞了一个，其实非常简单。

首先，修改主题模板的footer.php文件，</body>上面加入如下代码：

<div id="toolBackTo" style="display: none;">

    <a title="返回顶部" onclick="window.scrollTo(0,0); return false;" 

        href="#top">返回顶部</a>

</div>

上面这段代码是完全Copy自人人网的源代码。返回页面顶端的代码很简单。

接下来修改style.css文件，加入上面div和链接的样式：

.back-to {

    position: fixed;

    bottom: 10px;

    right: 10px;

    z-index: 999;

    width: 110px;

    overflow: hidden;

    zoom: 1;

    -ie6-position-fixed-delay: 200;

}



.back-to .back-top:hover {

    background-position: -50px 0

}



.back-to .back-top {

    float: right;

    display: block;

    width: 50px;

    height: 50px;

    background: url(http://a.xnimg.cn/imgpro/button/back-top.png) no-repeat 0 0;

    margin-left: 10px;

    outline: 0 none;

    text-indent: -9999em;

}

非常不好意思，这些代码也是原样copy自人人网。

.back-to就是div的样式，它的position设为fixed。这样它就会固定在页面的某个地方。在这里它的位置是bottom: 10px; right: 10px，就是右下角距离浏览器边角各10px的位置。

到这一步，基本功能已经实现了，当我们把页面滚动到下方的时候，点击这个按钮，就会自动跳到页面的顶端。

不过，当页面在顶端的时候，这个按钮其实没有存在的必要，我们可以用javascript来控制它。

再回到footer.php文件，在刚刚的代码下面加上如下代码。

<script type="text/javascript">

$(function(){

    var bt = $('#toolBackTo');

    var hl = $.browser.webkit ? $('body')[0] : $('html')[0];



    $(window).scroll( function() {

        var st = hl.scrollTop;

        show = (st>30);

        if( show ){

            bt.show("slow");

        }else{

            bt.hide("slow");

        }

    });

});

</script>

这段代码用到了jQuery，所以需要先检查一下当前模板有没有引用jQuery，如果没有的话要在header.php里引用它。

我们给window对象绑上了scroll方法，在页面滚动的时候触发来控制返回按钮所在div的隐藏和显示。

代码非常简单。

八 14

Wang Wen Hao互联网, 我的工作 jQuery No Comments

为了让移动设备也能用上jQuery，jQuery开发团队发布了jQuery移动设备版开发项目jQuery Mobile Project（http://jquerymobile.com）。jQuery Mobile不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。

对于大名鼎鼎的jQuery开发团队来说，当然要让jQuery Mobile支持全球主流的移动平台，而不仅仅是北美流行的移动平台。想要知道jQuery Mobile项目将要做些什么吗？请看jQuery移动平台策略；想要知道jQuery Mobile项目将会支持哪些浏览器吗？请看Mobile Graded Browser Support。

jQuery Mobile开发团队正在紧张工作，准备那些要支持的移动设备并针对这些设备进行测试。他们争取在今年晚些时候发布jQuery Mobile。如果你想为jQuery Mobile提供帮助，请加入jQuery Mobile社区的讨论组。

jQuery Mobile项目已经得到了Palm, Mozilla等移动浏览器厂商的赞助。

jQuery Mobile开发团队说：“能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。我们将尽全力去满足这样的需求。”