آرش آقاجانی (Arash Aghajani) : استفاده از Tab ها در نمایش Data view ها و Custom Form ها

برچسب ها

منوی سایت اصلی

SharePoint Blogroll

SharePoint Related Sites

بايگاني ها

بيشترين بازديد شده

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

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

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

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

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

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

3- حال کد 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>

4- اکنون کد 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>

5- اکنون شما باید کد مربوط به محتوای 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> رو مشاهده کنید.

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

7- حال مراحل اولیه رو انجام دادید. اکنون باید به ازای هر تب، یک 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 رو تغییر نام بدید. این کار بستگی به خلاقیت شما داره. ;)

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

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

tab1

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

tab2

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

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

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

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

Posted: Wednesday, March 18, 2009 11:29 PM توسط Arash

در زمینه: JavaScript, Design, SharePoint, Tabs, DHTML

نظرات

mahmood56 گفته:

مرسی عالی بود!

# March 26, 2009 12:38 AM

aram.azari گفته:

خيلي خوب است. با تشكر

# April 4, 2009 10:22 AM

Ahmadian گفته:

Agha daste shoma dard nakone,khayli khub va alee bud.

khayli bedarde ma khord.

Sepasgozaram

# April 9, 2009 4:42 PM

آرش آقاجانی (Arash Aghajani) گفته:

توسعه تکنولوژی شیرپوینت در جهان همچنان در حال پیشرفت است و در کنار آن استفاده از ابزارهای جدید وب مانند

# July 3, 2009 1:28 PM

Negeen گفته:

سلام

ممنون ازنطلب خولبتون

من تستش کردم و واقعا مفید بود

مطلبی که اینجا مطرح می شه اینه که اگه همراه با لیست خود بخواهید فایلی Attach کنید مشکل بوجود می یاید برای رفع آن چه باید کرد

ممنون می شم اگه من را راهنمایی کنید.

# October 31, 2009 10:26 PM

Mina_a گفته:

سلام دستتون درد نکنه خیلی خوب بود

# October 26, 2011 6:16 PM

dorsa گفته:

سلام آقای آقاجانی

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

ولی یه سوالی داشتم:

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

ولی این تب ها طوری کار میکنن که انگار از هم جدا نیستن یعنی وقتی روی یکی از تبهای دایو دوم کلیک میکنم تمام تبهای دایو اول هم به صورت غیر فعال درمیان به نظر من مشکل از تابع hide هست ولی نتونستم درستش کنم،به نظر شما مشکل چی هست و چه جوری میشه این مشکل رو حل کرد؟

باتشکر

code htmlesh injoorie :(2ta div ha hast first tab va second tab)

<tr>

<tr>

<a href="BLOCKED SCRIPTshowTab(1);"><span><span>آخرین خبــرها</span></span></a>

</td>

<a href="BLOCKED SCRIPTshowTab(2);"><span><span>پربیننده ترین خبرها</span></span></a>

</td>

</tr>

</table>

ssssss

</div>

aaaaaaaaaaaa

</div>

</td>

</tr>

if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function")

{MSOLayout_MakeInvisibleIfEmpty();}</script>

</table>

</div>

<tr>

<tr>

</td>

</td>

</td>

</tr>

</table>

</div>

dddddddddddddd

</div>

mmmmmmmmmmmmmmmmm

</div>

</td>

</tr>

<tr>

<td id="_MakeinvisibleIfEmpty" name="_MakeinvisibleIfEmpty"

valign="top" height="100%" width="100%">

</td>

</tr>

if(typeof(MSOLayout_MakeInvisibleIfEmpty) == "function")

{MSOLayout_MakeInvisibleIfEmpty();}</script>

</table>

</div>

baed jquerisham ine haminjoori ke khodetun neveshtid:

// 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>

$(document).ready(function(){

$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);

});

</script>

inam Css esh:

#tabsLayout { background-color:#2e3242; width:328px;height:360px; }

#tabsTable { }

#tabsTable a {

display:block;

margin:0;

padding:0 0 0 14px;

color:#fff;

text-decoration:none;

background:#f00 url('../images/menu_l.gif') no-repeat left top;

font-family:Tahoma, Geneva, sans-serif;

font-weight:bold;

}

#tabsTable a span

{

display:block;

margin:0;

padding:0 14px 0 0;

background:#f00 url('../images/menu_r.gif') no-repeat right top;

}

#tabsTable a span span

{

display:block;

margin:0;

padding:8px 8px 26px;

background:#f00 url('../images/menu.gif') repeat-x top;

}

#tabsTable a:hover { background:#f00 url('../images/menu_al.gif') no-repeat left top;}

#tabsTable a:hover span{

background:#f00 url('../images/menu_ar.gif') no-repeat right top;

}

#tabsTable a:hover span span{

background:#f00 url('../images/menu_a.gif') repeat-x top;

}

.tab a { display: block; padding: 10px 23px 10px 5px; color: #666666; border-bottom: 20px #2e3242 solid;

background-repeat:no-repeat; font-size:11px; float:right;}

.tabActive a

{

background:#f00 url('../images/menu_al.gif') no-repeat left top;

}

.tabActive a span

{

background:#f00 url('../images/menu_ar.gif') no-repeat right top;

}

.tabActive a span span

{

background:#f00 url('../images/menu_a.gif') repeat-x top;

}

.tabPane { display: none; }

.tabPaneActive { display: block; margin:3px; width:322px;height:287px; background-color:#fff;}

</style

# November 27, 2011 6:38 PM

نظرات افراد ناشناس غير فعال مي باشد

آرش آقاجانی (Arash Aghajani)

Recent Posts

برچسب ها

منوی سایت اصلی

SharePoint Blogroll

SharePoint Related Sites

بايگاني ها

بيشترين بازديد شده

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

نظرات

mahmood56 گفته:

aram.azari گفته:

Ahmadian گفته:

آرش آقاجانی (Arash Aghajani) گفته:

Negeen گفته:

Mina_a گفته:

dorsa گفته: