استفاده از Tab ها در نمایش Data view ها و Custom Form ها

چند نفر از دوستان برای من ایمیل فرستادند و در مورد چگونگی نمایش اطلاعات Data View ها و Web Part Form ها با استفاده از Tab ها در صفحات شیرپوینت سوال کرده بودند. در این پُست تصمیم دارم تا نحوه این کار رو تشریح کنم..پس با من همراه باشید.

اگر توجه کرده باشید، هنگامی که تصمیم دارید تا به کاربر Custom Form هایی رو جهت تکمیل و پر کردن اطلاعات نمایش بدید، ممکنه تعداد این فرمها در یک صفحه زیاد باشه و هر کدوم از فرمها هم برای یک لیست خاصی باشند! اگر این فرمها ستونهای زیادی داشته باشند و مثلاً تعداد فرمها هم ۳ تا باشه، کل صفحه پر میشه و نمای خوبی برای کاربر نداره! به همین دلیل اگر این فرمها رو به صورت Tab هایی به کاربر نمایش بدید ، هم زیبایی صفحه حفظ میشه و هم کاربر ترغیب میشه تا فرمها رو با تعویض ۲-۳ تا Tab پر کنه!

حال اینکه چطور این Tab ها رو ایجاد کنید. برای ساخت Tab ها شما نیاز به چند خط کد جاوا اسکریپت و چند خط کد Style برای ظاهر Tab ها دارید..همین! من با مثالی مراحل رو به صورت قدم به قدم در زیر توضیح می دم : (فرض می کنیم شما ۲ لیست دارید که هر کدوم یکسری اطلاعات رو از کاربر می گیرند و کاربر باید فرمهای اونها رو در صفحه ای که ایجاد کردید پر نماید.)

۱- ابتدا یک صفحه از نوع Web Part Page با نام Register.aspx در سایتتون ایجاد کنید که شامل حداقل ۲ Web Part Zone باشد.

۲- همه کدهای داخل تگ <asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server"></asp:Content> رو پاک کنید.

۳- حال کد Style زیر رو به ابتدای صفحه Register و درست زیر خط <"asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server> اضافه کنید :

<script language="javascript" type="text/javascript">
    // return "id" object on all browsers
    function getObject(id) {
        if(document.getElementById) {
            obj = document.getElementById(id);
        }
        else if(document.all) {
            obj = document.all.item(id);
        }
        else {
            obj = null;
        }
        return obj;
    }
    // show "pane#" and set "tab#" as active
    function showTab(id) {
        hideTab();
        activeTab = id;
        getObject("tab" + id).className = "tabActive";
        getObject("pane" + id).className = "tabPaneActive";
    }
    // hide active pane
    function hideTab() {
        getObject("pane" + activeTab).className = "tabPane";
        getObject("tab" + activeTab).className = "tab";
    }
    // set initial tab
    activeTab = 1;
</script>

۴- اکنون کد Style مربوط به نحوه نمایش Tab ها رو به صورت زیر بلافاصله در پایین کد فوق وارد کنید :

<style type="text/css">

#tabsLayout { background-color: #ffffff; }
#tabsTable { }
#tabsTable a { text-decoration: none;}
.tab a { display: block; padding: 10px 23px 10px 5px; color: #666666; border-bottom: 1px #ffffff solid; 
background-image:url(/images/TabBkg1.jpg); background-repeat:no-repeat; font-size:11px; float:right;}
.tabActive a { display: block; padding: 10px 23px 10px 5px; color: #000000; border-bottom: 1px #dddddd solid; 
background-image:url(/images/TabBkg2.jpg); background-repeat:no-repeat; font-size:11px; float:right;}
.tabPane { display: none; }
.tabPaneActive { display: block; padding: 5px; min-height: 200px; background-color:#E6E6E6;}

</style>

۵- اکنون شما باید کد مربوط به محتوای Tab ها رو وارد کنید. برای اینکار شما ابتدا باید کد زیر رو در ادامه کد بالا وارد کنید :

<table cellpadding="4" cellspacing="0" border="0" width="100%">
                <tr>
                    <td valign="top" width="100%">                     
                    <div id="tabsLayout">
    <table id="tabsTable" cellpadding="0" cellspacing="0">
        <tr>
            <td id="tab1" class="tabActive">
                <a href="BLOCKED SCRIPTshowTab(1);">مشتریان شرکتی</a>
            </td>
            <td id="tab2" class="tab">
                <a href="BLOCKED SCRIPTshowTab(2);">مشتریان شخصی</a>
            </td>
        </tr>
    </table>
        <div id="pane1" class="tabPaneActive">
        </div>
        <div id="pane2" class="tabPane">
        </div>
     </div>
                     </td>
                </tr>
                <tr>                    
                    <td id="_invisibleIfEmpty" name="_invisibleIfEmpty" 
        valign="top" height="100%" width="100%"> 
                     </td>
                </tr>
                <script language="javascript">
        if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function")
    {MSOLayout_MakeInvisibleIfEmpty();}</script>
        </table>

نکته: پس از آخرین تگ کد بالا یعنی </Table> شما باید تگ بسته </asp:Content> رو مشاهده کنید.

۶- قسمتهایی که در کد مرحله ۵ با نامهای "مشتریان شخصی" و "مشتریان شرکتی" مشخص شده اند، متن داخل Tab ها می باشد.(می تونید اونها رو به دلخواه تغییر بدید.)

۷- حال مراحل اولیه رو انجام دادید. اکنون باید به ازای هر تب، یک Web Part Zone به همراه Custom Data Form Webpart در کد بالا درج کنید. برای اینکار کافی است دقیقاً در زیر تگ <div id="pane1" class="tabPaneActive"> محتویات Webpart Zone و Custom Data Form مربوط به Tab اول را وارد کنید و دقیقاً در زیر تگ                  <div id="pane2" class="tabPane"> محتویات Webpart Zone و Custom Data Form مربوط به Tab دوم را وارد کنید. به همین راحتی!

حال باید دکمه های بالای فرم رو حذف کنید و فقط دکمه Save پایین Custom Form رو تغییر نام بدید. این کار بستگی به خلاقیت شما داره. 😉

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

شکل (۱) Tabبر روی گزینه اول (مشتریان شرکتی) ست شده است :

شکل (۲) Tabبر روی گزینه دوم (مشتریان شخصی) ست شده است :

همانطور که در شکل های فوق مشاهده می کنید، دو تب برای ۲ Custom Form Web Part مختلف طراحی کردم که هر کدوم اطلاعات خاص لیست خودشون رو از کاربر می گیرند و با زدن دکمه ثبت که همان Save سابق است! اطلاعات در هر لیست به صورت مجزا ثبت می شود!!

خب، امیدوارم این مقاله هم براتون مفید بوده باشه. حال با توجه به نکات و روشهای فوق می تونید کارتون رو بر روی تب ها بیشتر توسعه بدید.! 😉

برگرفته از : http://www.thesug.org/blogs/kyles/Lists/Posts/ViewPost.aspx?ID=8

شاد و موفق باشید…