انجمن


تب منو سی اس اس و جی کوئری ساده برای سایت ها و وبلاگ ها  (۱۶ نوشته)

  • امین باقیات

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

    سلام
    خدمت دوستان چند وقتی بود خیلی ها میخواستن یک تعداد تب در صفحه اصلی داشته باشن مثل سایت فارس کیدذ ...
    امروز یک مطلب دیدم گفتم شاید بکارشون بیاد ...
    کد های زیر را قبل از تگ </head> قرار دهید .

    <link rel="stylesheet" type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/tabs.css" />
    <script type="text/javascript" src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/amjqueryir.js"></script>
    <link type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/astylem.css" rel="stylesheet" />

    و کد های زیر را درون جایی که میخواهید به نمایش در بیاد بگزارید ... مثلا : Index.php

    <div id="container">
    
    <ul class="tabs">
    <li class="active" rel="tab1">تب اول</li>
    <li rel="tab2"> تب دوم </li>
    <li rel="tab3"> تب سوم</li>
    <li rel="tab4"> تب چهارم</li>
    </ul>
    
    <div class="tab_container"> 
    
    <div id="tab1" class="tab_content">
             <p><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/am.jpg"> <br />
             <strong>
             متن نمونه یک
             </strong></p></div><!-- /tab1 -->
    
    <div id="tab2" class="tab_content">
           <p><a href="http://noisegraphic.com/" target="_blank"><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/ir.jpg"></a> <br />
          	<strong>
          	متن نمونه دو
          	</strong></p></div><!-- /tab2 -->
    
    <div id="tab3" class="tab_content">
           <p><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/mans.jpg"> <br />
          	<strong>
          	متن نمونه سه
          	</strong></p></div><!-- /tab3 -->
    
    <div id="tab4" class="tab_content">
           <p><img src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/images/ouri.jpg"> <br />
          	<strong> آماده سازی توسط امیر منصوری -
    		Amir.Mansouri_Designer@Yahoo.Com </strong></p></div><!-- /tab4 --> 
    
    </div>
    </div>

    حالا شما میتونید مطالبی که دوستارید را جای عکس ها قرار دهید ... مثلا : آخرین اخبار سایت یا آخرین اخبار موسیقی
    -----------------------------------------------------------------------------
    دمو آنلاین :
    http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/
    -----------------------------------------------------------------------------
    منبع : امیر منصوری - نویز گرافیک
    http://noisegraphic.com

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    nasour - Morteza - Araz - NESTED - Parsa - sheisebaboo - omidha
  • Soroushsmp

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

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

  • امین باقیات

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

    به کدوم فایل ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

    <link rel="stylesheet" type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/tabs.css" />
    <script type="text/javascript" src="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/amjqueryir.js"></script>
    <link type="text/css" href="http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/astylem.css" rel="stylesheet" />
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    mohmon
  • Soroushsmp

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

    فایل های سی اس اس و جاوایی که آپلود شده تو این آدرس:
    http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/tabs.css
    http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/amjqueryir.js
    http://dl.noisegraphic.com/file/demo/view-css-js-tabs-byamirmansouri/astylem.css
    --------------------------------------------
    tab.css , amjqueryir.js , astylem
    ممکنه این فایل ها رو برای دانلود بزاری؟ چون با این استایل ها من نمی تونم ازش تو سایتم استفاده کنم.

  • mohmon

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

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

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    NESTED - امین باقیات
  • Soroushsmp

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

    :D
    دوست عزیز شما اگه قبل نظر ، یه نگاه کوچیک به اون لینکها مینداختی میدیدی که باز نمیشه.
    اگه نویسنده ی این مطلب این لطف به من بکنه ممنون می شم.

  • امین باقیات

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

    سلام
    جناب شما هم اگه دقت کنی میبینی که یدونش فقط باز نمیشه اونم تا فردا قرار میدم ؟؟
    محتویات پرونده astylem.css را در یه پرونده با پسوند سی اس اس ذخیره کنید ...
    محتویات پرونده astylem.css

    ul.tabs {
    		margin: 0;
    		padding: 0;
    		float: right;
    		list-style: none;
    		height: 32px;
    		border-bottom: 1px solid #999999;
    		border-right: 1px solid #999999;
    		width: 100%;
    		font:12px tahoma;
    	}
    	ul.tabs li {
    		float: right;
    		margin: 0;
    		cursor: pointer;
    		padding: 0px 21px ;
    		height: 31px;
    		line-height: 31px;
    		border: 1px solid #999999;
    		border-right: none;
    		font-weight: bold;
    		background: #EEEEEE;
    		overflow: hidden;
    		position: relative;
    	}
    	ul.tabs li:hover {
    		background: #CCCCCC;
    	}
    	ul.tabs li.active{
    		background: #FFFFFF;
    		border-bottom: 1px solid #FFFFFF;
    	}
    	.tab_container {
    		border: 1px solid #999999;
    		border-top: none;
    		clear: both;
    		float: right;
    		width: 100%;
    		background: #FFFFFF;
    	}
    	.tab_content {
    		padding: 10px;
    		font:11px tahoma;
    		text-align:right;
    		display: none;
    	}

    محتویات پرونده amjqueryir.js را در یه پرونده با پسوند js ذخیره کنید ...
    محتویات پرونده amjqueryir.js
    http://pastebin.com/GYP3FFHC

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    NESTED - Morteza
  • arshiya123

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

    سلام
    ببخشید من از موقعی که این تب رو استفاده کردم اسلایدشو از کار افتاده و این هم میدونم که مشکل از js این تب هست حالا باید چیکار کنم؟!
    باتشکر از پاسخگویی شما

  • امین باقیات

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

    arshiya123 گفت:
    سلام
    ببخشید من از موقعی که این تب رو استفاده کردم اسلایدشو از کار افتاده و این هم میدونم که مشکل از js این تب هست حالا باید چیکار کنم؟!
    باتشکر از پاسخگویی شما

    دوست عزیز توی سایت زیر برین و درخواست بدین تا براتون درست کنه ...
    http://noisegraphic.com/%D8%AA%D8%A8-%D9%85%D9%86%D9%88-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%D9%88-%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87/

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

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

    یعنی بجز اونها

    beatkids گفت:

    دوست عزیز توی سایت زیر برین و درخواست بدین تا براتون درست کنه ...
    http://noisegraphic.com/%D8%AA%D8%A8-%D9%85%D9%86%D9%88-%D8%B3%DB%8C-%D8%A7%D8%B3-%D8%A7%D8%B3-%D9%88-%D8%AC%DB%8C-%DA%A9%D9%88%D8%A6%D8%B1%DB%8C-%D8%B3%D8%A7%D8%AF%D9%87/

    یعنی به جز اونها کسی نمیتونه به من کمک کنه ؟!

  • Parsa

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

    با توجه به اینکه از jquery استفاده میکنه. میتوانید به غیر از کد زیر باقی را از فایل js حذف کنید و تست!

    $(document).ready(function() {
    
    	$(".tab_content").hide();
    	$(".tab_content:first").show(); 
    
    	$("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active");
    		$(this).addClass("active");
    		$(".tab_content").hide();
    		var activeTab = $(this).attr("rel");
    		$("#"+activeTab).fadeIn();
    	});
    });
    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    arshiya123 - Morteza
  • امین باقیات

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

    چون منبعش اونجاست من گفتم ...

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

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

    parselearn گفت:
    با توجه به اینکه از jquery استفاده میکنه. میتوانید به غیر از کد زیر باقی را از فایل js حذف کنید و تست!

    $(document).ready(function() {
    
    	$(".tab_content").hide();
    	$(".tab_content:first").show(); 
    
    	$("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active");
    		$(this).addClass("active");
    		$(".tab_content").hide();
    		var activeTab = $(this).attr("rel");
    		$("#"+activeTab).fadeIn();
    	});
    });

    امتحان میکنم ممنون

  • arshiya123

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

    parselearn گفت:
    با توجه به اینکه از jquery استفاده میکنه. میتوانید به غیر از کد زیر باقی را از فایل js حذف کنید و تست!

    $(document).ready(function() {
    
    	$(".tab_content").hide();
    	$(".tab_content:first").show(); 
    
    	$("ul.tabs li").click(function() {
    		$("ul.tabs li").removeClass("active");
    		$(this).addClass("active");
    		$(".tab_content").hide();
    		var activeTab = $(this).attr("rel");
    		$("#"+activeTab).fadeIn();
    	});
    });

    جاوا اسکریپت از کار افتاد و حتما هر چیزی هست زیر سر همون خط اول هست

  • arshiya123

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

    کسی نیست به ما کمک کنه :)

  • امین باقیات

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

    صد بار گفتم بازم میگم ...
    توی منبعش پیگیری کنید ...

    اومدین ثواب کنیم ، کباب شدیم ...

    کاربران زیر به‌خاطر این نوشته تشکر کرده‌اند:
    NESTED - Ali Sajjad

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