首先我们看看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"> <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 $signup = drupal_render(_block_get_renderable_array(_block_render_blocks(array($block)))); print $signup; ?> </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 样式
1 2 3 4 5 6 7 8 9 10 11 12 | #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,完成了,赶紧刷新页面,看看最新的登陆界面。。
你是指Lightbox2模块吗?
孤魂Lv 1