مشاهده منبع مطلب به زبان اصلی

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

دانلود برنامه نوشته شده

 

مراحل کار بطور خلاصه شده :

1- دانلود کتابخانه jquery

2-ساخت tab ها یا زبانه ها با تگ li

3- ساخت محتوای هر زبانه با تگ div یا همان  لایه

4- استفاده از css برای سبک داد ن به محتوای هر زبانه

5- استفاده از jquery برای سبک دادن به زبانه ها

 

مرحله اول :

دانلود کتابخانه jquery

 

 بعد از دانلود کتابخانه ، پوشه ای برای این تمرین ایجاد نمائید

فایل jquery را در ان قرار دهید

فایل متنی که با پسوند html توسط notepad ایجاد می کنید را هم در همین پوشه ذخیره نمائید

حالا باید در فایل متنی html ابتدا پیوندی به کتابخانه jquery ایجاد نمائیم تا بتوانیم از دستورات ان در برنامه استفاده کنیم

برای این کار دورن تگ head بازو بسته تگ script را باز کرده و نام فایل جی کوئری که دانلود کرده اید هرچه بود همان را جلوی پارامتر src  بنویسید نام کتابخانه ای که برای دانلود گذاشتم jquery.js اسن

مثل دستورات زیر بنویسید  :

<head>

   <script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
 
</head>

توجه کنید تگ script بالا هیچ محتوایی ندارد فقط برای اتصال به کتابخانه جی کوئری استفاده شده است

 

اگر  در فضای اینترنت برنامه می نویسید باید یکی از دو کار پائین را انجام دهید

1- یا همین فایل جی کوئری  که برای شما گذاشتم را در فضایی مثل پرشین گیگ اپلود کنین و ادرسشو در برنامه بنویسید

 

2- یا از کتابخانه جی کوئری گوگل همانطور که در دستورات زیر می بینید استفاده کنین



 <head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script>  
</head>
  
 

مرحله دوم :

ساخت tab ها یا زبانه ها با تگ li

 ما از تگ ul برای ایجاد زبانه ها و از تگ های li برای ایجاد عناوین هر زبانه استفاده می کنیم
 

 ما در تگ style کلاسی به نام tabs تعریف خواهیم کرد تا ویژگیهای سی اس اس را برای زبانه ها مشخص نمائیم

این کلاس در تگ ul به کار خواهد رفت

 

 
 درون تگ body برنامه ، دستورات زیر را بنویسید :

 

 <ul class="tabs">
        <li class="active" rel="tab1"> مهمانپذیر صدر</li>
        <li rel="tab2">مهمانپذیر آرش</li>
        <li rel="tab3"> مهمانپذیر خوشنشین</li>
        <li rel="tab4"> مهمانپذیر افاق</li>
    </ul>

 

 ویژگی rel در اینجا بعدا موقع نوشتن دستورات جی کوئری کاربرد داره
 نتیجه اجرای برنامه تا اینجا بصورت زیر است :
 
 

 مرحله سوم:

ایجاد محتوای هر زبانه با تگ div

یک تگ دایو کلی ایجاد می کنیم که از  کلاس سی اس اس به نام tab_container استفاده می کند

 

<div class="tab_container">

 

 درون این تگ دایو ، چهار تگ دایو دیگر قرار می دهیم که هر کدام در اصل محتوای  یکی از  زبانه ها  خواهند بود

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

 

 برنامه تگ های دایو :

دستورات این قسمت را کپی کنید و در ادامه برنامه تان قرار دهید

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

و در زیر ان

تگ های دایو و محتوایشان زیر هم قرار گرفته اند

 

<html>
<head>
<head>

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


<body>



<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="images/cod.jpg"> <br />
         <strong>
         مهمانپذیر سنتی صدر با داشتن امکانات رفاهی در خدمت مسافرین محترم   می باشد  
         </strong>
         </p>

     </div><!-- #tab1 -->


     <div id="tab2" class="tab_content">

       <p><img src="images/mortal combat.jpg"> <br />
          <strong>
          مهمانپذیر ارش با بیش از 30 سال سابقه پذیرایی از مسافرین داخلی و خارجی
اماده پذیرایی از شما هموطن عزیز است
          </strong>
       </p>

     </div><!-- #tab2 -->

 

     <div id="tab3" class="tab_content">

       <p><img src="images/halo.jpg"> <br />
          <strong>
          مهمانپذیر خوشنشین با معماری سنتی اماده خدمت رسانی در مجالس شماست
          </strong>
       </p>

     </div><!-- #tab3 -->


     <div id="tab4" class="tab_content">

       <p><img src="images/portal.jpg"> <br />
          <strong>
          مهمانپذیر افاق واقع در جنب رودخانه اب رو
          </strong>
       </p>

     </div><!-- #tab4 -->
     
 </div> <!-- .tab_container -->

</body>
</head>

  ویژگی idدر اینجا بعدا موقع نوشتن دستورات جی کوئری کاربرد داره

حتما مقدار id هر تگ دایو باید برابر مقدار rel مربوط به گزینه اش در لیست باشه

 مرحله چهارم :

سبک بندی زبانه ها و محتوای انها

رنگ زمینه زبانه فعال سفید با شماره #FFFFFF و رنگ زمینه زبانه غیر فعال خاکستری به شماره #EEEEEE باشد
 محتوای li ها که همان عناوین زبانه ها هستند باید با نگه داشتن اشاره گر ماوس رویشان highlighted  شوند
 فقط باید محتوای تگی که فعال است به کاربر نشان داده شود و محتوای سایر زبانه ها باید مخفی بماند

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

display:none;

 درون تگ head دستورات زیر را که همان سبک های سی اس اس هستند بنویسید

 

<style type="text/css">

    ul.tabs {
        margin: 0;
        padding: 0;
        float: left;
        list-style: none;
        height: 32px;
        border-bottom: 1px solid #999999;
        border-left: 1px solid #999999;
        width: 100%;
    }
    ul.tabs li {
        float: right;
        margin: 0;
        cursor: pointer;
        padding: 0px 21px ;
        height: 31px;
        line-height: 31px;
        border: 1px solid #999999;
        border-left: 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: left;
        width: 100%;
        background: #FFFFFF;

        text-align:right;    }
    .tab_content {
        padding: 20px;
        font-size: 1.2em;
        display: none;
    }
 
</style>

 

 برنامه را اجرا کنید

فعلا ظاهر کار درست شده است

ببینیم عملکرد این سبک ها بر دستورات تگ body چه بوده است ؟

 

 اول تاثیر سی اس اس ها ی بکار رفته روی ul :

کلاس tabs برای ul تعریف شده است

 

دقت کنید خود ul یک فضای مستطیل شکل نامرئی را به خود اختصاص می دهد که این فضا دارای عرض و ارتفاع است

 

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

 در این قسمت می خواهیم ویژگیهای فضای مربوط به فقط و فقط تگ ul رامشخص نمائیم

 

margin:0;

padding:0;

این دو دستور باعث می شوند که لیست درست در سمت چپ صفحه قرار بگیرد زیرا به صورت پیش فرض لیست ها کمی از سمت چپ صفحه فاصله دارند

 

 float:left:

باعث میشه  تگ های بعدی  در سمت چپ لیست ul قرار بگیره

 

 

 list-style:none;

بالت را از کنار گزینه های لیست ul برمی دارد

 

height:32px;

ارتفاع فضای متعلق به  ul را برابر 32 پیکسل می کند

 

border-bottom:1px solid #999999;

حاشیه پائین فضای مستطیلی لیست ul را به رنگ مشخص شده نوع خط ساده با ضخامت 1 px

 

 border-left:1px solid #999999;

حاشیه سمت چپ فضای مستطیلی لیست  ul را به رنگ مشخص شده نوع خط ساده با ضخامت 1 px

 

 

weight:100%;

100 در صد  عرض  صفحه به این لیست اختصاص داده شوددرصدهای مختلف را امتحان نمائید

 

 بررسی تاثیر سی اس اس های بکار رفته برای li های دورن ul ای که از کلاس tabs استفاده می کنه :

ul.tabs li

 

float:right;

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

 

 

margin:0;

یعنی li ها با هم فاصله ای نداشته باشند به هم چسبیده باشند

شما margin را عددی غیر از صفر بدین تا تاثیرشو ببینین

 

courser:pointre;

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

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

 

padding: 0px 21px;

یعنی فاصله از بالا و پائین در اطراف متن و قبل از حاشیه هر گزینه لیست صفر باشد و فاصله متن هر گزینه لیست از سمت چپ و راست تا قبل از مرز اطراف مستطیل هر گزینه برابر 21 پیکسل باشد

عددهای مختلف را امتحان نمائید

 

height:31px;

ارتفاع هر گزینه لیست برابر 31 پیکسل می شود

 

line-height: 31px;

فاصله هر گزینه تا گزینه دیگر لیست برابر 31 پیکسل می شود

تاثیر بود و نبود این گزینه را با افزودن // قبل از این ویژگی مشاهده نمائید

 

border:1px solid #999999;

رنگ و طرح و ضخامت خط دور فضای مستطیلی هر گزینه لیست

 

border-left:none;

خط حاشیه سمت چپ فضای مستطیلی هر گزینه را نشان نمی دهد

 

font-weight:bold;

متن درون هر گزینه را توپر نشان میدهد

 

background:#EEEEEE;

رنگ زمینه فضای مستطیلی هر گزینه li

 

overfllow : hidden;

مربوط به نمایش نوار پیمایش در صورت زیاد تر بودن متن موجود در هر گزینه نسبت به عرض ان است

 

position:relative;

مکان هر گزینه لیست قابل تغییر است

 
 در صورتیکه اشاره گر ماوس روی هر li که درون ul با کلاس tabs است قرار گرفت چه شو د ؟

 

ul.tabs li:hover{

background:#cccccc;

}

 

 رنگ زمینه ناحیه مستطیل شکل هر گزینه خاکستری پر رنگ تر شود
 
 مشخص کردن ویژیگهای سی اس اس هر گزینه li که روی ان کلیک شده یعنی رویداد active برایش اتفاق افتاده

 

ul.tabs li:active{

background:#ffffff;

border-bottom: 1px solid #ffffff;

}

 

مشخصات سی اس اس تگ دایو پدر که از کلاس container استفاده می کند و 4 دایو دیگر در ان قرار دارند

 

کلاس

.tab_container{

 

border:1px solid #999999;

دور ناحیه مستطیل شکل نامرئی این تگ دایو پدر خطی به ضخامت 1 پیکسل رنگ شماره مشخص شده و نوع خط ساده قرار دهد

 

border-top:none;

خط بالای این تگ دایو را نمایش ندهد

 

clear:both;

 

 

float:left;

هر تگ دیگری بعد از این تگ قرار  دارد سمت چپ ان قرار بگیرد نه زیر ان

 

weight:100%;

100 دصد عرض صفحه به این تگ اختصاص داده شود

 

background:#ffffff;

رنگ زمینه این لایه یا تگ سفید باشد

 

  text-align:right; 

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

 

ویژگیهای سی اس اس تگ های دایو که از کلاس tab_content استفاده می کنند

 

padding:20 px;

گفتیم هر تگی برای خودش یک فضای مستطیل شکل نامرئی داره که محتوای تگ تو اون قرار می گیره

حالا شما فاصله لبه محتوا را با لبه ناحیه مستطیل در نظر بگیرین میشه ناحیه padding

این فاصله رو می گه 20 پیکسل باشه

شما صفر بدین تا بهتر درک کنین

 

font-size:1.2em;

اندازه متن موجود در هر لایه است

 

display:none;

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

 
 

 مرحله پنجم :

نوشتن دستورات جی کوئری

 دستورات جی کوئری کلیک روی هر li را تشخیص خواهد داد

و مقدار موجود در صفت rel ان تگ li را می تواند بدست اورده و

می تواند محتوای تگ دایوی را نشان دهد که id  ان برابر مقدار Rel ان گزینه li است

 
 دستورات جی کوئری را در ون  head  و در یک تگ script جداگانه دیگر بنویسید

 

<script type="text/javascript">

$(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();
    });
});

</script>

 
 توضیح دستورات جی کوئری بالا :

 

 $(document).ready(function() {

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

 

    $(".tab_content").hide();

با متد hide که یک دستور جی کوئری است محتوای تمام تگ هایی را که نام کلاسشان tab_content است مخفی می کند

دقت کنید که علامت نقطه به کلاس اشاره دارد

 

    $(".tab_content:first").show();

متد show یک دستور جی کوئری است و برای نمایش محتوای یک تگ یا چند تگ بکار می رود

اینجا متد show برای نمایش محتوای اولین تگی که نام کلاس ان tab_content است بکار می رود

 

    $("ul.tabs li").click(function() {

این دستور یعنی دستوراتی که بین اکولاد باز و بسته تابع function هستند با بار گذاری کامل صفحه وب به طور خودکار اجرا نشوند بلکه منتظر وقوع یک رویداد و ان هم رویداد کلیک باشند

اما کلیک روی چه ؟

کلیک روی هر li که در و ن ul ای است که از کلاس tabs استفاده می کند

 

        $("ul.tabs li").removeClass("active");

این دستور تمام ویژگیهای سی اس اس که نام گروه ان active بود را  برای li  ای که  دورن ul ای است  کلاس ان tabs است ،  حذف و خنثی می کند

 

        $(this).addClass("active");

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

واژه this به تگی اشاره دارد که رویداد کلیک روی ان اتفاق افتاده است

 

        $(".tab_content").hide();

محتوای هر تگی که نام کلاس ان tabs_content است مخفی می شود

 

        var activeTab = $(this).attr("rel");

متغیری به نام activetab  تعریف می شود که مقدار ان برابر مقدار ویزگی rel تگی است که الان روی ان کلیک شده است واژه this به تگی اشاره دارد که رویداد کلیک روی ان اتفاق افتاده است

 

  

     $("#"+activeTab).fadeIn();

 

"#"+activeTab

دستور بنفش رنگ یک دستور رشته ای است

علامت # را قبل از مقدار موجود در متغیر activetab اضافه می کند

علامت # یعنی ای دی

 

حالا دستور نارنجی یعنی هر تگی که ای دی ان برابر عبارت قرار گرفته در متغیر activetab است تحت تاثیر متد fadein قرار بگیرد

یعنی بصورت محو به اشکار ظاهر شود