سلام.
خوب هستید؟
توی این تاپیک یک سری پست در رابطه با ساخت یک فرم تماس با ما Ajax و jQuery (و قطعا بقیه زبان های مورد نیاز مانند Php) گذاشته میشه. کاملا Ajax هست و بصورت پنجره PopUp ظاهر میشه و شما فقط در یک صفحه هستید، بخشی از این آموزش از کدهای قبلی تاپیک "
[*=right]jQuery Reveal :
خب، حالا ما محتویات فایل jQuery Reveal رو به همون فولدرهایی که ساختیم میبریم (فایل های css در فولدر css و js ها در فولدر js ها و imgها در فولدر img ها)(باید هر فایلی رو طبق اصلیتش به این فولدرها انتقال بدید). به روایت کد (در index.php):
حالا باید فایل style.css رو بنویسیم، این کد هست:
اما بخاطر اینکه ما بتونیم قدر واقعی فرم رو نشون بدیم باید روی یچیزی بالاخره کلیک کنیم، پس یک کد هم به صفحه اصلی اضاف میکنیم:
در کلاس big-link، ما خاصیت هایی رو به تگ اضاف کردیم که طبق کتابخونه ها، بعد کلیک روی اون یکسری محتویات در قالب یک پنجره PopUp باز میشه. محتویات اون پنجره درون کلاس MyModal هست..
در جلسه بعد سراغ برنامه نویسی میریم...... (همچنین فایل app.js رو خودمون باید بنویسیم)
خوب هستید؟
توی این تاپیک یک سری پست در رابطه با ساخت یک فرم تماس با ما Ajax و jQuery (و قطعا بقیه زبان های مورد نیاز مانند Php) گذاشته میشه. کاملا Ajax هست و بصورت پنجره PopUp ظاهر میشه و شما فقط در یک صفحه هستید، بخشی از این آموزش از کدهای قبلی تاپیک "
لینک ها تنها برای اعضای سایت قابل نمایش است.
" که جاداره از Mohammad تشکر کنم.* مطلب کاملا اختصاصی نوشته شده! نه ترجمه شده! نه کپی شده! *
* در صورت نسخه برداری، کپی رایت رو ذکر کنید *
زبان های استفاده شده:
Javascript
Ajax
jQuery
Css
Html
Php
\\ پیشنهاد میشه از NotePad PlusPlus استفاده کنید //
* در صورت نسخه برداری، کپی رایت رو ذکر کنید *
زبان های استفاده شده:
Javascript
Ajax
jQuery
Css
Html
Php
\\ پیشنهاد میشه از NotePad PlusPlus استفاده کنید //
مرحله یک: (طراحی پایه)
خب، اول کاریم! باید یه ساختار پروژه ثابت برای خودمون درست کنیم.
خب، اول کاریم! باید یه ساختار پروژه ثابت برای خودمون درست کنیم.
- [*=right]index.php
[*=right]sent.php
دو فایل بالا فایل های اصلی ما هستن، اما ما یک فولدر با نام static درست میکنیم تا فایل های استاتیک رو اونجا قرار بدیم، درون اون هم 4تا فودر دیگه میسازیم به اسم های css,js,img,font که نشانگر هست اسمشون چی هستن.
اما مسلما" ما نمیتونیم بدون استفاده از یکسری کتابخونه و فریم ورک کار طراحی رو شروع کنید، پس فایل های زیر رو فراخوانی میکنیم، به روایت آمیانه:
اما مسلما" ما نمیتونیم بدون استفاده از یکسری کتابخونه و فریم ورک کار طراحی رو شروع کنید، پس فایل های زیر رو فراخوانی میکنیم، به روایت آمیانه:
- [*=right]jQuery :
لینک ها تنها برای اعضای سایت قابل نمایش است.
[*=right]jQuery Reveal :
لینک ها تنها برای اعضای سایت قابل نمایش است.
خب، حالا ما محتویات فایل jQuery Reveal رو به همون فولدرهایی که ساختیم میبریم (فایل های css در فولدر css و js ها در فولدر js ها و imgها در فولدر img ها)(باید هر فایلی رو طبق اصلیتش به این فولدرها انتقال بدید). به روایت کد (در index.php):
کد:
<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/js/app.js" type="text/javascript"></script>
<script src="static/js/jquery.reveal.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="static/css/reveal.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
کد:
@font-face{
font-family: Dnb;
src: url(../font/droidnaskh-bold.ttf),
url(../font/droidnaskh-bold.eot);
}
body
{
margin: 0 auto;
font-family: tahoma;
font-size: 12px;
direction: rtl;
}
.box
{
width: 400px;
height: 16px;
border: 2px solid #a1a1a1;
border-radius: 10px;
margin: 8% auto;
padding: 12px;
text-align: center;
}
a
{
text-decoration: none;
color: #4C4C4C;
}
footer
{
text-align: center;
}
h4
{
margin: 0 auto;
font-family: Dnb;
font-size: 70px;
direction: rtl;
text-align: center;
color: #2F2F2F;
text-shadow: 1px 1px 2px #1A1A1A;
}
input
{
border: 1px solid #ccc;
border-radius:4px;
padding: 3px;
font: normal 12px Tahoma;
background:#F8F8F8;
transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
-o-transition:all .5s;
}
textarea
{
border:1px solid #ccc;
border-radius:4px;
padding:3px;
font:normal 12px Tahoma;
background:#F8F8F8;
transition:all .5s;
-moz-transition:all .5s;
-webkit-transition:all .5s;
-o-transition:all .5s;
}
کد:
<!DOCTYPE html>
<html>
<head>
<title>فرم تماس با ما</title>
<script src="static/js/app.js" type="text/javascript"></script>
<script src="static/js/jquery.js" type="text/javascript"></script>
<script src="static/js/jquery.reveal.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="static/css/reveal.css">
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<br>
<div class="box">
<b><a href="#" class="big-link" data-reveal-id="myModal">اینجا کلیک کنید</a><br></b>
</div>
<div id="myModal" class="reveal-modal">
<center>
<h4>تماس با ما</h4>
<br><br>
<form action="#">
<input type="text" name="yname" size="40" placeholder="نام شما"><br><br>
<input type="text" name="ymail" size="40" placeholder="ایمیل شما"><br><br>
<input type="text" name="ysubject" size="40" placeholder="موضوع"><br><br>
<textarea name="ymsg" cols="40" rows="12" placeholder="پیغام شما"></textarea><br><br>
<input type="button" value="ارسال" onclick="formget(this.form, 'sent.php?');">
</form>
<br>
<div id="show"></div>
<a class="close-reveal-modal">×</a>
</center>
</div>
<footer>طراحی و برنامه نویسی: <a href="http://ireza.blog.ir">رضا فرهادیان</a></footer>
</body>
</html>
لینک ها تنها برای اعضای سایت قابل نمایش است.
در جلسه بعد سراغ برنامه نویسی میریم...... (همچنین فایل app.js رو خودمون باید بنویسیم)
آخرین ویرایش توسط مدیر: