نحوه استفاده از افزونه facebox فریم ورک jquery در دات نت

[ghafoori]

امروز می خواهم یک پلاگین خوب از jquery به نام facebox را معرفی کنم این افزونه یک کادر داخل فرم باز می کند و شما قادر خواهید بود داخل ان یک لایه یا یک عکس یا یک صفحه وب را نمایش دهید
http://alighafoori.files.wordpress.com/2009/10/untitled.jpg?w=490&h=102
من در این پست طرز استفاده این افزونه را vb.net C#‎‎‎‎ توضیح می دم

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

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

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

شروع می کنیم براساس یکی از دو زبانی که ذکر شد یک پروژه ایجاد کنید

ابتدا فایل های مورد نیاز را از سایت های jquery و facebox دانلود کنید االبته در انتهای پست من خود پروژه ها را می گذارم و شما دیگر لازم به این کار نیستید اما با رفتن به این سایت ها می توانید جدیدترین نگارش انها را دریافت کنید در هرصورت من فایل را در شاخه facebox داخل پوشه اصلی پروژه قرار می دهم

خطوط زیر را به هدر سایت خود اضافه کنید


<script src="FaceBox/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="FaceBox/facebox.js" type="text/javascript"></script>

<link href="FaceBox/facebox.css" rel="stylesheet" type="text/css" />

حالا کدهای زیر را اضفه کنید

<script type="text/javascript">

jQuery(document).ready(function($) {

$('a[rel*=facebox]').facebox()

})

</script>

این کدها لینک ها را اماده نمایش کادر می کنند

سپس در فرم خود کدهای زیر را وارد کنید


<div style="text-align: right">

<a href="#FaceBoxDiv" rel="facebox">کلیک کنید</a>

<br />

<a href="FaceBox/Sunset.jpg" rel="facebox"><img src="FaceBox/tmb_Sunset.jpg" alt="روی عکس کلیک کنید" /></a>

<br />

<a href="#Form2Div" rel="facebox">اضافه کردن ایتم</a>

<asp:DropDownList ID="DropDownList1" runat="server">

</asp:DropDownList>

<asp:Label ID="Label1" runat="server" Text="انتخاب"></asp:Label>

</div>

<div id="FaceBoxDiv" style="display:none;">

این پیام بوسیله فیس باکس نمایش داده می شود.


</div>

<div id="Form2Div" style="display:none;">

<asp:LinkButton ID="LinkButton1" runat="server">بروز رسانی</asp:LinkButton>

<br />

<iframe src="Form2.aspx"></iframe>

</div>

خوب توضیح کد می بینید که ما یک لینک داریم که href ان برابر #FaceBoxDiv است هر گاه شما می خواهید یک لایه را نمایش دهید کافی است یک لایه دلخواه ایجاد کرده ان را غیر قابل نمایش قرار دهید سپس یک لینک ایجاد کرده مقدار href را برابر # به علاوه اسم لایه قرار دهید و سپس مقدار rel لینک را برابر facebox قرار دهید

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

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

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

کد ان را داخل پست نمی زارم چون پست خیلی طولانی میشه می تونید با دانلود کردن سورس ان را ببینید

سورس (http://www.box.net/shared/hak18eu4j3)

[kaidgroup]

سلام عزیز جان
این کد ها بر روی .net 2003 هم کار میکنه
من خواستم از این کد ها استفاده کنم ولی نشد
به دو مورد زیر هم errore داد

using System.Collections.Generic;
using System.Linq;

[ghafoori]

بله می توانید استفاده کنید فقط به جای list در کد زیر از ارایه استفاده کنید و ان دو خط اشکال دار را هم حذف کنید


System.Collections.Generic.List<String> list ;
if(Session["List"]!=null)
{
list = (System.Collections.Generic.List<String>)Session["List"];
}
else
{
list = new System.Collections.Generic.List<String>();
}
list.Add(TextBox1.Text);
Session["List"] = list;