دوره آموزش جی کئوری در حداقل زمان ...

پاسخ : 2 RE دوره آموزش جی کئوری در حداقل زمان ...

پيام خصوصي نقل قول تشکر کنيد

بخش دوم آموزش

-آموزش تگ animate و چند مثال با آن

-ساخت یک ابزار ساده با جی کئوری

-تگ alert

-تگ stop

و چند تگ جایگزین و توضیحات تکمیلی

--------------------

بسم الله الرحمن الرحیم

سلام

از بخش اول موضوعات بالا شروع میکنم امروز و به آخرین موضوع ختم میشه این آموزش

-آموزش animate

این تگ همونطوری که معلومه افکتهای ما رو زیباتر میکنه و مثل خاصیت transtion در css هست

به مثال زیر دقت کنید

کد:

<style>
#vg{ color:#F00}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#vg").click(function(){
		$("#vg").animate({opacity:'0.1'},200);
	});
});
</script>

<div id="vg">i love J-query</div>

توضیحات : در کد بالا میبینیم که سه بخش سی اس اس جی کئوری و اچ تی ام ال داریم

بخش سی اس اس رنگ قرمز به متن html ما میده

و بخش جی کئوری دستوری رو به متن میده که اگر کلیک شد روی متن میزان شفافیت آن طی 0.2 ثانیه یک دهم اول بشه

0.1

اعداد همگی طبق خواسته های شما قابل تغیر هستن

-> تگهایی که در بخش animate استفاده میشن محدود تر از css هستند و یکم هم فرق دارن

با استفاده از برنامه dream wever میشه اونا رو مشاهده کرد

و بجای عبارت "#vg" دوم توی کد بالا میشد عبارت this هم استفاده کرد

---- یه اسلاید دو تصویری میسازم برای مثال ( اسلایدر واقعی با دستورات if و ... هست که فعلا زوده و به این شکل نیست )

ابتدا سی اس اس و اچ تی ام ال رو بصورت زیر مینویسیم

کد:

<style>
#slide{ height:150px; width:150px; position:relative; overflow:hidden}
#imgone{ height:150px; width:150px; position:absolute;}
#imgtwo{ height:150px; width:150px; position:absolute;}
</style>

html

کد:

<div id="slide">
<div id="imgone"><img src="http://versiongraphic.rozblog.com/user/Avatar/versiongraphic/alireza.jpg" /></div>
<div id="imgtwo"><img 
src="http://versiongraphic.rozblog.com/user/Avatar/versiongraphic/admin-versiongraphic.png"
 /></div>
</div>
<button id="one">عکس دوم</button>
<button id="two">عکس اول</button>

کد جی کئوری هم به شکل زیر

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#one").click(function(){
		$("#imgtwo").animate({opacity:'0',right:'150px'});
	});
});
$(document).ready(function() {
	$("#two").click(function(){
		$("#imgtwo").animate({opacity:'1',right:'0px'});
	});
});

</script>

قسمت اول جی کئوری که کتابخانه جی کئوری میباشد

در قسمت بعد ما 2 دکمه تعریف کردیم

با کلید روی هر کدوم از اونها میشه تصویر رو عوض کرد

مثال بالا رو اگه css رو بلد باشید کاملا ملموسه

و اگر میخواین افکت محو شدن در حرکت به راست و چپ رو نداشته باشه کافیه opacity رو حذف کنید

و عبارت right هم قابل تعویضه

موفق باشید

اگه خاطرتون باشه بالا گفتم که امکانات animate نسبت به css کمتره

ولی میشه بجای انیمیشن از css در جی کئوری استفاده کرد

بصورت زیر

کد:

<script>
$(document).ready(function() {
	$("#two").click(function(){
		$("#imgtwo").css({"opacity":"1"});
	});
});

</script>

فقط یه نکته اینکه نمیشه بهش زمان داد و سریع افکت اجرا میشه

و قابل به ذکره تمام تگها مثل css هست و برای جدا کردنشون از , استفاده میشه

مثل مثال زیر

کد:

<script>
$(document).ready(function() {
	$("#two").click(function(){
		$("#imgtwo").css({"opacity":"1","color":"#000"});
	});
});

</script>

آموزش ساخت ابزار با جی کئوری ، تگ alert

تگ alert چیز خیلی خاصی نداره

و توی مثال ساخت ابزار استفادش میکنم و مطمئنم هیچکس توش مشکل نداره

ما میخوایم یه ابزار بسازیم که اسم و فامیل شخص رو ازش بگیره و بنویسه

"اسم شما : ... و فامیلی شما : ... هست ، لحظات خوبی داشته باشید"

ابتدا یه کد html مینویسیم

توی کد اچ تی ام ال ما دوتا فیلد میخوایم که اسم و فامیل شخص توشون باشه

و یه دکمه که ثبت کنه اطلاعات رو

با یه خط که نتیجه ابزار رو توش نمایش بده

پس دست بکار میشیم

کد:


اسم شما : <input type="text" id="name" value="اسمتان را وارد کنید" /><br />
فامیلی شما : <input type="text" id="family" value="فامیلی خود را وارد کنید" />
<br />
<button id="sub">ثبت</button>

<p id="text"></p>

حال میریم سراغ جی کئوری

کد:

<script>
$(document).ready(function() {
	$("#sub").click(function(){
		$("#text").html("نام شما : "+ $("#name").val()+ "  و فامیلی شما : "
 + $("#family").val()+" میباشد ، لحظات خوبی را برای شما آرزو میکنیم ")
		alert("ممنون از حسن انتخاب شما")
	});
});
</script>

در خط اول تعریف میکنیم وقتی روی دکمه ای که ای دی sub دارد کلیک کردیم متن

های داخل دو باکس رو برداره + یه سری متن که خودمون زدیم نمایش بده

و خط پایینشم که همون پیام alert هست که توضیحی نداره

تبریک ، اولین ابزارتونو با جی کئوری ساختین

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

تگ stop

این تگ همونطوری که از اسمش معلومه باعث میشه افکت یا دستور لغو یا نگه داشته بشه تا همونجایی که انجام شده

به مثال زیر دقت کنید

بخش html

کد:

<div style="height:100px; width:100px; background-color:#666" id="ab"></div>
<button id="bc">ایستادن</button>

بخش جی کئوری

کد:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$("#ab").click(function(){
		$("#ab").animate({marginLeft:'1000px'},10000);
	});
});
$(document).ready(function() {
	$("#bc").click(function(){
		$("#ab").stop();
	});
});

</script>

در مثال زیر وقتی روی مربع کلیک میکنیم شروع میکنه به حرکت

و وقتی روی دکمه "ایستادن" کلیک میکنیم در هر جایی که هست وای میسه

این تگ تنها کاراییش همینه ولی بسیار کاربردیه و حتما بهش همه ی ما نیاز داریم

یکی از مثالهاش توی اسلایدر های افقی هست که دارای متن طولانی هستن

باید این دکمه باشه که کاربر بتونه نگه داره اسلاید رو و متن رو بخونه

حال حتما نباید دکمه بذاریم

میشه با بردن موس روی اسلاید ، اسلاید از کار بیوفته

من همین کار رو با مثال بالا میکنم

بخش html

کد:


<div style="height:100px; width:100px; background-color:#666" id="ab"></div>

و بخش J-query

کد:

<script>
$(document).ready(function() {
	$("#ab").click(function(){
		$("#ab").animate({marginLeft:'1000px'},10000);
	});
});
$(document).ready(function() {
	$("#ab").hover(function(){
		$("#ab").stop();
	});
});
</script>

اگر با سی اس اس آشنایی داشته باشید حتما تگ hover رو میشناسید و با اون آشنا هستید

این تگ در جی کئوری هم اعتبار داره و استفاده میشه

همچنین میشه بجای تگ 'click' از 'dblclick' استفاده کرد که استایل با دوبار کلیک اجرا میشه

که همه این تگها رو اگر یه نرم افزار خوب برای کد نویسی داشته باشید میتونید ببینید و آشنا بشید

پایان جلسه دوم

امضاي کاربر :

نسخه گرافیک آپدیت شد

تشکر شده:

3 کاربر از manotoweb به خاطر اين مطلب مفيد تشکر کرده اند: mattin / admin-mehrdad / whatyouknow /