درس نموذج تسجيل دخول الاعضاء مثل موقع تويتر بأستخدام جى كويرى







السلام عليكم نموذج تسجيل دخول الاعضاء مثل موقع تويتر بأستخدام جى كويرى يفضل البعض تقليل المساحات المتوفره بالاستايلات مثل مربع تسجيل الدخول و بالطبع اذا تم تفعيل نموذج الدخول بالاجاكس او الجى كويرى يكون شكل رائع حتى انه ينال اعجاب الاعضاء و الزوار و اليوم درس سهل ان شاء الله عن انشاء مربع لتسجيل الدخول لكن بالجى كويرى و من لا يعرف مكتبة جى كويرى فهى احد اشهر التطبيقات الحديثه و معظم المواقع الكبرى بما فيها جوجل يستخدم المكتبه لكنها بالتأكيد برمجه خاصه به لكنها تعطى نفس التقنيه الشكليه الجماليه للتطبيقات المختلفه و هنا مثال عن طريقة تسجيل الدخول بالجى كويرى http://www.ahba2b.com/vb سوف تجدها على كلمة باللون الاحمر .. تسجيل / دخول

ملحوظه: التطبيق متوافق فى الشكل و الظهور مع اشهر المتصفحات مثل اكسبلورر و جوجل كروم و فايرفوكس و نأتى الان للتطبيق العملى لاستخدام جى كويرى فى تسجيل الدخول بالمنتديات اولا حمل الملف المرفق و فك الضغط عنه ثم ستجد مجلدين و ملف الاستايل اولا ارفع مجلد javascripts الى مجلد منتداك اى بداخل فولدر vb مباشرة ثانيا ارفع مجلد loginjs داخل مجلد images الخاص بمنتداك داخل مجلد vb ثالثا ارفع ملف الاستايل بأسم front.css داخل مجلد vb مباشرة و بعد رفع الملفات كما هو محدد اعلاه نأتى للاكواد و التعديلات من داخل لوحة تحكم منتداك ابحث عن قالب headinclude و ضيف هذا السطر فى نهاية القالب

رمز Code:
<link href="front.css" media="screen, projection" rel="stylesheet" type="text/css" />

الان يمكنك وضع مربع تسجيل الدخول فى اى مكان كما تحب و هذا من خلال اضافة الكود التالى الى اى منطقه فى الاستايل و يفضل ان تضع الكود فى قالب الهيدر حتى يكون ملحوظ للاعضاء

رمز Code:
<if condition="$show['guest']"> <td class="thead" align="center" style="width: 100px"> <div id="container"> <div class="topnav"><a href="#login" class="signin"> <img src="images/loginjs/loginusers.png" alt="تسجيل دخول الاعضاء" border="0"> </a></div> <fieldset id="signin_menu"> <form action="login.php?do=login" method="post" onsubmit="md5hash(vb_login_password, vb_login_md5password, vb_login_md5password_utf, $show[nopasswordempty])"> <script type="text/javascript" src="clientscript/vbulletin_md5.js?v=$vboptions[simpleversion]"></script> <table cellpadding="0" cellspacing="$stylevar[formspacer]" border="0"> <tr> <td style="height: 22px"><input type="text" class="bginput" style="font-size: 11px" name="vb_login_username" id="navbar_username" size="10" accesskey="u" tabindex="101" value="$vbphrase[username]" onfocus="if (this.value == '$vbphrase[username]') this.value = '';" /></td> </tr><tr> <td><input type="password" class="bginput" style="font-size: 11px" name="vb_login_password" id="navbar_password" size="10" tabindex="102" /></td> </tr><tr><td><input type="submit" class="button" value="$vbphrase[log_in]" tabindex="104" title="$vbphrase[enter_username_to_login_or_register]" accesskey="s" /> &nbsp;&nbsp;<label for="cb_cookieuser_navbar"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" checked="checked" accesskey="c" />$vbphrase[remember_me]</label></td> </tr><tr> <td class="smallfont" nowrap="nowrap"><a href="register.php$session[sessionurl_q]" rel="nofollow">تسجيل عضو جديد ؟</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="login.php?do=lostpw" rel="nofollow">استرجاع الباسورد؟</a></td> </tr> </table> <input type="hidden" name="s" value="$session[sessionhash]" /> <input type="hidden" name="securitytoken" value="$bbuserinfo[securitytoken]" /> <input type="hidden" name="do" value="login" /> <input type="hidden" name="vb_login_md5password" /> <input type="hidden" name="vb_login_md5password_utf" /> </form> </fieldset> </div> <script src="javascripts/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $(".signin").click(function(e) { e.preventDefault(); $("fieldset#signin_menu").toggle(); $(".signin").toggleClass("menu-open"); });
$("fieldset#signin_menu").mouseup(function() { return false }); $(document).mouseup(function(e) { if($(e.target).parent("a.signin").length==0) { $(".signin").removeClass("menu-open"); $("fieldset#signin_menu").hide(); } });
}); </script> <script src="javascripts/jquery.tipsy.js" type="text/javascript"></script> <script type='text/javascript'> $(function() { $('#forgot_username_link').tipsy({gravity: 'w'}); }); </script> </td> </if>

الان سوف نحزف كود مربع تسجيل الدخول من النافبار فلا حاجة له بعد تطبيق التعديل و اضافة مربع الدخول بالاجاكس نفتح قالب navbar و نبحث عن

رمز Code:
<!-- breadcrumb, login, pm info -->

و الان ركز و قم بالبحث عن غلق الكود و هذه تعرفها من السطر التالى

رمز Code:
<!-- / breadcrumb, login, pm info -->

اى اننا نحزف كل ما بين السطرين كل الكود الموجود بين هذين السطرين احزفه نهائيا و ضع مكانه هذا الكود

رمز Code:
 

<table class="tborder" cellpadding="$stylevar[cellpadding]" cellspacing="$stylevar[cellspacing]" border="0" width="100%" align="center">
<tr>
<td class="alt1" width="100%">
<if condition="is_array($navbits)">
<table cellpadding="0" cellspacing="0" border="0"> <tr valign="bottom"> <td><a href="#" onclick="history.back(1); return false;"><img src="$stylevar[imgdir_misc]/navbits_start.gif" alt="$vbphrase[go_back]" border="0" /></a></td> <td>&nbsp;</td> <td width="100%"><span class="navbar"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1">$vboptions[bbtitle]</a></span> $navbits[breadcrumb]</td> </tr> <tr> <td class="navbar" style="font-size:10pt; padding-top:1px" colspan="3"><if condition="$_SERVER['REQUEST_METHOD'] == 'POST'"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="" border="0" /><else /><a href="$navbar_reloadurl"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_finallink_$stylevar[textdirection].gif" alt="$vbphrase[reload_this_page]" border="0" /></a></if> <strong>$navbits[lastelement]</strong></td> </tr> </table> <else /> <div class="navbar" style="font-size:10pt"><a href="$vboptions[forumhome].php$session[sessionurl_q]" accesskey="1"><img class="inlineimg" src="$stylevar[imgdir_misc]/navbits_start.gif" alt="" border="0" /></a> <strong>$vboptions[bbtitle]</strong></div> </if> </td> <if condition="$show['member']"> <td class="alt2" nowrap="nowrap"> <div class="smallfont"> <strong><phrase 1="$bbuserinfo[username]" 2="member.php?$session[sessionurl]u=$bbuserinfo[userid]">$vbphrase[welcome_x_link_y]</phrase></strong><br />
<phrase 1="$pmbox[lastvisitdate]" 2="$pmbox[lastvisittime]">$vbphrase[last_visited_x_at_y]</phrase>
<if condition="$show['notifications']">
<div><span id="notifications"><a href="usercp.php$session[sessionurl_q]">$vbphrase[your_notifications]:</a> <strong>$notifications_total</strong></span></div>
<if condition="$show['popups']">
<script type="text/javascript"> vBmenu.register("notifications"); </script> <else /> <script type="text/javascript" src="clientscript/vbulletin_notifications_nopopups.js?v=$vboptions[simpleversion]"></script> <script type="text/javascript"> vBulletin.register_control("vB_Notifications_NoPopups", "notifications"); </script> </if> <else /><if condition="$show['pmstats']"> <div><phrase 1="$vbphrase[unread_x_nav_compiled]" 2="$vbphrase[total_x_nav_compiled]" 3="$session[sessionurl_q]">$vbphrase[private_messages_nav]</phrase></div>
</if></if>
<if condition="$show['pmwarning']"><div><strong><phrase 1="$vbphrase[pmpercent_nav_compiled]">$vbphrase[your_pm_box_is_x_full]</phrase></strong></div></if>
</div>
</td>
<else />
</if>
</tr>
</table>
<!-- / breadcrumb, login, pm info -->

 

انتهي الدرس

 

لتحميل المرفق

 


http://www.traidnt.net/vb/showthread.php?t=1739778