现代 CSS

用JQ控制Drupal7 中block内容显示与隐藏

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

今天在drupal建站游逛时,发现其左边栏的JQ效果特吸引人,就拿其中的一个用户登录的block来说吧。一开始进入的时候如下图所示:

当你在标题处点击时就会把block中的内容隐藏起来,就成了下面这个样子:

在次点击时又会回到图一的效果。如想真实体会一下,你可以登录Drupal建站看看实际效果。看完初步效果后,我们在本地的drupal中来开始制作这样的效果。

首先我们来看看其html的结构(我在这里也拿一个drupal的User Login的block来做例子):

<section class="block block-user" id="block-user-login">
      <h2>User login</h2>         
      <section class="content">
          <form accept-charset="UTF-8" id="user-login-form" method="post" action="/node?destination=node">
               <!-- 表单中的内容此处省略 -->
          </form>
     </section>
</section>

 

从我们所看到效果中分析,明显知道,当我们点击block中的h2时block中的content就会隐藏,当我们再次点击h2时,我们content中的内容又会显示出来。这样大家一下就能想到Jquery中的Click事件配合slideToggle()事件。对于不会用JQ的朋友肯定会问,那我要如何使用这两个事件呢?其实也并不很复杂,click()肯定是单击事件,我们从效果中看到,我们每次单击的都是标题,显然我们click()事件是用在h2上面。另外就是slideToggle事件,不用我说,都知道是用在content上面了。知道了原理和方法,我们就开始来写代码吧,如下所示

(function ($) {
  $(document).ready(function(){
    $('#block-user-login h2').click(function() {
           $('#block-user-login .content').slideToggle();
     }).css('cursor', 'pointer');
  });  
})(jQuery);

 

现在我们只要把们只要把这个js文件加载到你的主题中,然后清除缓存,你就可以看到效果了。就拿我的项目中的效果来看吧,刚载入页面时的效果:

在标题User Login处点击一次就成了:

是不是和Drupal建站上的效果一样呀,当然了我们没有他的那么靓,因为没有加载样式,如查希望更吸引眼球,可以把样式加上去,这里我就不去说怎么应用样式了。其实到这里,我们的效果都完成了,可是肯定有朋友会问,现在只有一个有这样的效果,可是我也想Drupal建站那样,左边的所有block都要有这样的效果怎么办?别急,这样的效果现在对于你来说一点都不难了,因为现在你只需要换一下选择器就行了,比如我为了做到一致的效果,我把上面的代码换成:

(function ($) {
  $(document).ready(function(){
    $('#left .block h2').click(function() {
       $('.content', $(this).parent()).slideToggle();
    }).css('cursor', 'pointer');
  });  
})(jQuery);

 

这样一来我们就实现在了只在是左边的块都具有这样的效果了,怎么样不难吧,现在我们在回过头来看看,他们原理和使用方法是完全一致的,只不过不同的是前面只针对一个block,而现在是针对左边的所有block。从代码中我们可以看到变化有以下两点:其一我们把h2上的选择器从"block-user-login h2"换成了"#left .block h2",这样就不在是针对UserLogin这个block了;其二就是把content上选择器换了:“#block-user-login .content"换成(".content",$(this).parent())。这里需要注意的一点就是,因为我们现在不在是针对一个block而是左边栏所有block,所以在控制content的显示和隐藏时,我们一定要控制住,我点击相应block的标题时才显示或隐藏相对应的block的内容。另外关于click()slideToggle()的具体用法,大家可以参考jquery官网。

到此,我们就做到了和Drupal建站一样的边栏效果了,心痒了就快动手吧。欢迎感兴趣的朋友一起探讨学习。

如需转载请注明出处:W3CPLUS

New Balance M530PSB
返回顶部