منوي آكاردئوني

[Z.Abdollahi]

سلام به همه
من تو برنامه ام 7-8 تا آيتم دارم كه به ازاي هر كدوم از اونها يه منوي آكاردئون تو لود اوليه صفحه باز ميشه. با اين كلاس:

class AccordionBuilder
{

public string[] Build(int ServiceId)
{
string html = "<div class='demo'><div id='accordion{0}'>\n";
html = string.Format(html, ServiceId);

string script = " $('#accordion" +
ServiceId + "').accordion({active: false,collapsible: true}); ";

DataTable sel = new DataTable();
ServicesBLL ser = new ServicesBLL();
sel = ser.FormsSelGroups(ServiceId);


foreach (DataRow row in sel.Rows)
{
html += createAccordion(int.Parse(row["ServiceId_FK"].ToString()), row["GroupName"].ToString());
}

html += "</div></div>";

string[] accardion = { script, html };
return accardion;
}
مدير پروژه دلش مي خواد هر كدوم از اين آكاردئون ها يه هدر با رنگ مستقل داشته باشن. همونطوري كه مشخصه اطلاعات مربوط به محتواي آكاردئون ها از ديتابيس خونده ميشه.
هدر هم كه يه تصوير پس زمينه داره كه از كلاس .ui-accordion-header استايل شيت مربوط به آكاردئون خونده ميشه
به نظرتون يه راهي هست كه اين تصوير پس زمينه رو هم از ديتابيس بخونيم؟

[eleboys]

بله بعد از اینکه دستور accordion اجرا شد هدر هر کدام از بخش ها را با استفاده از سلکتور های jQuery پیدا کنید و کلاس css جدید مورد نظر خودتان را با استفاده از دستور addClass جی کوئری به آن تزریق کنید (این کار باید بعد از ایجاد accordion) انجام بشه.

برای اینکه بتونید با سلکتور ها خیلی راحت هدر هر کدام از بخش هارو پیدا کنید سعی کنید یه خاصیت متمایز زمان ایجاد کد (تو همین کد سرور سایدی که نوشتید) به DIV هر کدوم بدید تا بعد خیلی راحت هدر اون رو بتونید select کنید.

[Z.Abdollahi]

يه سئوال ديگه هم دارم. اول تصوير زير رو ببينيد
68318
هر كدوم از باكس هايي كه مي بينيد يه منوي آكاردئوني مستقل هست. همونطوري كه تو عكس هم مشخصه وقتي يكي از آكاردئون ها باز ميشه بقيه به سمت پايين منتقل مي شوند. راهي هست كه آكاردئون ها سر جاي خودشون فيكس بشن و با انتخاب يكي از اونها بقيه تغيير مكان ندهند؟

[eleboys]

خوب دلیل این اتفاق این هست که تراز عمودی (Vertical Align) مربوط به Container ای که آکاردئون ها توش قرار گرفتن center هستش در صورتی که باید top باشه. اگر این container (درواقع منظور تگ parent این آکاردئون ها هست) از جنس DIV می بود به طور پیشفرض تراز عمودیش باید top هست و نباید این مشکلو میداشتید. اما فکر می کنم این آکاردئون هارو داخل سلول های یک Table قرار دادید که به این صورت شده. در این صورت کافیه به سلول ای که حاوی این آکاردئونها هستش خاصیت valign="top" رو اضافه کنید به صورت زیر:


<table>
<tr>
<td valign="top">
محتویات
</td>
</tr>
</table>


=================
نوشته های فنی نیما بغدادی...
http://www.nimabaghdadi.ir

[Z.Abdollahi]

با تشكر از لطفتون. به نظرتون راهي هست كه هركدوم از زيرمنو هاي آكاردئون قابل مديريت از نظر مجوز دسترسي باشند؟ يعني نمايش داده بشوند اما وقتي كاربري كه مجوز ديدن اون صفحه رو نداره روش كليك مي كنه بهش يه پيغام مناسب بديم كه بايد به سيستم وارد بشه؟

[eleboys]

با تشكر از لطفتون. به نظرتون راهي هست كه هركدوم از زيرمنو هاي آكاردئون قابل مديريت از نظر مجوز دسترسي باشند؟ يعني نمايش داده بشوند اما وقتي كاربري كه مجوز ديدن اون صفحه رو نداره روش كليك مي كنه بهش يه پيغام مناسب بديم كه بايد به سيستم وارد بشه؟

بله اگر شما برای ایجاد هر کدام از زیرمنوهای این آکاردئون از یک تگ h3 برای تیتر و در ادامه از یک تگ DIV جهت نگدارنده محتویات استفاده کرده باشید مانند متن زیر (البته شما این متن رو در سمت سرور اتوماتیک ایجاد می کنید که باز هم فرقی نمی کنه نهایتا چیزی شبیه کد زیر می سازید دیگه)

<div id="accordion">
<h3><a href="#">عنوان</a></h3>
<div>
<p>محتویات</p>
</div>
</div>

کافیه زمان ایجاد هر بخش با چک کردن دسترسی ها اگر زیرمنویی دسترسی نمایش رو نداره فقط تگ h3 که مربوط به تیتر اون هست رو اضافه کنید به همراه تگ DIV محتویات البته بدون قرار دادن محتویات در اون (فقط <DIV></DIV>) در این حالت فقط عنوان نمایش داده میشه
ولی محتویات خیر. فکر می کنم باید خود آکاردئون رویدادی جهت سلکت شدن زیر منوهاش داشته باشه که شما می تونید با هندل کردن این رویداد برای آیتم های دسترسی ندارند پیام مورد نظرتون رو نشون بدید. اما اگر نداشته باشه هم مشکلی نیست می تونید رویداد کلیک رو مستقیما در تیتر آیتم هایی که مدنظرتون هست (بدون دسترسی) به شکل زیر قرار بدید:

<h3><a href="#" onclick="alert('No Access')">عنوان</a></h3>

=================
نوشته های فنی نیما بغدادی...
http://www.nimabaghdadi.ir (http://www.nimabaghdadi.ir/)