توی این قسمت و قسمت بعدی میخوام درباره Jquery صحبت کنم که قولشو توی جلسات قبلی دادم ، میخوام یه صفحه ثبت نام با استفاده از کدهای CSS و JQuery درست کنم . در ابتدا یه توضیح کوتاه درباره JQuery میدم و بعدش میریم توی کد نویسی ، JQuery یه کتابخانه JavaScript هست که با استفاده از JQuery میشه راحت تر و سریع تر کدنویسی انجام داد توی جاوااسکریپت (شعار JQuery کد کمتری بنویسید کار بیشتری انجام بدید) واسه اینکه بتونیم از این کتابخانه استفاده کنیم یا باید این کتابخانه رو دانلود کنیم و یا باید با استفاده از لینک دسترسی داشته باشیم به این کتابخانه که در هر دو صورت باید این کارو با استفاده از تگ <Script> انجام بدیم و بعد از اینکه به این کتابخانه دسترسی داشتیم میتونیم از توابع این کتابخانه توی کدهامون استفاده کنیم . روش اول دانلود کتابخانه (به سایت JQuery مراجعه کنید و آخرین نسخه رو دانلود کنید) که بعدش یه فولدر بنام JS میسازیم و این فایل توش قرار میدیم سپس توی هر صفحه ای که خواستیم از این کتابخانه استفاده کنیم با استفاده از تگ <script> اونو بارگزاری میکنیم . میخوام زمانی که یه یوزر وب سایت باز میکنه(قبل از اینکه با یوزر و پسورد خودش لاگین کنه به سایت) براش فرم ثبت نمایش داده بشه و اگه وارد سایت شد دیگه این فرم نمایش داده نشه، پس من این فرم توی Index.php (توی فولدر Index) میسازم .
تغییر در کد Index .php (توی فولدر Index) :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
|
. . .<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript" src="JS/JQuery.js"></script></head> . . . |
من تگ <script> اضافه کردم .اگه میخواستیم از روش دسترسی به لینک به توابع JQuery دسترسی داشته باشیم (یعنی دیگه JQuery دانلود نمیکنیم) باید تگ <script> بصورت زیر بنویسیم :
|
۱
|
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script > |
یا
|
۱
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script > |
فرقی نمیکنه که دانلودش کنید یا اینکه از طریق لینک به توابعش دسترسی داشته باشید در هر صورت اگه خواستید دانلودش کنید حتماً آخرین نسخه رو دانلود کنید .
خوب میریم سر قواعد دستوری در JQuery :
تمام کدهایی JQuery رو باید توی تکه کد زیر بنویسیم .
|
۱
۲
۳
۴
|
$(function(){ دستورات ...}); |
قواعد دستوری در JQuery بصورت زیر هست :
|
۱
|
$(selector).action(); |
که به جای selector نام تگی که میخوایم اعمالی روش انجام بدیم رو وارد میکنیم و بجای action هم نام کاری که میخوایم روی تگ انجام بدیم (مثلاً Show) .
|
۱
|
$("#message").hide(); |
مثلاً کد بالا میاد تگی که id یش برابر message هست رو مخفی میکنه .
رویدادها در JQuery :
با استفاده از رویدادها میتونیم برنامه رو جوری بنویسیم تا زمانی که یه رویداد خاص (مثلاً کلیک کردن روی دکمه یا لینک) اتفاق افتاد یکسری کد اجرا بشه .
syntax بصورت زیر هست .
|
۱
۲
۳
۴
|
$(selector).event(function(){ دستورات ... }); |
که به جای Selector نام تگ و بجای event نام رویداد رو مینویسیم و سپس تمامی دستوراتز که میخوایم انجام بشه رو درون { } مینویسیم . واسه کسب اطلاعات بیشتر میتونید به سایت JQuery برید . خوب شروع میکنیم به کد نویسی و تمام کدهایی که مینویسیم رو در ادامه توضیح میدم ولی در ابتدا باید textbox و button ایجاد کنیم و یه قالب بهش بدیم سپس از jquery استفاده میکنیم واسه عملکرد بهتر سایتمون .
تغییر در کد Index .php (توی فولدر Index) :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
۶۳
۶۴
۶۵
۶۶
۶۷
۶۸
۶۹
۷۰
۷۱
۷۲
۷۳
۷۴
۷۵
۷۶
۷۷
|
. . .<body> <div id="Reg_News"> <ul> <li class="right"> <div id="Register"> <ul> <li id="title"> عضویت در سایت ...! </li> <li> <input type="text" name="txt_Name" id="txt_Name" value="نام" /> <input type="text" name="txt_Family" id="txt_Family" value="نام خانوادگی" /> </li> <li> <input type="text" name="_txt_pass" id="_txt_pass" value="رمز عبور" /> </li> <li> <input type="text" name="_txt_pass2" id="_txt_pass2" value="تکرار رمز عبور" /> </li> <li> <input type="text" dir="rtl" name="txt_Email" id="txt_Email" value="آدرس پست الکترونیکی" /> </li> <li> <input type="text" name="txt_Email2" id="txt_Email2" value="تکرار آدرس پست الکترونیکی" /> </li> <li> <input name="radio_Sex" type="radio" id="radio_Sex" value="0" /> <label id="lbl_Male">مرد</label> <input class="radio_FeMale" name="radio_Sex" type="radio" id="radio_Sex" value="1" /> <label id="lbl_Female">زن</label> </li> <li> <input type="text" name="txt_Question" id="txt_Question" value="سوال امنیتی" /> </li> <li> <input type="submit" name="btn_Reg" id="btn_Reg" value="ثبت نام" /> </li> <li> <label> <p> <div> در صورتی که بر روی دکمه ثبت نام کلیک کنید یعنی شما تایید میکنید </div> <div> که <a href="#Rules">قوانین سایت</a> را مطالعه کرده و پذیرفته اید . </div> </p> </label> </li> </ul> </div> </li> <li class="left"> <div id="News"> <ul> <li> News1........... </li> <li> News2........... </li> </ul> </div> </li> </ul> </div></body></html> |
خروجی :
خوب الان میایم یه فایل بنام register.css توی فولدر CSS ایجاد میکنیم و بصورت زیر این فایل لود میکنیم توی فایل بالا و سپس کدهایی قالب فرم ثبت نام( یا عضویت ) توش مینویسیم .
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
|
. . .<title>Untitled Document</title><script type="text/javascript" src="JS/JQuery.js"></script><link rel="stylesheet" type="text/css" href="CSS/Register.css"/></head><body> . . . |
فقط تگ <link> اضافه کردم .
کد register.css :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
|
#Register{ padding: 5px; width: 600px; border: 1px solid darkgrey; direction: rtl; margin: 100px 0 0 10px; border-radius: 5px;}#News{ padding: 5px; width: 500px; border: 1px solid darkgrey; direction: rtl; margin: 100px 0 0 10px; border-radius: 5px;} |
خروجی :
این خط کد رو به Register# اضافه میکنیم :
|
۱
|
text-align:right; |
نتیجه :
خوب الان میایم یه id به تگ <li> (مربوط به فیلد نام و نام خانوادگی) اضافه میکنیم (این تغییر واسه اینه که میخوایم اندازه این فیلدها رو تغییر بدیم، در ادامه می بینید)
تغییر در کد Index .php (توی فولدر Index) :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
|
. . .عضویت در سایت ...!</li><li id="fn_ln"> <input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" /> . . . |
فقط “id=”fn_ln اضافه کردم .
حالا دوباره کدهایی به register.css اضافه میکنیم .
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
|
#Register #fn_ln{ width: 500px;}#Register #_txt_pass, #Register #_txt_pass2, #Register #txt_Email, #Register #txt_Email2, #Register #txt_Question{ width: 330px;}#Register input, #Register #lbl_Male, #Register #lbl_Female{ font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold;} |
نتیجه :
خوب میبینید که توی عکس textbox ها توی یه راستا نیستن پس یه خورده تنظیمشون میکنیم و یه سایه هم بهشون میدیم بهتر بشن .
ابتدا توی Index.php (توی فولدر Index) خط زیر رو به تگهای <input> (که textbox هستن) اضافه میکنیم .
|
۱
|
class="borderstyle" |
کد Index.php (شبیه زیر):
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
۱۹
۲۰
۲۱
۲۲
۲۳
۲۴
۲۵
۲۶
۲۷
۲۸
۲۹
۳۰
۳۱
۳۲
۳۳
۳۴
۳۵
۳۶
۳۷
۳۸
۳۹
۴۰
۴۱
۴۲
۴۳
۴۴
۴۵
۴۶
۴۷
۴۸
۴۹
۵۰
۵۱
۵۲
۵۳
۵۴
۵۵
۵۶
۵۷
۵۸
۵۹
۶۰
۶۱
۶۲
|
. . . <li id="title"> عضویت در سایت ...! </li> <li id="fn_ln"> <input type="text" name="txt_Name" id="txt_Name" value="نام" class="borderstyle" /> <input type="text" name="txt_Family" id="txt_Family" value="نام خانوادگی" class="borderstyle" /> </li> <li> <input type="text" name="_txt_pass" id="_txt_pass" value="رمز عبور" class="borderstyle" /> </li> <li> <input type="text" name="_txt_pass2" id="_txt_pass2" value="تکرار رمز عبور" class="borderstyle" /> </li> <li> <input type="text" dir="rtl" name="txt_Email" id="txt_Email" value="آدرس پست الکترونیکی" class="borderstyle" /> </li> <li> <input type="text" name="txt_Email2" id="txt_Email2" value="تکرار آدرس پست الکترونیکی" class="borderstyle" /> </li> <li> <input name="radio_Sex" type="radio" id="radio_Sex" value="0" /> <label id="lbl_Male">مرد</label> <input class="radio_FeMale" name="radio_Sex" type="radio" id="radio_Sex" value="1" /> <label id="lbl_Female">زن</label> </li> <li> <input type="text" name="txt_Question" id="txt_Question" value="سوال امنیتی" class="borderstyle" /> </li> <li> <input type="submit" name="btn_Reg" id="btn_Reg" value="ثبت نام" /> </li> <li> <label> <p> <div> در صورتی که بر روی دکمه ثبت نام کلیک کنید یعنی شما تایید میکنید </div> <div> که <a href="#Rules">قوانین سایت</a> را مطالعه کرده و پذیرفته اید . </div> </p> </label> </li> </ul> </div></li><li class="left"> . . . |
حالا تکه کد زیر به register.css اضافه میکنیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
#Register .borderstyle{ border: 1px solid darkgrey; border-radius: 3px; text-indent: 7px; padding: 5px 0; width: 162px; color: darkgrey; box-shadow: 0 0 11px #d8d8d8; -moz-box-shadow: 0 0 11px #d8d8d8; -webkit-box-shadow: 0 0 11px #d8d8d8; -ms-box-shadow: 0 0 11px #d8d8d8; -o-box-shadow: 0 0 11px #d8d8d8;} |
نتیجه :
خوب حالا میایم این دایره ها و نقطه های داخل کادر و بیرون کادر رو از بین میبریم (یا مخفی شون میکنیم) و یه استایل به دکمه ثبت نام میدیم .
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
۱۷
۱۸
|
#Register li, #Reg_News li{ list-style: none; padding: 0; margin: 0 0 7px 0;}#btn_Reg{ width: 150px; padding: 6px; border: 1px solid black; background-color: #08a000; border-radius: 3px; color: #000; margin-top: 20px; font-size: 14px;} |
نتیجه :
حالا میایم یه خورده استایل دو خط متنی که زیر دکمه “ثبت نام” قرار داره رو تغییر میدیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
۱۶
|
#Register label{ width: 200px; color: #333; font-size: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif;}#Register label a{ margin: 0 5px; color: red; text-decoration: none; text-shadow: 0 2px 3px red;} |
نتیجه :
و یه خورده هم متن “عضویت در سایت …!” تغییر میدیم و یه فاصله بین radio button مرد و زن می ندازیم :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
.radio_FeMale{ margin: 0 40px 0 0;}#title{ font-size: 25px; margin-bottom: 20px; margin-right: 10px; font-family: "Times New Roman", Times, serif; font-weight: bold; color: #006396; text-shadow: 0.9px 0.9px 12px #006396;} |
نتیجه :
یه کار دیگه مونده ، قسمت خبرها رو هم میزاریم کنار فرم ثبت نام . کدهای زیر اضافه میکنیم .
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
۱۳
۱۴
۱۵
|
#Reg_News{ margin: 0 auto; width: 1200px;}#Reg_News li.right{ float: right;}#Reg_News li.left{ float: left;} |
توی کد بالا نکته ای که وجود داره اینه که، حتماً باید li به left. و right. بچسبه (یعنی نباید فاصله ای بین این دو وجود داشته باشه وگرنه نتیجه ای که میخوایم به دست نمی یاد)
نتیجه :
یه استایل هم به Footer میدیم . باید یه Footer.css توی فولدر CSS بسازیم و لودش کنیم توی Footer.php .
کد Footer.php :
|
۱
۲
۳
۴
۵
۶
۷
۸
۹
۱۰
۱۱
۱۲
|
. . .<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" type="text/css" href="CSS/Footer.css"/><title>Untitled Document</title> . . . |
کد Footer.css :
|
۱
۲
۳
۴
۵
۶
۷
|
#Footer{ margin: 0 auto; background-color: #6260b6; height: 300px; text-align: center;} |
نتیجه :
خوب باید ارتفاع RegNews# مقداردهی کنیم تا سایتمون درست نمایش داده بشه ، کد زیر رو به قسمت RegNews# (توی کد register.css) اضافه میکنیم .
|
۱
|
height: 600px; |
خوب الان یه بار دیگه نتیجه رو میبینیم :
خوب الان خوب شد حالا یه خورده عرض فرم ثبت نام و خبر رو کوچیک میکنیم و متن Footer از بالا فاصله میدیم (تقریباً میاریمش پایین صفحه) .
کد زیر به Footer.css اضافه میکنیم :
|
۱
۲
۳
۴
۵
۶
۷
|
#Footer div{ padding-top: 250px; font:Arial, Helvetica, sans-serif; font-weight:bold; font-size: 15px;} |
حالا عرض قسمت Register# تغییر میدیم .
|
۱
|
width:530px; |
عرض قسمت News# هم تغییر میدیم .
|
۱
|
width:450px; |
یه خروجی از نتیجه کارمون میگیریم :
تا الان فرم ثبت نام درست کردیم حالا میخوایم چندتا کار باحال انجام بدیم:
۱) زمانی که فوکوس می کنیم روی یه textbox ، متن داخل اون پاک بشه و اگه هیچ کاراکتری توی textbox ننوشتیم و فوکوس از روش برداشتیم کادر دور textbox قرمز بشه .
۲) اگه کاراکترهای یکی از دو textbox ی که مربوط به رمزعبور هست باهم برابر نبود بازم کادر دور اینا قرمز بشه.
۳) اگه ایمیل معتبر وارد نکنیم کادر دور قرمز بشه .
۴) ……
