مقدمه :
کنترل AlwaysVisibleControlExtender، یکی از کنترل های ساده و در عین حال جالب موجود در AjaxControlToolkit می باشد.
همانطور که از نام این کنترل مشخص است، این کنترل از نوع کنترل های توسعه دهنده (Extender) می باشد. یعنی خود دارای شکل فیزیکی نبوده ولی می تواند به کنترل های استاندارد موجود در ASP.NET خواصی را اضافه کند.
حتما تاکنون در برخی سایت ها و بخصوص تالارهای گفتمان(Forums) با این صحنه روبرو شده اید که تا قبل از اینکه در سایت ثبت نام کنید یا در حقیقت لاگین کرده باشید، پیغامی همواره به شما نمایش داده می شود، مبنی بر اینکه برای استفاده از تمامی امکانات سایت باید عضو سایت شده باشید. واین پیغام در صفحه در محل بخصوصی نمایش داده می شود و به هنگام اسکرول کردن در صفحه، همواره در محل خود باقی می ماند.
به طور مثال پیغامی شبیه به شکل زیر تا زمانی که در سایت لاگین نکرده باشید همواره در قسمت بالا و سمت چپ صفحه نمایش داده می شود و اگر در صفحه به سمت پایین یا بالا اسکرول کنید، می بینید که پیغام مربوطه موقعیت خود را حفظ می کند.
کاربرد کنترل AlwaysVisibleControlExtender نیز در حقیقت ایجاد اینگونه پیام ها می باشد. بدیهی می باشد که این پیام ها می توانند دارای عکس و لینک و سایر عناصر HTML باشند.
پیش نمایش :
برای درک بهتر این موضوع می توانید به اینجا مراجعه کنید و با اسکرول نمودن در صفحه، عملکرد کنترل را مشاهده نمایید.
شروع :
خوب، برای شروع فرض می کنیم که یک کنترل Panel در صفحه داریم و قصد داریم که محتویات این Panel همواره در قسمت بالا و سمت چپ صفحه نمایش داده شود و هنگامی که کاربر در حال اسکرول نمودن صفحه می باشد، محتویات این Panel نیز موقعیت خود را حفظ نموده و همواره به کاربر نمایش داده شوند.
قطعه کد مربوط به Panel به شکل زیر می باشد.
<asp:Panel ID="pnlAlwaysVisible" runat="server">
شما عضو نیستید، برای دسترسی کامل به سایت لطفا ثبت نام نمایید
</asp:Panel>
|
اکنون زمان اضافه کردن کنترل AlwaysVisibleControlExtender به صفحه فرا رسیده است. کنترل مربوطه را به صفحه اضافه نموده و به شکل زیر تغییر می دهیم.
<cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
TargetControlID="pnlAlwaysVisible"
VerticalSide="Top"
VerticalOffset="15"
HorizontalSide="Left"
ScrollEffectDuration=".2"
HorizontalOffset="25">
</cc1:AlwaysVisibleControlExtender>
|
اکنون به معرفی برخی خصوصیات مهم کنترل AlwaysVisibleControlExtender می پردازم.
-
TargetControlID : همانند سایر کنترل های توسعه دهنده (Extender) موجود در مجموعه AjaxControlToolkit، این خصوصیت شناسه کنترلی را که قرار است ویژگی های AlwaysVisibleControlExtender به آن اعمال شود را نگهداری می کند. در مثال ما این شناسه مربوط به کنترل Panel ی است که قبلا به صفحه اضافه نموده ایم (pnlAlwaysVisible)
-
VerticalSide : این صفت همانطور که از نام آن مشخص می باشد، مکان مورد نظر ما را در قسمت عمودی صفحه نگهداری می کند. مقادیر مجاز آن یکی از سه مورد Top ، Middle ، Bottom می باشد. با توجه به اینکه ما در این مثال می خواهیم محتویات Panel در قسمت بالا و سمت چپ صفحه نمایش داده شود، مقدار عمودی Top را به آن نسبت داده ایم. اگر می خواستیم که محتویات Panel در وسط صفحه نمایش داده شود باید مقدار Middle و برای نمایش در پایین صفحه باید مقدار Bottom را به آن نسبت می دادیم.
-
HorizontalSide : این صفت مشابه صفت VerticalSide می باشد. با این تفاوت که این صفت مکان مورد نظر نمایش محتویات Panel را نسبت به افق (Horizontal) نگهداری می کند. مقادیر مجاز آن Left، Center ، Right می باشند. با توجه به اینکه ما می خواهیم محتویات Panel در قسمت بالا و سمت چپ صفحه نمایش داده شود، مقدار Left را به آن نسبت داده ایم.
-
HorizontalOffset : در صورتی که بخواهیم کنترل پنل در هنگام نمایش به میزان معینی از لبه کناری (افقی) صفحه فاصله داشته باشد باید مقداری را بر حسب پیکسل به این صفت نسبت دهیم. در این مثال ما مقداد 25 را نسبت داده ایم پس این کنترل همواره به میزان 25 پیکسل از لبه سمت چپ صفحه فاصله خواهد داشت.
-
VerticalOffset : این صفت نیز مشابه صفت HorizontalOffset می باشد با این تفاوت که این صفت فاصله کنترل Panel را با لبه عمودی صفحه نگهداری می کند (بالا یا پایین). در این مثال ما مقدار 15 را به آن نسبت داده ایم پس به میزان 15 پیکسل از لبه بالایی صفحه فاصله خواهد داشت.
-
ScrollEffectDuration : هنگامی که کاربر در حال اسکرول در صفحه می باشد، مدت زمانی طول می کشد که پنل مورد نظر ما در موقعیت قبلی خود قرار بگیرد. این مدت زمان را برحسب ثانیه می توانید به صفت نسبت دهید. (برای امتحان می توانید به پیش نمایش صفحه در بالا مراجعه کنید و عملکرد آن را مشاهده نمایید)
تذکر :
هنگام استفاده از این کنترل دقت کافی را لحاظ کنید زیرا استفاده نادرست و نابجا از این کنترل می تواند باعث ایجاد دردسر و رنجش بازدید کننده سایت گردد.
مثال کامل انجام شده در این مقاله از لینک بالای صفحه قابل دریافت می باشد.
منبع : 30sharp.com