دانلود رایگان اسکریپت | دانلود قالب های فروشی | نالدز

با یکی دیگه از آموزش های کتابخانه ی Jquery در خدمتتون هستیم ، تو این آموزش قراره یاد بگیرید چطوری یک ToolTip کاملا اختصاصی برای سایت خودمون بسازیم چون خیلی اوقات این دردسر ها وجود داره که کلی بگردیم تا یه ToolTip با اون افکتی که خودمون دوست داریم پیدا کنیم.

این اموزش برای کسایی که حتی آشنایی با Jquery ندارد هم مناسب هست

خوب اولین چیزی که نیاز داریم یک المنت (Div) هست که به دنبال نشانه گر موس بره

یعنی نشانه گر هر جای صفحه که باشه اون المنت هم در کنارش باشه ، واسه اینکه المنتون بتونه راحت توی صفحه حرکت کنه باید خاصیت Absolute داشته باشه

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

.tooltip {</pre>
<pre id="line1">position:absolute;
z-index:5;
width:auto;
height:25px;
overflow:hidden;
display:none;
background-color:#000000;
padding:3px;
-moz-border-radius:3px;border-radius:3px;
box-shadow:0px 0px 3px #000000;
color:#FFFFFF;font-family:tahoma;font-size:10pt
}

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

$('document').ready(function(){
$(document).mousemove(function(e){
$('.texts').css("left",e.pageX+25);
$('.texts').css("top",e.pageY);
});
});

خوب تا الان المنت به دنبال اشاره گر میاد ولی نمایش داده نمیشه چون ما تو کد های CSS از Display:none استفاده کردیم تا المنت رو هرجا نیاز داشتیم نمایش بدیم

واسه این کار از رویداد Hover استفاده میکنیم بصورت زیر

$('.post img').hover(function(){
txt = $(this).attr("title");
$('.tooltip').text(txt);
$('.tooltip').fadeIn();
},function(){
$('.tooltip').fadeOut();
});

تو کد بالا اگه نشانه گر موس روی img از المنتی با کلاس post بیاد خاصیت title عکس رو میگیره (خط دوم) و میزاره توی المنت tooltip و بعدش اون رو نمایش میده (خط سوم و چهارم)

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

کد کامل به شکل زیر در میاد

$('document').ready(function(){
$(document).mousemove(function(e){
$('.tooltip').css("left",e.pageX+25);
$('.tooltip').css("top",e.pageY);
});
$('.post img').hover(function(){
txt = $(this).attr("title");
$('.tooltip').text(txt);
$('.tooltip').fadeIn();
},function(){
$('.tooltip').fadeOut();
});
});

این یکی از راه های ساده ی ساخت toolTip هست

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

اگه سوالی پیش اومد مطرح کنید

منبع : نالدز دات کام

دمو

کدهایی مثل آخرین مطالب یا آخرین نظرات یا برترین مطالب و… جزو کدهایی هستند که نیازی به افزونه نیست و میتونید براحتی با چند کد ساده کار خودتون رو بصورت سریع تر انجام بدید

اولین و ساده ترین کدی که براتون معرفی میکنم آخرین مطالب هست

<?php query_posts('showposts=10'); ?>

	<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>

	<?php endwhile; ?>

	<?php endif; ?>

	<?php wp_reset_query(); ?>

حالا اگه میخواید آخرین مطالب از یک موضوع خواص رو نمایش بدید باید از کد زیر استفاده کنید

<?php query_posts('showposts=10&category_name=test'); ?>

	<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>

	<?php endwhile; ?>

	<?php endif; ?>

	<?php wp_reset_query(); ?>

مثال های بیشتر

مثال های بیشتر (فارسی)
نمایش آخرین نظرات

<?php $sql = "SELECT a.*, b.post_title from $wpdb->comments a JOIN $wpdb->posts b ON a.comment_post_id = b.id WHERE comment_approved= '1' AND a.comment_type != 'pingback'  ORDER BY comment_date DESC LIMIT 5";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result))
  {
echo '<a title="'.$row['comment_author'].'" href="'.get_permalink($row['comment_post_ID']).'">'.$row['comment_author'].' در '.get_the_title($row['comment_post_ID']).'</a>
';
  }
?>

نمایش برترین مطالب (بر اساس نظرات)

<?php query_posts('showposts=10&orderby=comment_count'); ?>

	<?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?>

<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?> : <?php comments_number('0', '1', '%'); ?> دیدگاه بیان شده </a>

	<?php endwhile; ?>

	<?php endif; ?>

	<?php wp_reset_query(); ?>

خوب کد خواص دیگه ای یادم نیست

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

منبع : نالدز دات کام

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

توضیح خلاصه : جی کوری نرم‌افزار بازمتن و رایگان است که تحت دو پروانه GPL و MIT منتشر می‌شود . دستور زبان جی کوری به گونه ای طراحی شده است که عمل هدایت یه پرونده را اسان تر کرده باشد، بدین صورت که می توان حرکات انیمیشین ایجاد کرد و رویدادهای صفحه استفاده کند و به وسیله ان می توان نرم‌افزارهای مبتنی بر Ajax را ایجاد و توسعه داد. (برگرفته از ویکی پدیا)

خوب بریم سراغ آموزش

به شکل کلی شیوه ی اجرای کد های Jquery به شکل زیر است

<script type='text/javascript' src='jquery.js'></script>
<script>
...
</script>

اولین تابع ، تابع hide هست

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

$('#text').hide();

این ساده ترین روش استفاده از این تابع هست
که در مثال بالا یک المنت رو با آیدی test رو محو میکنه
حالا تابعی که واسه نمایش دوباره یک المنت از اون استفاده میشه ، تابع show هست
که بصورت زیر از اون استفاده میشه

$('#text').show();

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

$('#text').fadeIn();
$('#text').fadeOut();

این دو تابع مثل توابع قبل عمل میکنند با این تفاوت که المنت رو با یک افکت محو میکنند
دو تابع بعدی توابع slideUp و slideDown هستند
این دو تابع المنت رو به سمت بالا و پایین میدن و محو میکنند

$('#text').slideUp();
$('#text').slideDown();

و البته تابع پیشرفته تر از دو تابع بالایی که همون کار رو انجام میده تابع toggle هست
این تابع هردو کار بالا رو بصورت اتوماتیک انجام میده

$('#text').slideToggle();

یکی دیگه از توابع تابع fadeTo هست
که المنت رو به یک درجه ی دلخواه از محو شدن میبره ( یا به اصطلاح Opacity )

$('#text').fadeTo('slow',0.5);

0.5 درجه ای است که میخوایم بهش بدیم
یک سری اصطلاحات هست که تو همه ی این توابع وجود داره که در ادامه توضیح میدم
مدیریت تابع :
توابع بالا همگی رو میشه از نظر سرعت عمل کنترل کرد

$('#text').fadeTo("slow",0.5);
$('#text').fadeIn("fast");
$('#text').slideUp();

توابع بازگشتی :
توابع بازگشتی ، توابعی هستن که وقتی تابع مورد نظر بصورت کامل انجام شد فرا خوانی میشن

$('#text').fadeTo("slow",0.5,function(){alert('Nulleds.COm')});

برای دریافت فایل Jquery.js به سایت Jquery.comمراجعه کنید

دمو از توابع

منبع : نالدز دات کام

پایان جلسه!
امیدوارم که به کارتون بیاد چیزایی که اینجا گفته شد
منتظر آموزش های بعدی باشید

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

تو آموزش امروز دیگه خبری از آجاکس و لود یک فایل دیگه نیست ، کل قالب توی یک صفحه خلاصه میشه و ما با افکت صفحه رو عوض میکنیم

خوب اول یه توضیح خلاصه راجع به طرز کار این جور قالب ها میدم که امیدوارم گیج نشید

توی اینجور قالب ها یک المنت برای حرکت کردن وجود داره یعنی بعنوان مثال یک Div رو بهش خاصیت Absolute میدیم که بتونه راحت حرکت کنه

حالا واسه اینکه توی یک موقعیت خاص قرار بگیره باید توی یک Div با خاصیت Relative قرار بگیره و هر دو این المنت باید خاصیت Overflow:hidden داشته باشند تا سر ریزی نداشته باشه

خوب بازم طراحی رو میزارم به عهده ی خودتون

مثل آموزش قبل چند لینک داریم و باید اونارو مدیریت کنیم

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

$('document').ready(function(){

$('.item').click(function(){

});

});

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

ولی توابعی که واسه رویداد کلیک استفاده میکنیم یکم فرق داره

link = $(this).attr("href");
prx = link * 555;
$('#loader').animate({"right":"-"+prx+"px"});
return false;

کدهای بالا کدهای رویداد کلیک هستیند

با خط اول که آشنایی دارید ، خاصیت Href لینکی که روش کلیک کردیم رو میگیره

خط دوم یک ضرب انجام میدیم تا بدونیم المنت بعدی که میخوایم بریم کجا قرار داره ، ۵۵۵ عرض المنت های ما هست

به عنوان مثال اگه روی لینکی کلیک کرده باشیم که Href اون ۱ بوده باشه ۱ ضرب در ۵۵۵ میشه

خط سوم هم المنت اصلی مارو به سمت راست هدایت میکنه ، به اون اندازه ای که در سطر قبل بدست اوردیم (تابع Animate یک تابع جدید هست که باهاش خیلی کارها میشه کرد ولی کار کلیش اینه که کارهای ساده رو بصورت انیمیشن انجام میده ، دمو رو ببینید میفهمید)

با خط چهار هم که آشنایی دارید ، false رو برمیگردونه تا لینک عمل نکنه و به صفحه ای دیگه نریم

خوب تا اینجای کار اگه کد رو اجرا کنید اصلا جالب در نمیاد چون المنت اصلی ما عرضش کم هست و همه ی المنت هارو انداخته زیر هم و فقط اولین المنت رو نمایش میده

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

این کدها باید با اجرای صفحه اجرا بشن پس باید توی رویداد Ready قرار بدیم

cnt = $('#loader .blk').length;
sz = cnt*583;
$('#loader').css("width",sz+"px");

کد اول میشموره ببینه چند تا المنت توی المنت اصلی مون وجود داره (در اصل چندتا محتوی داریم)

خط دوم دوباره یک ضرب هست که تعداد المنت هارو در سایزشون ضرب میکنه (به این دلیل اینجا گذاشتیم ۵۸۳ چون Padding و بقیه چیزا هم روش تاثیر داره )

در خط سوم هم اون رو به المنت اصلیمون انتصاب میدیم

اینم از مشکل آخر که حل شد

کد در آخر به شکل زیر در میاد

$('document').ready(function(){
cnt = $('#loader .blk').length;
sz = cnt*583;
$('#loader').css("width",sz+"px");
$('.item').click(function(){
link = $(this).attr("href");
prx = link * 555;
$('#loader').animate({"right":"-"+prx+"px"});
return false;
});
});

امیدوارم که تونسته باشم خوب توضیح بدم

اگه سوالی واستون پیش اومد مطرح کنید

منبع : نالدز دات کام

دمو

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

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

چیز هایی که برای این آموزش لازم هست فقط یک قالب ساده ی html هست

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

$('#test').load('text.txt');

این تابع یکی از ساده ترین توابع Ajax در کتابخانه ی Jquery هست

در مثال بالا فایل text.txt در المنتی با آیدی test نمایش داده خواهد شد

خوب بریم سراغ آموزش

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

خوب اولین مرحله اینه که مشخص کنیم تو کدوم المنت قراره فایل هارو نمایش بدیم

برای مثال :

<div id="loader">

&nbsp;

</div>

من این المنت رو انتخاب کردم

دومین مرحله مشخص کردن لینکهای اجرا کننده هست ( مثلا وقتی شما میخواید یه تابع رو اجرا کنید باید روی یک جایی کلیک کنید اینجا هم همینه)

<a href="test.txt" class="item">تست</a>

خوب حالا میریم سراغ کد نویسی

ما میخوایم یک تابع بنویسیم که اگه کاربر روی لینک با صفت item کلیک کرد صفحه ای که بهش لینک دادیم رو لود کنه

$('document').ready(function(){
$('.item').click(function(){
link = $(this).attr("href");
$('#loader').load(link);
return false;
});

});

در اینجا از تابع click استفاده میکنیم و میگیم اگه کاربر روی هر لینکی با صفت item  کلیک کرد تابع رو اجرا کن

خط بعدی href لینکی که روش کلیک شده رو میگیره

و خط  چهارم اون لینک رو لود میکنه

و خط  پنجم false رو بر میگردونه تا کاربر به صفحه ی دیگه ای انتفال پیدا نکنه

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

ولی خوب از نظر ظاهری خیلی جالب نیست

حالا میخوایم بهش یه لودینگ هم اضافه کنید

<pre>$('document').ready(function(){
$('#loader').ajaxSend(function() {
$('.loading').fadeIn('slow');
});
$('#loader').ajaxComplete(function(){
$(".loading").slideUp();
});
});

برای این کار من از دو تابع ajaxSend و ajaxComplete استفاده کردم
ajaxSend وقتی درخواست ارسال بشه اجرا میشه و ajaxComplete وقتی که درخواست پاسخ داده بشه
این دو تابع و تابع click رو توی تابع ready قرار دادم چون در غیر این صورت اجرا نمیشوند
خوب این هم مرحله ی آخر بود
کد در آخر به این صورت شد

$('document').ready(function(){
$('.item').click(function(){
link = $(this).attr("href");
$('#loader').load(link);
return false;
});
$('#loader').ajaxSend(function() {
$('.loading').fadeIn('slow');
});
$('#loader').ajaxComplete(function(){
$(".loading").slideUp();
});
});

امیدوارم که تونسته باشم خوب توضیح بدم
این یک آموزش خیلی ساده بود
در صورت بازخورد خوب واستون آموزش ساخت Vcard حرفه ای هم میزارم
منبع : نالدز دات کام
دمو
در صورت بروز هر گونه مشکل مطرح کنید

خوب طبق قولی که بهتون داده بودم فایل های ارتباط با ما و قسمت notifyرو واسه قالب under construction براتون آماده کردم

سعی کردم خیلی راحت و ساده واستون کد نویسی رو انجام بدم

خوب تو این فایل زیپ ۵ تا فایل وجود داره

mail.php : این فایل برای بخش تماس با ما هست ، برای اینکه بصورت کامل کار کنه باید بازش کنید ( با Notepad) و بجای قسمت test@test.com ایمیل خودتون رو بزارید

notify.php : این فایل همونطور که از اسمش پیداس برای قسمت notify هست ، به این صورت کار میکنه که ایمیل رو میگیره و داخل فایل mail.txt قرار میده

read.php : این فایل برای راحتی کار شما ایجاد شده ، کارش اینه که ایمیل هایی که تو فایل mail.txt ذخیره شده رو واستون نمایش میده

text.htm  : این فایل قالب ارسال ایمیل هست ، یه فایل ساده هست که میتونید ویرایش کنید

این فایل هارو میریزید کنار بقیه فایل های قالب ، و قالبی که استفاده میکنید رو باز میکنید (با Notepad ) و ادرس “http://themes.jacktha.com/under/mail.php” را به “mail.php” تغییر دهید

منبع : نالدز دات کام

حجم : ۱٫۶۶ کیلوبایت

دانلود قالب

دانلود با لینک مستقیم

اگه مشکلی پیش اومد یا سوالی داشتید مطرح کنید

موفق و پیروز باشید

با اولین جلسه از آموزش زبان PHP در خدمتتون هستیم ، همه ی توضیحات توی فیلم آموزشی هست فقط توضیحات مختصری راجع به نیاز های شما میگم

برای اجرای کد ها نیاز به یه Compiler دارید که ما Vertrigo رو پیشنهاد میدیم که میتونید از لینک زیر دانلود کنید

Vertrigo 2.23

دانلود با لینک مستقیم

حجم فایل : ۲۸٫۸ مگابایت

تاریخچه ی PHP

سایت PHP