ابزارک جاوای پایین « انجمن وردپرس فارسی

sadegh_h

آفلاین
عضو
تعداد نوشته‌ها: ۱۵
تشکر شده: ۳ بار
# نوشته شده: ۱۲ سال پیش
۱۲ شهریور ۱۳۹۰ - ۲۳:۱۸

سلام
http://www.bankmellat.ir/portal.aspx
پایین این سایت رو ببینید. پلاگینی هست که همچین چیزی رو درست کنه؟
ممنون

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
daryadel1364
daryadel1364

آفلاین
عضو
تعداد نوشته‌ها: ۴۱
تشکر شده: ۱ بار
# نوشته شده: ۱۲ سال پیش
۱۴ شهریور ۱۳۹۰ - ۰۸:۰۹

سلام.
فکر جالبیه از دوستان کسی هست توضیح کاملی در این مورد بده، تا به درد همه بخوره!
omid0098

آفلاین
عضو
تعداد نوشته‌ها: ۱۳۵۳
تشکر شده: ۱۱۹۴ بار
# نوشته شده: ۱۲ سال پیش
۱۴ شهریور ۱۳۹۰ - ۱۸:۴۱

سلام
مگه پایینش چی هست؟
Mostafa

آفلاین
ناظم
تعداد نوشته‌ها: ۵۲۷۶
تشکر شده: ۵۷۷۷ بار
# نوشته شده: ۱۲ سال پیش
۱۴ شهریور ۱۳۹۰ - ۲۰:۴۴

سلام، اگر منظورتون اون تب‌ها است. با جی‌کوئری می‌شه ایجادشون کرد.
http://www.google.com/search?q=jquery+tabs&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
daryadel1364
daryadel1364

آفلاین
عضو
تعداد نوشته‌ها: ۴۱
تشکر شده: ۱ بار
# نوشته شده: ۱۲ سال پیش
۱۶ شهریور ۱۳۹۰ - ۱۶:۱۶

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

آفلاین
ناظم
تعداد نوشته‌ها: ۵۲۷۶
تشکر شده: ۵۷۷۷ بار
# نوشته شده: ۱۲ سال پیش
۲۱ شهریور ۱۳۹۰ - ۱۵:۰۵
سلام، نیازی به آموزش فارسی نداره.
یه کد ساده جی‌کوئری واستون مینویسیم. این هم کارتون رو حل می‌کنه.
jquery
```
<script type="text/javascript" src="jquery-1.6.2.js" /></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("div#tabs_1").click(function(){
			$("div#first").hide();
			$("div#secound").fadeIn(1000);
		});

		$("div#tabs_2").click(function(){
			$("div#secound").hide();
			$("div#first").fadeIn(1000);
		});
	});
</script>
```
css
```
#secound{
		display: none;
	}
```
html
```
<div class="tabs">
	<div id="tabs_1">Tabs 1</div>
	<div id="tabs_2">Tabs 2</div>

	<div id="first">
	First Content
	</div>

	<div id="secound">
	Secount Content
	</div>
</div>
```
به صورت ساده نوشتم تا هم متوجه بشین و هم بتونید مقادیر css رو به دلخواه تغییر بدین.
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
R - daryadel1364
daryadel1364

آفلاین
عضو
تعداد نوشته‌ها: ۴۱
تشکر شده: ۱ بار
# نوشته شده: ۱۲ سال پیش
۲۲ شهریور ۱۳۹۰ - ۲۳:۱۸

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

آفلاین
ناظم
تعداد نوشته‌ها: ۵۲۷۶
تشکر شده: ۵۷۷۷ بار
# نوشته شده: ۱۲ سال پیش
۲۶ شهریور ۱۳۹۰ - ۲۳:۳۱

اگر html و css بلد باشید، واستون خیلی ساده میشه.
همون کدهارو مستقیم توی پوسته ببرید.
اون کد jquery رو در داخل تگ <head> در فایل header.php و css را در فایل Style.css اضافه و html را در فایل index.php قرار بدین. مشکلی هم داشتید همینجا مطرح کنید.

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
daryadel1364
daryadel1364

آفلاین
عضو
تعداد نوشته‌ها: ۴۱
تشکر شده: ۱ بار
# نوشته شده: ۱۲ سال پیش
۲۷ شهریور ۱۳۹۰ - ۱۹:۵۸

جسارتا کارایی که فرمودین رو انجام داده بودم و دوباره هم انجام دادم تا مطمئن شم ولی هیچ تاثیری نداشت و هیچی به سایتم اضافه نشد!!!
daryadel1364

آفلاین
عضو
تعداد نوشته‌ها: ۴۱
تشکر شده: ۱ بار
# نوشته شده: ۱۲ سال پیش
۳۰ شهریور ۱۳۹۰ - ۱۲:۰۴

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

آفلاین
عضو
تعداد نوشته‌ها: ۲۶۲
تشکر شده: ۲۱۷ بار
# نوشته شده: ۱۲ سال پیش
۴ مهر ۱۳۹۰ - ۱۷:۴۵
با تشکر از آقا مصطفی برای پاسخ گوئیشان
متاسفانه داش مصطفی ما یادش رفته که بگه فایل jquery-1.6.2.js که همون منبع و عامل جی کوئری تولید شده است باید توی پوشه قالب قرار بگیره
ابتدا این فایل را دانلود کرده در پوشه قالبتان بگذارید

دانلود کد
البته کد در فرمت جاواست که شاید در مرورگرتان بصورت متن نمایش داده شود
صفحه نشان داده شده کد را ذخیره کنید تا کد جی کوئری ذخیره شود
سپس کد زیر را در فایل header.php دقیق یک خط بالای </head> بگذارید
```
<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/jquery-1.6.2.js" /></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("div#tabs_1").click(function(){
			$("div#first").hide();
			$("div#secound").fadeIn(1000);
		});

		$("div#tabs_2").click(function(){
			$("div#secound").hide();
			$("div#first").fadeIn(1000);
		});
	});
</script>
```
سپس فایل استایل که همان style.css است را باز کرده و کدهای زیر را در آخرین خط آن بگذارید
```
#secound{
		display: none;
	}
```
سپس در جای مناسب مثلاً footer.php کد زیر را بگذارید و به دلخواه ویرایش گنید
```
<div class="tabs">
	<div id="tabs_1">Tabs 1</div>
	<div id="tabs_2">Tabs 2</div>

	<div id="first">
	First Content
	</div>

	<div id="secound">
	Secount Content
	</div>
</div>
```
پرونده ها را ذخیره کنید

/موفق باشید
rezaonline.net
کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
daryadel1364 - Mostafa
daryadel1364

آفلاین
عضو
تعداد نوشته‌ها: ۴۱
تشکر شده: ۱ بار
# نوشته شده: ۱۲ سال پیش
۷ مهر ۱۳۹۰ - ۱۸:۴۵

با تشگر از همه اساتید محترم و معظم فقط اگه میشه یه کم هم در مورد استایتل دادن به تب ها توضیح بدین تا تاپیک کامل کامل بشه(میدون اینجا ورد پرسه نه css ولی فکر کنم اگه اینجا مطرح بشه به درد همه بخوره)
ممنون

با تشکر از رضا جان بابت اطلاع.
این هم یک استایل:

div.tabs{
  background: #EEEEEE;
  width: 300;
  padding: 5px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 11px;
  border-radius: 5px;
  float: left
}

#tabs_1, #tabs_2{
  background: #66CCFF;
  padding: 5px;
  width: 45%;
  float: left
}

#tabs_1:hover, #tabs_2:hover{
  background: #6600FF;
  cursor: pointer
}

#secound{
  display: none;
}

کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
daryadel1364

وردپرس فارسی

انجمن

ابزارک جاوای پایین (۱۳ نوشته)

درباره‌ی این موضوع

برچسب‌ها