تاریخ انتشار : ۱۴ تیر ۱۳۹۴
گردآوری و تالیف : حسام موسوی

کارمو با طراحی گرافیکی شروع کردم و حدود 2 سال طراحی گرافیکی میکردم بعد به طراحی وب علاقه پیدا کردم و همراه طراحی وب عاشق کدنویسی شدم به PHP | sass | css | Jquery | javaScript تسلط کامل دارم . در بین فریم ورک های PHP اول با CodeIgniter کار کردم اما به laravel علاقه مند شدم و دارم بطور حرفه ای دنبالش میکنم . امید من اینکه بتونم کاربرهای ایرانی رو به دنیای بیرون متصل کنم تا بتونن از فناوری های تازه آگاهی داشته باشن

یک جدول قیمت گذاری که به فرم ثبت نام متصله و هنگامی که کاربر یک پنل رو انتخاب میکنه فعال میشه . 

طراحی یک فرآیند پرداخت آسان هرگز راحت نبوده چون هیچ استاندارد جهانی براش وجود نداره .اگه شما در ارائه و پیشنهاد دادن پنل های مختلف با قیمت های مختلف مشکل دارین ، به نظرم باید کاربرهای خودتونو از طریق یه جدول ، با قیمت های پنل آشنا کنید . ما فعلا با قسمت ساخت پنل کاری نداریم ان شالله در یه پست دیگه حتما در موردش صحبت میکنیم اما در این پست تمرکزمون ، رو این قضیه اس که بعد از انتخاب یه پنل چه اتفاقی باید بیفته . در اغلب موارد بعد از انتخاب یکی از پنل ها ، اون سایت کاربران رو به یه صفحه دیگه هدایت میکنه . با این حال ، اگر روند پرداخت خود را کاملا ساده . و دارای جدول قیمت گذاری در همان صفحه و توانایی پرداخت از راه درست داشته باشن این موارد میتونه اونا رو تحریک به انجام کاری که شما میخواین بکنه و این چیزیه که ما سعی داریم تو این مقاله بهتون یاد بدیم .

دانلود فایل | دمو

صحبت کافیه ، اجازه بدین بریم سراغ کدها ! 

  • ساختار کدهای Html

ساختار کلی html از دو المنت اصلی تشکل شده یکی ul.cd-pricing که برای جدول هزینه هاست و دیگری div.cd-form برای پنجره شکل مدل . هر طرح شامل یک المنت header که درون این المنت عنوان و قیمت قرار داده میشه و یک div.cd-pricing-features که شامل یک لیست از ویژگی هاست و در آخر هم یک footer برای تماس با دکمه select . 

خب حالا میرسیم به فرم . ساختار فرم خیلی ساده و سر راسته . فقط به یک نکته توجه داشته باشین . المنت div.cd-plan-info خالیه و توسعه دهنده با استفاده از jquery میتونه اطلاعاتی که نیاز داره تا کاربر ببینه رو بهش نشون بده . 

<ul class="cd-pricing">
	<li>
		<header class="cd-pricing-header">
			<h2>Basic</h2>
 
			<div class="cd-price">
				<span>$9.99</span>
				<span>month</span>
			</div>
		</header> <!-- .cd-pricing-header -->
 
		<div class="cd-pricing-features">
			<ul>
				<li class="available"><em>Feature 1</em></li>
				<li><em>Feature 2</em></li>
				<li><em>Feature 3</em></li>
				<li><em>Feature 4</em></li>
			</ul>
		</div> <!-- .cd-pricing-features -->
 
		<footer class="cd-pricing-footer">
			<a href="#0">Select</a>
		</footer> <!-- .cd-pricing-footer -->
	</li>
	
	<li>
		<!-- ... -->
	</li>
 
	<li>
		<!-- ... -->
	</li>
</ul> <!-- .cd-pricing -->
 
<div class="cd-form">
	
	<div class="cd-plan-info">
		<!-- content will be loaded using jQuery - according to the selected plan -->
	</div>
 
	<div class="cd-more-info">
		<h3>Need help?</h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	</div>
	
	<form action="">
		<fieldset>
			<legend>Account Info</legend>
			
			<div class="half-width">
				<label for="userName">Name</label>
				<input type="text" id="userName" name="userName">
			</div>
			
			<div class="half-width">
				<label for="userEmail">Email</label>
				<input type="email" id="userEmail" name="userEmail">
			</div>
			
			<div class="half-width">
				<label for="userPassword">Password</label>
				<input type="password" id="userPassword" name="userPassword">
			</div>
			
			<div class="half-width">
				<label for="userPasswordRepeat">Repeat Password</label>
				<input type="password" id="userPasswordRepeat" name="userPasswordRepeat">
			</div>
		</fieldset>
 
		<fieldset>
			<!-- ... -->
		</fieldset>
		
		<fieldset>
			<!-- ... -->
		</fieldset>
	</form>
 
	<a href="#0" class="cd-close"></a>
</div> <!-- .cd-form -->
 
<div class="cd-overlay"></div> <!-- shadow layer -->
  • اضافه کردن استایل 

css این پروژه خیلی خیلی سادست . فقط باید برخی نکات رو توجه کنید . کلاس .empty-box اضافه میشه به ، .cd-pricing > li ، برای زمانی که فرم قابل مشاهده باشه . باید پنلی که انتخاب میکینم ، اون پنل محو بشه و از اونجا فرم قابل مشاهده باشه. برای همین هم از کلاس .empty-box استفاده میکنیم . 

.cd-pricing > li {
  position: relative;
  margin: 0 auto 2.5em;
  background-color: #ffffff;
  border-radius: .3em .3em .25em .25em;
  box-shadow: 0 2px 8px rgba(2, 4, 5, 0.5);
}
 
.cd-pricing > li.empty-box {
  box-shadow: none;
}
 
.cd-pricing > li.empty-box::after {
  /* placeholder visible when .cd-form is open - in this case same color of the background */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0f222b;
}

 از جهت دیگه وقتی فرم رو بستیم بدونیم که اون فرم برای کدوم یکی از پنل ها بوده و زمانی که فرم رو بسیتم بصورت متحرک به دنبال دکمه بره و پنل برگرده . دارم در مورد دکمه ای پنلی که در در قسمت cd-pricing-footer وجود داره صحبت میکنم و کدش هم به صورت زیر میشه . 

.cd-pricing-footer a {
  transition: transform 0.3s;
}
 
.empty-box .cd-pricing-footer a {
  /* scale down to 0 the action button when sign up form is visible */
  transform: scale(0);
}

در div.cd-form خصوصیت position رو برابر با fixed قرار میدیم و اون اندازه پیش فرض هم نداره . زمانی که کاربر روی دکمه select کلیک میکنه ، ما فرم رو قابل مشاهده می کنیم ، (from visibility: hidden; to visibility: visible;) و در قدم بعدی قیمت و مشخصاتی که در پنل وجود داشت بطور متحرک به قسمتی از فرم تبدیل میشه . کد های بخش المنت div.cd-form رو میتونید در زیر ببنید :

/* -------------------------------- 
 
Form 
 
-------------------------------- */
 
.cd-form {
  position: fixed;
  z-index: 2;
  background-color: #ffffff;
  border-radius: .25em;
  visibility: hidden;
  transition: visibility 0s 0.8s;
 
  /* Force Hardware Acceleration in WebKit */
  transform: translateZ(0);
  backface-visibility: hidden;
}
 
.cd-form.is-visible {
  /* form is visible */
  visibility: visible;
  transition: visibility 0s 0s;
}

یکی از آخرین جزئیاتی که باید رعایت کنید : هنگامی که فرم قابل مشاهده است . میبینید که بکگراند سبزی که در پنل وجود داشت هنگامی که فرم قابل مشاهده میشه به بکگراند قسمت قیمت گذاری و لیست ویژگی های مهم تبدیل میشه (تنها در نسخه دسکتاپ) . در واقع css این المنت فرق داره  (.cd-form .cd-pricing-features::before) . ارتفاع هم که متحرکه . (با استفاده از مقیاس های برای تبدیل) 

.cd-form .cd-pricing-features::before {
  /* this is the layer which covers the .cd-pricing-features when the form is open - visible only on desktop */
  content: '';
  position: absolute;
  /* fix a bug while animating - 1px white space visible */
  top: -5px;
  left: 0;
  
  height: calc(100% + 5px);
  width: 100%;
  background-color: #95ac5f;
 
  will-change: transform;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.6s 0.2s;
}

 

  • دستکاری عملکرد ها و رویداد ها 

تابع animateForm() برای متحرک سازی فرم مورد استفاده قرار میگیره . زمانی که یه کاربر روی دکمه select کلیک مکینه تابع موقعیت و بعد قیمت گذاری جدول انتخاب شده رو ارزیابی میکنه  و در مرحله بعد برای کامل کردن .cd-form استفاده میکنه . (جعبه پنل هم با کلاس .empty-box تا بستن فرم پنهان میمونه ) .

سپس انیمیشن شروع می شه و با استفاده از انیمیشن طول و عرض و همچنین موارد دیگه تغییر میکنه . 

//form is the .cd-form element
form.velocity(
{
	'width': tableWidth+'px', //pricing table item width
	'height': tableHeight+'px', //pricing table item height
	'top': formTopValue, //final top value of the form 
	'left': formLeftValue, //final top value of the form 
	'translateX': formTranslateX+'px', //difference between formLeftValue and pricing table item left value
	'translateY': formTranslateY+'px', //difference between formTopValue and pricing table item top value
	'opacity': 1,
}, 0, function(){
	//table is the pricing table item
	table.addClass('empty-box');
	
	form.velocity(
	{
		'width': formFinalWidth+'px', //form final width
		'height': formFinalHeight+'px', //form final height
		'translateX': 0,
		'translateY': 0,
	}, 
	//animation duration
	animationDuration, 
	//spring easing
	[ 220, 20 ]).addClass('is-visible');
});

هنگامی که کاربر مدل رو میبنده ، فیلد های فرم پنهان میشه (opacity اونها به 0 تغییر میکنه ) و در قدم بعدی انیمیشنی که برای قابل مشاهده کردن فرم استفاده میشد بطور معکوس برای بستن فرم استفاده میشه . (برای اجرای درست انیمیشن ها از تاخیرهای متفاوتی که با متغیر delay مقدار دهی میشه استفاده میکنیم)

خوب امیدوارم لذت برده باشین و مورد استفاده اتون قرار گرفته باشه . 

دیدگاه های مخاطبین

ثبت دیدگاه شما
  • mohammad

    ممنون بابت این آموزش و معرفی .

    فکر نکنم خیلی کاربردی باشه چون تفاوتی در انتخاب پلن وجود نداره
    مثلا وقتی یکی از پلن هارو انتخاب میکنیم ، حداقل قیمت رو درون فرم باید قرار بده که زمان ارسال شدن فرم ، بشه از مقدارش استفاده کرد !

    • admin

      خواهش میکنم

      خب شما بببنید وقتی پنل انتخاب میشه میره به فرم و اونجا اطلاعات پر میشه و بعد میره به صفحه پرداخت خب تا اینجا مشکلی نیست ولی وقت حرف شما پیش میاد و ما ایرانیا باید قبلش قیمت رو وارد کنیم شما خیلی راحت میتونید با یک خط کد جی کوئری قیمت رو انتخاب و اونجایی که میخواین قرار بدین . به نظرم اینکار خیلی سادست . اگه منظورتون از کاربردی نبودن این باشه .

  • ali

    سلام جریان پیشوند CD در کدهای سی اس اس چی هست?

    • admin

      سلام چیز خواستی نیست ! روش نام گذاریه

  • امیر

    سلام لینک دمو ویروسی بود.

    • admin

      سلام دوست عزیز ویروسی نیست . اما نمی دونم چرا توسط انتی ویروس کسپر اسکای بلوک شده . فکر کنم بعد یه مدت خودش اوکی میشه . با تشکر بابت اطلاع دادنتون

پیشنهاد میکنیم این مطالب رو هم مطالعه کنید :