ijquery

تب بریده

screenshot

با استفاده از این جی کوئری می توانید یک تب با افکت جذاب در پروژه خود ایجاد کنید

آموزش استفاده

  1. فر اخوانی css و js
    	<!-- stylesheets -->
    	<link rel="stylesheet" type="text/css" href="css/style.css" />		
    	<!-- javascript -->
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    	<script type="text/javascript" src="js/jquery.tools.min.js"></script>
    	<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
    	<!--[if lt IE9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

     

  2. بعد از تگ <body>
    	
    	<script type="text/javascript">
    
    		$(function() {
    
    			var indicator = $('#indicator'),
    					indicatorHalfWidth = indicator.width()/2,
    					lis = $('#tabs').children('li');
    
    			$("#tabs").tabs("#content section", {
    				effect: 'fade',
    				fadeOutSpeed: 0,
    				fadeInSpeed: 400,
    				onBeforeClick: function(event, index) {
    					var li = lis.eq(index),
    					    newPos = li.position().left + (li.width()/2) - indicatorHalfWidth;
    					indicator.stop(true).animate({ left: newPos }, 600, 'easeInOutExpo');
    				}
    			});	
    
    		});
    
    	</script>
    
    	<nav>		
    		<ul id="tabs">
    			<li><a class="current" href="#">تب اول</a></li>
    			<li><a href="#">تب دوم</a></li>
    			<li><a href="#">تب سوم</a></li>
    			<li><a href="#">تب چهارم</a></li>
    			<li><a href="#">تب پنجم</a></li>
    		</ul>
    		<span id="indicator"></span>
    	</nav>
    
    	<div id="content">
    
    		<section>				
    			<p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است . وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت میکند . فعالیت سایت به دو دسته تقسیم میشود :</p>		
    			<p>معرفی و دانلود جدید ترین example (مثال و سورس های آماده) جی کوئری همراه با دمو و آموزش و سورس . مستندات آموزشی برای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته ایم که این خود باعث سهولت برای طراحان وب شده است . ۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p>
    		</section>
    
    		<section>		
    			<p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است . وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت میکند . فعالیت سایت به دو دسته تقسیم میشود :</p>		
    			<p>معرفی و دانلود جدید ترین example (مثال و سورس های آماده) جی کوئری همراه با دمو و آموزش و سورس . مستندات آموزشی برای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته ایم که این خود باعث سهولت برای طراحان وب شده است . ۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p>
    		</section>
    
    		<section>
    			<p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است . وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت میکند . فعالیت سایت به دو دسته تقسیم میشود :</p>		
    			<p>معرفی و دانلود جدید ترین example (مثال و سورس های آماده) جی کوئری همراه با دمو و آموزش و سورس . مستندات آموزشی برای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته ایم که این خود باعث سهولت برای طراحان وب شده است . ۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p>
    		</section>
    
    		<section>
    			<p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است . وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت میکند . فعالیت سایت به دو دسته تقسیم میشود :</p>		
    			<p>معرفی و دانلود جدید ترین example (مثال و سورس های آماده) جی کوئری همراه با دمو و آموزش و سورس . مستندات آموزشی برای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته ایم که این خود باعث سهولت برای طراحان وب شده است . ۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p>
    		</section>
    
    		<section>
    			<p>دنیای جی کوئری در بهمن ماه ۱۳۹۱ فعالیت خود را با هدف ایجاد منبعی برای دانلود سورس های آماده جی کوئری برای طراحان وب آغاز کرده است . وب سایت دنیای جی کوئری به عنوان اولین وب سایت در ایران به صورت تخصصی بر روی جی کوئری فعالیت میکند . فعالیت سایت به دو دسته تقسیم میشود :</p>		
    			<p>معرفی و دانلود جدید ترین example (مثال و سورس های آماده) جی کوئری همراه با دمو و آموزش و سورس . مستندات آموزشی برای تک تک مثال هایی که در وب سایت ارسال میشود بخش دمو و دانلود سورس و آموزش استفاده در نظر گرفته ایم که این خود باعث سهولت برای طراحان وب شده است . ۹۹٪ مثال هایی که در سایت ارسال میشود معمولاْ به صورت دو زبان فارسی و انگلیسی قرار داده شده است که برای طراحانی که قالب های راست چین یا چپ چین طراحی میکنند قابل استفاده باشد .</p>
    		</section>			
    
    	</div>

     


پیش نمایش دانلود فایل پلاگین

20 دیدگاه دربارهٔ «تب بریده»

  1. معمولا این کار نمیکنم و تو دلم تشکر میکنم
    ولی واقعا دلم نیومد
    سایتهای تخصصی در هر زمینه ای که باشه جای تقدیر داره
    امیدوارم افکت ها رو بیشتر کنید
    مخصوصا تب رو که من خیلی بهش نیاز دارم 😀

  2. بسیار عالی و کابردی است
    مثل اکثر وب سایت های تخصصی در زمینه کامپوتر خارجی و کمی ایرانی

  3. سلام وقتتون بیخیر ممنون از اطلاعات مفیدتون
    من یه تازه کارم و حدود دو سه هفته ای هست که به طراحی وب علاقه مند شدم.
    یه سوالی ازتون داشتم اونم اینکه چطور میتونم اطلاعات متنی رو که از دیتابیس میخونم رو عینا تو صفحه نشون بدم یعنی اینکه هرجا اینتر خورده سطر بشکنه و توو یه سطر جدید نمایش داده شه یا توو 30% یه جایی نشون داده شه.

    ممنون میشم اگه جواب بدین و معذرت می خوام که اینجا این سوال رو مطرح کردم.

    1. سلام
      منظورتون اینه که یک سری value دارید تو دیتابیس میخواید چاپشون کنید با دستور php ؟
      اینو وقتی از یک ویرایشگر استفاده میکنید اون textaria ادیتور رو مقدارش رو چاپ کنید به صورت تگ p خودش چاپ میکنه زیر هم زیر هم

  4. میبخشید نمیخوام ا س پ م بدم ولی متاسفانه مشکل پیدا کردم
    من میخوام این کد رو داخل پستم نشون مبدم باید چه کار کنم؟

  5. خیلی سایت خوب و کاملی دارید .
    تشکر بابت زحمتی که می کشید. جای همچین سایتی به صورت فارسی واقعا خالی بود.
    یه سوال هم دارم اونم اینکه تو ie کار نمی کنه باید چیکار کنیم.

  6. با تشکر وخسته نباشید از سایت خوبتون،آقا یه سوال داشتم،چجوری میشه از این تب در دو جای یک سایت استفاده کرد؟؟

  7. عاااااااااااااالی بود
    اگر بخوایم با باز شدن هر تب اظلاعات از دیتابیس خونده بشن باید چیکار کرد؟؟؟
    چه جوری باید کد زد؟

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *