Drupal 7 开发内部培训资料, 分头诗人

Drupal 实现弹出式(lightbox )的登陆效果。

猪跑啦独家原创专稿,欢迎您转载本文,转载请注明来源。
标签: lightbox 登陆

首先我们看看Drupalla.com 的登陆框。

 

如何实现呢?别着急,慢慢一步一步的跟你解析。

1,http://www.open-open.com/ajax/Lightbox.htm 中找到 lightbox_me , 下载并解压 jquery.lightbox_me.js 到sites/all/themes/yourtheme/js下面
2,yourtheme.info 增加下面代码:

1
scripts[] = js/jquery.lightbox_me.js

3, 新建block,内容如下(切记要调整html 过滤模式,设置为不过滤):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript" charset="utf-8">
        jQuery(function() {
            function launch() {
                 jQuery('#sign_up').lightbox_me({centered: true, onLoad: function()
                 { jQuery('#sign_up').find('input:first').focus()}});
            }
          
            jQuery('#sign-up').click(function(e) {
                jQuery("#sign_up").lightbox_me({centered: true, onLoad: function() {
     jQuery("#sign_up").find("input:first").focus();
    }});
  
                e.preventDefault();
            });
          
          
            jQuery('table tr:nth-child(even)').addClass('stripe');
        });
    </script>
<ul id="sign-up-menu" class="links inline clearfix">
<li><a class="sign_up" href="/user/register">注册</a></li>
<li><a class="sign_up" href="#" id="sign-up">登陆</a></li>
</ul>
<div id="sign_up" style="display:none;" class="clearfix">
<h2>登陆</h2>
  <div style="float:left; width:350px; border-right: solid 1px #ccc;">
<form action="/user?destination=node" id="user-login-form" method="post">
  <div class="form-item">
   <label for="edit-name">用户名</label>
      <input class="form-text required" id="edit-name" maxlength="60" name="name"
onblur="if(this.value=='')this.value=this.defaultValue" onfocus="if(this.value==this.defaultValue)
{this.value='';}else{this.select();}" size="20" tabindex="1" type="text" value="用户名" />
      <label for="edit-pass">密码</label><input class="form-text required" id="edit-pass" name="pass"
onblur="if(this.value=='')this.value=this.defaultValue" onfocus="if(this.value==this.defaultValue)
{this.value='';}else{this.select();}" size="20" tabindex="2" type="password" value="******" />
      <div style="height:10px;"></div>
      <input class="form-submit" id="edit-submit" name="op" tabindex="3" type="submit" value="登陆" />
<span class="field-suffix">&nbsp;&nbsp;&nbsp;&nbsp;<a href="/user/register">注册</a></span></div>
   <input id="edit-user-login" name="form_id" type="hidden" value="user_login" /></form>
  </div>
  <div style="float:left;width:300px; padding-left:20px;">还没有注册帐号?
   <a href="reg">马上注册</a><p>或者通过合作网站直接登录蛋窝</p>
   <p><a href="/weibo/redirect?token=login" class="sina">用新浪微博登陆</a></p>
   <p><a href="connect/qt" class="qt">用腾讯微博登陆</a></p>
   <p><a href="connect/douban" class="douban">用豆瓣登陆</a></p>
   <p><a href="/qq/login" class="qq">用QQ账号登陆</a></p>
  </div>
</div>

4,page.tpl.php 相应位置加入下面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php if ($user->uid) : ?>
        <ul id="user_info">
        <li class="t-sub">
        <a href="/user" charset="has-sub"><?php print $user->name; ?><span class="W_arr_d">
<em class="b1"></em><em class="b2"></em><em class="b3"></em></span></a>
    <?php print theme('links__system_secondary_menu', array(
        'links' => $secondary_menu,
        'attributes' => array(
        'id' => 'secondary-menu',
        'class' => array('links', 'inline', 'clearfix'),
        ),
        )); ?>
       </li>
        </ul>
        <?php else : ?>
        <div class="user_info">
        <?php
     $block = block_load('block', '1'); //1 为步骤2 里面建的block 的id
     $s= drupal_render(_block_get_renderable_array(_block_render_blocks(array($block))));
     print $s;
    ?>
        </div>
        <?php endif; ?>

 

5,改写theme 下面的block.tpl.php 如下:

1
2
3
4
5
6
<?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <h2<?php print $title_attributes; ?>><?php print $title; ?></h2>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
<?php print $content; ?>

6,加上CSS 样式


#sign_up{border: 10px solid #FFCB99;background: white;color: #666;padding: 10px;width: 690px;height: 250px;-webkit-box-shadow: 0 2px 2px #777;-moz-box-shadow: 0 2px 2px #777;-o-box-shadow: 0 2px 2px #777;box-shadow: 0 2px 2px #777;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px; font-size:16px; line-height:22px;}
#sign_up h2{margin:0; padding:0; line-height:1.5em;}
#sign_up p{margin:0; padding:8px 0;}
#sign_up .form-item{margin-top:1em;}
#sign_up .form-text{width:280px; color:#666;}
#sign_up label{line-height:35px;}
#sign_up .form-submit{border-bottom-left-radius: 2px 2px;border-bottom-right-radius: 2px 2px;border-top-left-radius: 2px 2px;border-top-right-radius: 2px 2px;font-size: 1em;font-weight: normal;margin: 0px 3px 0px 0px;padding: 5px 13px;text-decoration: none;color: white !important;  background-color: #4278CB;background-image:none;border:0;}
#sign_up .form-submit:hover{ background:#666;}
#sign_up .sina{background-image: url(../images/sina.gif);background-repeat: no-repeat;background-position: 0 50%; padding-left:25px;}
#sign_up .qt{background-image: url(../images/qt.gif);background-repeat: no-repeat;background-position:0 50%; padding-left:25px;}
#sign_up .douban{background-image: url(../images/douban.gif);background-repeat: no-repeat;background-position:0 50%; padding-left:25px;}
#sign_up .qq{background-image: url(../images/qq.gif);background-repeat: no-repeat;background-position:0 50%; padding-left:25px;}

ok,完成了,赶紧刷新页面,看看最新的登陆界面。。

评论

jsleijh的头像

请问诗人,文中提到:“3, 新建block,内容如下(切记要调整html 过滤模式,设置为不过滤):”

这一步能编程实现吗?也就是能不能使用hook_block_info()和hook_block_view()这两个钩子来实现呢?