jQuery制作go to top按钮

每每看到网友Blog的页面底部或中间有一个按钮回到页面顶部,羡慕死人了,但自己就是做不出这样的效果。后来在google和baidu搜寻了一下,仔细思考,并不像当初想象的那么复杂。经过整理贴到blog中与大家一起分享一下。

我们先来看看效果图吧:

这个效果是“点我加到页面顶部”按钮在页面底部,当然还有一种效果就是这个按钮在页面中间,我就不在示例了。这也是最简单的效果,还有一种效果就是页面一开始不显示这个按钮,当滚动条向下移动时,到一定的距离才显示(也就是垂直滚动条距顶部有一定的距离时这个按钮才显示)。

我总结了几种方法,现在从简单到复杂依次看看几种实现效果的方法:

DEMO一:

这种效果是最原始的,也是最简单的。当页载入时,这个按钮就存在,并固定在页面的底部,页面垂直滚动条离顶部有一定的距离时,点击“点我回到页面顶部”按钮时,页面就会回到顶部。那就一起看看其实现过程吧:

HTML 代码:

玩转Drupal7的User Login

网站的登录和注册,大家肯定不会陌生了,而对于玩drupal的朋友来说,更不会陌生吧。接触drupal不久,也并不怎么会使用其核心的东西,就比如说我要在页面头部加一个“登录 | 退出”这样的链接,就会让我够受的了,如果要像下面图示的User Login框

头就更大了。所以这次花了大力气专门去了解和学习这一块的东西,终于还是让我实现了,为了像我这样的初学者不在头痛,贴出来分享,希望能给需要帮助的朋友带来一丝灵感。那我们开始吧:

第一种方法:在page.tpl.php添加User Login

Jquery和CSS3打造靓丽的动画进度条

今天在做项目中碰到一个需要用制作一个动画的进度条,一开始搞不清楚是怎么一回事,后在google中搜索了css progress bar,真的太多这样的资料,后随便弄了一个。今天贴出来与大家分享。跟我一起走吧>>>>。

CSS Globe为我们提供了一种简易实现动画进度条的方法。只需要3个元素,1个内容块和2个内嵌元素即可实现一个漂亮的动态进度条效果。只是需要注意的 是,这个效果是比较漂亮,但并能实现实时载入。而是在页面首次载入的时候,会根据你的设置,以Gif动画的形式显示进度条的载入。也就是说,可以用来美 观,但不具有交互作用。如下图所示:

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

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

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

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

如何覆写node中的submitted

        弄过drupal的,对blog中的submitted都不会太陌生吧,Submitted by admin on Tue, 04/12/2011 – 11:54这是其默认的一种风格,今天我们只要来看如何在drupal7中改写这种风格。

        首先我们来看看在drupal6中的实现方法:

        1、在相应的主题下,加上下面的代码

function yourthemename_node_submitted($node) {
  return t('Posted by !username on @datetime', array(
    '!username' => theme('username', $node),
    '@datetime' => format_date($node->created, 'custom', 'd M Y')
  ));
}

      

       2、然后在node.tpl.php文件中加入

Drupal主题的基础样式—reset、base、layout、print

        从事Drupal工作有一年多了,每每一个新项目开始时,都不免一些重复的样式工作设置,这次特意花了点时间总结了一下,贴出来与大家一起分享。当然这里虽然说是在Drupal中应用,我们也可以应用在不是Drupal的项目中。今天我们主要从以下几个方面来讲述,第一是重置样式reset.css;第二是基本样式base.css;第三是网格布局样式layout.css;最后是打印样式print.css。这里需要注意的一点是,在Drupal中的一般项目中很少应用grid布局,这里特意把这一块放进来是为了方便其它项目的布局设置。

我们费话少说,现在就请大家跟我一起进入今天的主题吧

一、重置样式:reset.css

Drupal7基础教程--用户(三)

        前面在Drupal7基础教程─用户,第一,第二篇我们介绍了如何在Drupal注册用户,管理员管理用户,设置用户权限等,今天我们在花一节时间主要来介绍一下用户头像设置。

用户头像

        在我们Configuration > Aaccount settings(admin/config/people/accounts)中有一个用户的个性化设置(Personalization),在这里我们可以设置用户相关资料,比哪签名,用户头像等:

         现在我们先来讲一下上图的几个关键部位的设置

         1、首先需要开启上传用户头像的功能,也就是说在Personalization区域中的enable user pictures选项前的复选框打上√,这样我们就开启了上传用户头像的功能:

Drupal7基础教程--用户(二)

       前面我们在Drupal7基础教程--用户(一)中主要介绍了用户的注册、管理员如何增加、删除用户等内容,今天我们接着介绍第二部分:用户角色和用户权限。我们现在就开始进入正题吧。

用户角色(User Roles):

       用户角色是用来控制你的drupal网站中的用户,哪些是可以帮你建设网站,哪些是只能浏览网站,并确定哪些内容给哪些用户浏览等功能。

       用户角色控制是在用户角色设置页面完成的,具体位置就是:点击管理菜单中的people,选择Permissions中的roles(admin/people/permissions/roles)如下图所示:

notepad++结合Zen Coding快速编写HTML代码

        经朋友介绍认识了Zen Coding一款快速编写HTML代码的插件,然后在google搜索一下其使用,让在下激动不以,今天特意写了一篇blog来跟大家一起分享。

         Zen Coding其实是一款快速编写HTML,XML,XSL(或其他格式化语言)的编辑器插件,这个插件的实现了用缩写方式完成大量重复的书写工作。他的核心是一个强大的缩写引擎,掌握这些缩写技巧,给我们的编写代码带来极高的编写效率。他支持好多编辑器,如TextMate,UltraEdit,Notepad++等许多编写器,我们可以从http://code.google.com/p/zen-coding下载到相对应的编辑插件,然后我们把解压缩出来的文件,如下图:

Drupal7基础教程--用户(一)

用户注册(User Registration)

Drupal提供了几种注册用户的方法:

1、管理员的邀请

2、访客的注册,但需要管理员的审批

3、任何访客

访客可注册你的网站的会员,可以点击首页的"User Login”block中的"Create new account”,如下图所示:

页面

返回顶部