تایمر برای قابلیت برگه بندی جی کوئری - automatic cycler for jquery.tabs

 

افزودن امکان چرخش تب‌ها به صورت اتوماتیک به jquery.tabs

فارسی	english
یکی از قابلیت‌های پر کاربرد jQuery که در شاخه ui قرار می‌گیرد (jQueryUI) قابلیت برگه بندی آن است. اما تنها مشکلی ک به چشم می‌خورد عدم امکان چرخش خودکار بین برگه‌هاست. خوشبختانه با استفاده از قابلیت‌های خود جی کوئری این مشکل قابل حل است. در ادامه روش حل این مشکل را خواهید دید.	One of the most useful capapabilities of jQuery is its power to make tabs and tabbed content out of a list with a simple code. this tool is under UI category of jQuery (jQueryUI). but the only problem seen in the tool is that it doesn't provide automatic cycling between tabs. Fortunately we can solve this problem using the jQuery tools itself.
به ادامه مطلب مراجعه کنید	continue to this link

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

Before we start. we should make somrthing clear. What if the content inside a tabs longer than that user can read it before the next cycle? we should add a mouse event to the code to stop the cycler when mouse is hovered over the content

 

//stop if mouse is hovered on
var ishovered=false;

$( "#tabs" ).hover(
	function() {
		ishovered = true;
	}, function() {
		ishovered = false;
	}
);

حالا نوبت چرخش خودکار است.

now its cycler time.

 

//auto-rotate every 5 seconds
setInterval(function() {
	if(!ishovered)
	{
		//get currently-on tab
		var active = $( "#tabs" ).tabs( "option", "active" );

		//click either next tab, if exists, else first one
		var nextTab = active < $('#tabs >ul >li').size()-1 ? active+1 : 0;
		$( "#tabs" ).tabs( "option", "active", nextTab );
	}
},
//timer in ms:
 1000);

 

حالا کافیه همه‌ی این کد ها رو به خورد jQuery بدیم تا یکبار برای همیشه (منظورم موقع بارگذاری صفحه است) اون رو اجرا کنه.

Before we start. we should make somrthing clear. What if the content inside a tabs longer than that user can read it before the next cycle? we should add a mouse event to the code to stop the cycler when mouse is hovered over the content

 

<script>
	$(function() {
		 $( "#tabs" ).tabs({
			event: "mouseover"
		});
	});
	$(function() {
		//stop if mouse is hovered on
		var ishovered=false;
		
		$( "#tabs" ).hover(
			function() {
				ishovered = true;
			}, function() {
				ishovered = false;
			}
		);
		
		//auto-rotate every 5 seconds
		setInterval(function() {
			if(!ishovered)
			{
				//get currently-on tab
				var active = $( "#tabs" ).tabs( "option", "active" );

				//click either next tab, if exists, else first one
				var nextTab = active < $('#tabs >ul >li').size()-1 ? active+1 : 0;
				var active = $( "#tabs" ).tabs( "option", "active", nextTab );
			}
		}, 1000);
	});
</script>