.NET Tips | جستجوها: نتایج مشابه «کامپوننت SweetAlert۲ برای نمایش مودال و پیغام‌ها در Angular»، صفحه: ۷۸

مهمان

نظرات مطالب

PersianDatePicker یک DatePicker شمسی به زبان JavaScript که از تاریخ سرور استفاده می‌کند

ایول.از وقتی کامپوننت شما رو دیدم datepicker تلریک و jquery از چشمم افتاده. به سادگی کار کردن با یه input میشه باهاش زندگی کرد.هم سمت کلاینت هم سمت سرور میشه راحت بهش دسترسی پیدا کرد و مقدار اولیه داد. تازه راه اندازی اش هم آسونه و عین jquery نیست که یه فایل به صفحه اضافه کنی مجبور شی همه صفحه رو بالا پایین کنی.

در کل خدا اجرتون بده.

‫۱۰ سال و ۴ ماه قبل، پنجشنبه ۱۲ تیر ۱۳۹۳، ساعت ۱۷:۱۹

سوین

نظرات مطالب

مدیریت AccessViolationException در برنامه‌های دات نت 4 به بعد

با سلام

از کامپوننت شرکت‌های ثالث استفاده نکردم . آیا راه حل کلی برای پیدا کردن چنین خطاهایی وجود نداره ، اینترنت رو هم سرچ کردم اما کمک زیادی نکرد که بشه فهمید مشکل از چیه و قبل ارسال این پست 2 ساعت تمام آزمایش کردم خطا نداد اما بعضی مواقع این اتفاق می‌افته .

در ضمن این برنامه WPF App که برای اوتوماسیون اداری نوشته شده و از EF 6.2 ، قفل سخت افزاری (که بدون قفل هم این ایراد رو می‌ده)

‫۱۰ سال و ۸ ماه قبل، جمعه ۲ اسفند ۱۳۹۲، ساعت ۲۲:۵۵

صابر فتح الهی

نظرات مطالب

پیاده سازی UnitOfWork به وسیله MEF

مهندس سلام
من از MEF برای تزریق کامپوننت هام به یک الگوی کار در MVC استفاده کردم، کار به درستی انجام میشه اما Attribute‌های کلاس‌ها مثل پیام‌های خطا، طول فیلد و ... روی خروجی نهایی اعمال نمیشه و دیتابیس طبق پیش فرض‌ها ساخته میشه.
البته اگر از یک فایل کانفیگ (fluent API) جدا استفاده کنم مشکل حل میشه اما در این فایلها نمی‌توان پیام خطا برای حالت‌های مختلف تعریف کرد (البته به نظرم)

‫۱۱ سال و ۱ ماه قبل، یکشنبه ۱۴ مهر ۱۳۹۲، ساعت ۱۵:۴۵

وحید نصیری

نظرات مطالب

کنترل DatePicker شمسی مخصوص Silverlight 4

سلام،
برای WPF می‌تونید از مواردی که نامبرده شد استفاده کنید.
+ این کامپوننت نیاز هست کمی تغییر کند تا برای WPF هم قابل استفاده شود. WPF خیلی از مواردی را که در آخر بحث فوق ذکر شد را دارد (مانند uniform grid ، تقویم شمسی و غیره). این‌ها باید حذف شوند. رفتار popup در wpf بسیار پخته‌تر است و کاملتر و این مورد هم باید کمی تعدیل شود. مابقی موارد با یک کامپایل در پروژه‌ی جدید مخصوص WPF قابل استفاده خواهد بود. مثال‌های آن هم تفاوتی نمی‌کند.
وقت کنم به زودی این رو به WPF هم انتقال می‌دم.

‫۱۴ سال و ۱ ماه قبل، جمعه ۱۶ مهر ۱۳۸۹، ساعت ۲۰:۴۲

وحید نصیری

نظرات مطالب

Blazor 5x - قسمت هشتم - مبانی Blazor - بخش 5 - تامین محتوای نمایشی کامپوننت‌های فرزند توسط کامپوننت والد

یک نکته‌ی تکمیلی: روش ارسال داده‌ها به RenderFragmentها

در مباحث اعتبارسنجی و احراز هویت Blazor در قسمت‌های بعدی، به قطعه کد context@ داری در داخل یک RenderFragment خواهیم رسید:

<AuthorizeView>
    <Authorized>
                Hello, @context.User.Identity.Name!
    </Authorized>
</AuthorizeView>

اکنون این سؤال مطرح است که این context@ از کجا آمده‌است و چه مفهومی را دارد؟
برای پاسخ به این سؤال نیاز است با مفهوم «Templated components» در برنامه‌های Blazor آشنا شد. تا اینجا از RenderFragmentها صرفا جهت فراهم آوردن قسمت ثابتی از قالب کامپوننت جاری، توسط استفاده کننده‌ی از آن، کمک گرفتیم. اما در همان سمت استفاده کننده، امکان دسترسی به اطلاعات مهیای داخل آن فرگمنت نیز وجود دارد. برای نمونه به کدهای کامپوننت TableTemplate.razor دقت کنید:

@typeparam Titem

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
</table>

@code {
    [Parameter]
    public RenderFragment TableHeader { get; set; }

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

- این کامپوننت، قالب سفارشی ثابت هدر جدول را توسط یک RenderFragment، از بکارگیرنده‌ی خود دریافت می‌کند.
- همچنین یک RenderFragment جنریک را نیز مشاهده می‌کنید که قالب ردیف‌های جدول را تامین می‌کند. نوع جنریک قابل دسترسی در این کامپوننت، توسط دایرکتیو typeparam Titem@ تعریف شده‌ی در ابتدای آن، مشخص شده‌است.
- بنابراین هربار که ردیفی از بدنه‌ی جدول در حال رندر است، یک شیء item از نوع TItem را به قالب سفارشی تامین شده‌ی توسط بکارگیرنده‌ی خود ارسال می‌کند.
اکنون این سؤال مطرح می‌شود که چگونه می‌توان به شیء item، در سمت والد یا بکارگیرنده‌ی کامپوننت TableTemplate فوق دسترسی یافت؟
برای اینکار می‌توان از پارامتر ویژه‌ای به نام context که یک implicit parameter است و به صورت پیش‌فرض تعریف شده و مهیا است، در سمت کدهای بکارگیرند‌ه‌ی کامپوننت، استفاده کرد:

@page "/pets"
<h1>Pets</h1>
<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

- در اینجا روش بکارگیری کامپوننت TableTemplate را در کامپوننتی دیگر مشاهده می‌کنید. توسط فرگمنت TableHeader، قالب ثابت هدر این جدول تامین شده‌است. توسط فرگمنت RowTemplate قالب پویای ردیف‌های جدول ارائه شده‌است.
- همچنین در اینجا پارامتر ویژه‌ای به نام context@ را نیز مشاهده می‌کنید. این پارامتر همان شیء item ای است که در حین رندر هر ردیف جدول، به فرگمنت RowTemplate ارسال می‌شود. به این ترتیب کامپوننت والد می‌تواند از اطلاعات در حال رندر توسط کامپوننت فرگمنت دار، مطلع شود و از آن استفاده کند. در این مثال، نوع context@، از نوع کلاس Pet است که سعی شده بر اساس نوع پارامتر Items ارسالی به آن، توسط کامپایلر تشخیص داده شود. حتی می‌توان این نوع را به صورت صریحی نیز مشخص کرد:

<TableTemplate Items="pets" TItem="Pet">

این مورد زمانی مفید است که چندین پارامتر جنریک را در کامپوننت تعریف کرده باشیم:

<SomeGenericComponent TParam1="Person" TParam2="Supplier" TItem=etc/>

و یا می‌توان نام پارامتر ویژه‌ی context@ را در تمام RenderFragmentهای جنریک، با ذکر ویژگی Context برای مثال به pet تغییر داد:

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

و یا حتی می‌توان این نام را به صورت اختصاصی به ازای هر RenderFragment جنریک، مشخص کرد. برای اینکار ویژگی Context را دقیقا بر روی RenderFragment مدنظر قرار می‌دهیم:

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

این تغییرنام بهتر است زمانی صورت گیرد که نام پیش‌فرض context، با نام مشابه دیگری در کامپوننت جاری، تداخل پیدا کرده‌است.

‫۳ سال و ۵ ماه قبل، یکشنبه ۵ اردیبهشت ۱۴۰۰، ساعت ۱۴:۴۴

وحید نصیری

مطالب

iTextSharp و نمایش صحیح تاریخ در متنی راست به چپ

خروجی PDF زیر را در نظر بگیرید:

مشکلی را در آن مشاهده می‌کنید؟ اصل آن یا صحیح آن باید به شکل زیر باشد:

و این وارونه نمایش دادن‌ها، دقیقا مشکلی است که حین کار با iTextSharp برای نمایش متنی مثلا به همراه یک تاریخ شمسی وجود دارد. البته این مشکل هم اساسا به خود استاندارد یونیکد برمی‌گرد که یک سری کاراکتر را «کاراکتر ضعیف» معرفی کرده؛ برای مثال کاراکتر اسلش بکار رفته در یک تاریخ هم از این دست است. بنابراین PDF تولیدی توسط iTextSharp از دید استاندارد یونیکد مشکلی ندارد، زیرا یک «نویسه ضعیف» مثل اسلش نمی‌تواند جهت را تغییر دهد؛ مگر اینکه از یک «نویسه قوی» برای دستکاری آن استفاده شود. برای مثال این نویسه‌ها قوی هستند:

U+202A:   LEFT-TO-RIGHT EMBEDDING (LRE) 
U+202B:   RIGHT-TO-LEFT EMBEDDING (RLE) 
U+202D:   LEFT-TO-RIGHT OVERRIDE (LRO) 
U+202E:   RIGHT-TO-LEFT OVERRIDE (RLO) 
U+202C:   POP DIRECTIONAL FORMATTING (PDF)

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

using System;
using System.Diagnostics;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.pdf;

namespace RleTests
{
    class Program
    {
        const char RightToLeftEmbedding = (char)0x202B;
        const char PopDirectionalFormatting = (char)0x202C;

        static string FixWeakCharacters(string data)
        {
            if (string.IsNullOrWhiteSpace(data)) return string.Empty;
            var weakCharacters = new[] { @"\", "/", "+", "-", "=", ";", "$" };
            foreach (var weakCharacter in weakCharacters)
            {
                data = data.Replace(weakCharacter, RightToLeftEmbedding + weakCharacter + PopDirectionalFormatting);
            }
            return data;
        }

        static void Main(string[] args)
        {
            using (var pdfDoc = new Document(PageSize.A4))
            {
                PdfWriter.GetInstance(pdfDoc, new FileStream("Test.pdf", FileMode.Create));
                pdfDoc.Open();

                FontFactory.Register("c:\\windows\\fonts\\Arial.ttf");
                Font tahoma = FontFactory.GetFont("Arial", BaseFont.IDENTITY_H);

                var table1 = new PdfPTable(1);
                table1.WidthPercentage = 100;

                var pdfCell = new PdfPCell
                {
                    RunDirection = PdfWriter.RUN_DIRECTION_RTL,
                    Border = 0,
                    Phrase = new Phrase(FixWeakCharacters(
                        "تاریخ: " + "1390/11/18" + Environment.NewLine +
                        "شماره پروژه: " + "1/2/3/4/56" + Environment.NewLine +
                        "اسلش: " + " 12/A/13 " + Environment.NewLine +
                        "بک اسلش: " + "  12\\13\\14 " + Environment.NewLine +
                        "مساوی و جمع: " + " 2+3=5 " + Environment.NewLine +
                        "سمی کولون: " + " 2=1+1; " + Environment.NewLine +
                        "دلار: " + "12$" + Environment.NewLine +
                        "کاما: " + "12,34,67" + Environment.NewLine +
                        "نقطه: " + "12.34" + Environment.NewLine +
                        "پرانتز: " + "متن (ساده)"
                        ),
                        tahoma)
                };

                table1.AddCell(pdfCell);
                pdfDoc.Add(table1);

            }

            Process.Start("Test.pdf");
        }
    }
}

از این نوع مشکلات حین کار با HTML هم هست؛ وارونه نمایش داده شدن تاریخ فارسی در بین یک متن راست به چپ. البته در آنجا راه حل زیر هم توصیه شده (بدون نیاز به دستکاری نویسه‌ها):

<span dir="ltr" style="display:inline">1390/11/19</span>

‫۱۲ سال و ۹ ماه قبل، چهارشنبه ۱۹ بهمن ۱۳۹۰، ساعت ۲۳:۱۵

وحید نصیری

مطالب

iTextSharp و نمایش صحیح تاریخ در متنی راست به چپ

خروجی PDF زیر را در نظر بگیرید:

مشکلی را در آن مشاهده می‌کنید؟ اصل آن یا صحیح آن باید به شکل زیر باشد:

و این وارونه نمایش دادن‌ها، دقیقا مشکلی است که حین کار با iTextSharp برای نمایش متنی مثلا به همراه یک تاریخ شمسی وجود دارد. البته این مشکل هم اساسا به خود استاندارد یونیکد برمی‌گردد که یک سری کاراکتر را «کاراکتر ضعیف» معرفی کرده؛ برای مثال کاراکتر اسلش بکار رفته در یک تاریخ هم از این دست است. بنابراین PDF تولیدی توسط iTextSharp از دید استاندارد یونیکد مشکلی ندارد، زیرا یک «نویسه ضعیف» مثل اسلش نمی‌تواند جهت را تغییر دهد؛ مگر اینکه از یک «نویسه قوی» برای دستکاری آن استفاده شود. برای مثال این نویسه‌ها قوی هستند:

U+202A:   LEFT-TO-RIGHT EMBEDDING (LRE) 
U+202B:   RIGHT-TO-LEFT EMBEDDING (RLE) 
U+202D:   LEFT-TO-RIGHT OVERRIDE (LRO) 
U+202E:   RIGHT-TO-LEFT OVERRIDE (RLO) 
U+202C:   POP DIRECTIONAL FORMATTING (PDF)

using System;
using System.Diagnostics;
using System.IO;
using iTextSharp.text;
using iTextSharp.text.pdf;

namespace RleTests
{
    class Program
    {
        const char RightToLeftEmbedding = (char)0x202B;
        const char PopDirectionalFormatting = (char)0x202C;

        static string FixWeakCharacters(string data)
        {
            if (string.IsNullOrWhiteSpace(data)) return string.Empty;
            var weakCharacters = new[] { @"\", "/", "+", "-", "=", ";", "$" };
            foreach (var weakCharacter in weakCharacters)
            {
                data = data.Replace(weakCharacter, RightToLeftEmbedding + weakCharacter + PopDirectionalFormatting);
            }
            return data;
        }

        static void Main(string[] args)
        {
            using (var pdfDoc = new Document(PageSize.A4))
            {
                PdfWriter.GetInstance(pdfDoc, new FileStream("Test.pdf", FileMode.Create));
                pdfDoc.Open();

                FontFactory.Register("c:\\windows\\fonts\\Arial.ttf");
                Font tahoma = FontFactory.GetFont("Arial", BaseFont.IDENTITY_H);

                var table1 = new PdfPTable(1);
                table1.WidthPercentage = 100;

                var pdfCell = new PdfPCell
                {
                    RunDirection = PdfWriter.RUN_DIRECTION_RTL,
                    Border = 0,
                    Phrase = new Phrase(FixWeakCharacters(
                        "تاریخ: " + "1390/11/18" + Environment.NewLine +
                        "شماره پروژه: " + "1/2/3/4/56" + Environment.NewLine +
                        "اسلش: " + " 12/A/13 " + Environment.NewLine +
                        "بک اسلش: " + "  12\\13\\14 " + Environment.NewLine +
                        "مساوی و جمع: " + " 2+3=5 " + Environment.NewLine +
                        "سمی کولون: " + " 2=1+1; " + Environment.NewLine +
                        "دلار: " + "12$" + Environment.NewLine +
                        "کاما: " + "12,34,67" + Environment.NewLine +
                        "نقطه: " + "12.34" + Environment.NewLine +
                        "پرانتز: " + "متن (ساده)"
                        ),
                        tahoma)
                };

                table1.AddCell(pdfCell);
                pdfDoc.Add(table1);

            }

            Process.Start("Test.pdf");
        }
    }
}

<span dir="ltr" style="display:inline">1390/11/19</span>

‫۱۲ سال و ۹ ماه قبل، چهارشنبه ۱۹ بهمن ۱۳۹۰، ساعت ۲۳:۱۵

علیرضا آرانی

نظرات مطالب

اعتبارسنجی مبتنی بر کوکی‌ها در ASP.NET Core 2.0 بدون استفاده از سیستم Identity

بسیار ممنون. از این روش در پروژه دیگری استفاده کرده بودم و هرکاری می‌کردم بازهم خطای مذبور را دریافت می‌کردم. پس از چند روز مقایسه کدها، کاشف به عمل آمد که مشکل از نوع تزریق سرویس در کامپوننت می‌باشد. در پروژه برای تزریق سرویس از این روش استفاده کرده بودم:

@inherits OwningComponentBase 
...
private IUserInfoService userInfoService { get; set; } 
...
userInfoService = ScopedServices.GetRequiredService<IUserInfoService>();

که با تغییر آن به شکل زیر مشکل در سطح کامپوننت حل شد:

@inject IUserInfoService UserInfoService

اما مشکل هنوز در سطح سرویس وجود دارد. یعنی اگر از سرویس UserInfoService در سرویس دیگر به روش زیر استفاده شود، آنگاه خطا بروز می‌کند.

public class ManualLog: IManualLog
    {
    private readonly IUserInfoService _userInfoService;

    public ManualLog(IUserInfoService userInfoService)
            {
                _userInfoService = userInfoService ?? throw new ArgumentNullException(nameof(userInfoService));
            }

    public async task Log()
            {
                int userId = await _userInfoService.GetUserIdAsync();
             }
    }

پیام خطا مثل قبل:

 GetAuthenticationStateAsync was called before SetAuthenticationState

‫۱ سال و ۸ ماه قبل، یکشنبه ۱۱ دی ۱۴۰۱، ساعت ۱۲:۱۷

امیر ح

نظرات مطالب

Blazor 5x - قسمت 21 - احراز هویت و اعتبارسنجی کاربران Blazor Server - بخش 1 - افزودن قالب ابتدایی Identity

در پروژه asp.net core وقتی که بخواهید از کامپوننت‌ها استفاده کنید، ابتدا یک فولدر Components در لایه Web یا site اضافه میکنید که شامل کامپوننت‌های شما هست وسپس موارد زیر را باید به استارت‌آپ خود اضافه کنید:

services.AddServerSideBlazor ()
//............
endpoints.MapBlzorHub()

بعد اسکریپت زیر را به صفحه یا layout خود اضافه میکنید:

<script script src= _framework/blazor.server.js></script>

«نیاز به اضافه کردن فایلی نیست» و بعد کامپوننت خود را در صفحه مورد نظر رفرنس میدهید. ولی اگر بخواهید از کامپوننت‌ها در لایه ادمین استفاده کنید، ارور دریافت میکنید. فایل اسکریپتی رفرنس داده شده یافت نمیشود ، چون ابتدای آن ادمین یا اسم لایه شما درج میشود.

script src= admin/_framework/blazor.server.js

راه حلی که من در حال حاضر درنظر گرفتم «از سر ناچاری» این بود که صفحه ای که کامپوننت در اون استفاده شده بود رو به فولدر pages یعنی خارج از لایه‌ها آوردم و سپس دستی آدرس Layout ="" رو در بالای صفحه تغییر دادم. شما میدونید مشکل از چیست؟

‫۳ سال و ۵ ماه قبل، پنجشنبه ۱۶ اردیبهشت ۱۴۰۰، ساعت ۲۲:۲۳

وحید نصیری

مطالب دوره‌ها

اجزای جاوا اسکریپتی بوت استرپ 3

مباحث منوهای پایین افتادنی و برگه‌‌ها (tabs) در بوت استرپ 2 و 3 یکسان هستند و نکات آن‌ها در بحث «نگاهی به اجزای تعاملی Twitter Bootstrap» عنوان شده‌اند. در ادامه به اجزای جدیدی خواهیم پرداخت که مختص بوت استرپ 3 بوده و از تازه‌های آن به‌شمار می‌روند. همچنین اجزایی را که در بررسی بوت استرپ 2 به آن‌ها پرداخته نشد، مانند Carousels و Scroll spy، نیز بررسی می‌کنیم.

پنل‌ها و آکاردئون‌ها

پنل‌های آکاردئونی، بسیار شبیه به برگه‌ها عمل می‌کنند. با کلیک بر روی یک سربرگ، محتوای مخفی شده آن نمایش داده می‌شود. این اعمال نیز توسط اجزای جاوا اسکریپتی بوت استرپ، به کمک jQuery عمل می‌کنند.
یک مثال:

    <div class="container">
        <h4 class="alert alert-info">
            پنل آکاردئونی</h4>
        <div class="row">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#vacc" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-pushpin"></span>اطلاعات یک</a>
                        </h4>
                    </div>
                    <div id="vacc" class="panel-collapse collapse in">
                        <div class="panel-body">
                            <p>
                                متن متن متن متن .......</p>
                            <p>
                                <a href="#" class="btn btn-info">بیشتر >></a></p>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#checkups" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">
                                <span class="glyphicon glyphicon-ok"></span>اطلاعات 2</a>
                        </h4>
                    </div>
                    <div id="checkups" class="panel-collapse collapse">
                        <div class="panel-body">
                            <p>
                                متن متن متن متن .......</p>
                            <p>
                                <a href="#" class="btn btn-info">بیشتر >></a></p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- end accordion -->
        </div>
        <!-- end row -->
    </div>
    <!-- /container -->

توضیحات:
- ابتدا کل ناحیه مدنظر باید در یک div با کلاس panel-group محصور شود؛ به همراه یک id دلخواه. از این id در ویژگی‌های data-parent عنوان‌های هر پنل این گروه استفاده می‌شود. به این ترتیب سیستم جاوا اسکریپتی آن متوجه خواهد شد که باید داخل چه ناحیه‌ای از صفحه عمل کند.
- پس از مشخص سازی آغاز پنل گروهی مدنظر، هر گروه، داخل یک div با کلاس panel panel-default قرار خواهد گرفت. به این ترتیب اولین پنل آکاردئونی مثال، شکل می‌گیرد.
- سپس داخل هر پنل مجزا، باید توسط panel-heading مشخص کنیم که عنوان این پنل و محتوای خاص این عنوان کجا باید قرار گیرند. همچنین به کمک panel-collapse collapse in، محتوایی را که با کلیک بر روی عنوان هر پنل به صورت خودکار ظاهر خواهد شد را معرفی می‌کنیم.
در ادامه می‌توان پنل‌های بیشتری را به این مجموعه و گروه افزود.
- پنلی که قرار است در ابتدای کار باز باشد، دارای کلاس collapse in خواهد بود؛ مابقی فقط collapse دارند.

بررسی کامپوننت Carousels

بوت استرپ به همراه کامپوننت اسلایدشو توکاری است به نام Carousel که بدون نیاز به حتی یک سطر کدنویسی جاوا اسکریپت اضافی، یک اسلاید شو بسیار حرفه‌ای را ارائه می‌دهد. مثالی را در این مورد در ادامه ملاحظه می‌کنید:

    <div class="container">
        <h4 class="alert alert-info">
            اسلاید شو</h4>
        <div class="row">
            <div id="myCarousel" class="carousel slide">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>
                <!-- carousel-indicators -->
                <section class="carousel-inner">
                    <div class="active item">
                        <img src="images/01.jpg" alt="Photo 1"></div>
                    <div class="item">
                        <img src="images/02.png" alt="Photo 2"></div>
                    <div class="item">
                        <img src="images/03.jpg" alt="Photo 3"></div>
                </section><!-- carousel-inner -->
                <a href="#myCarousel" class="left carousel-control" data-slide="prev"><span class="glyphicon glyphicon-chevron-left">
                </span></a><a href="#myCarousel" class="right carousel-control" data-slide="next"><span
                    class="glyphicon glyphicon-chevron-right"></span></a>
            </div>
            <!-- myCarousel -->
        </div>
        <!-- end row -->
    </div>

توضیحات:
- در قسمت carousel-inner این کامپوننت، لیست تک تک تصاویر مورد نیاز قرار خواهند گرفت. تصویر آغازین دارای div ایی محصور کننده با کلاس active item است و مابقی کلاس item دارند.
- مرحله بعد، کار افزودن سیستم راهبری و حرکت بین تصاویر اضافه شده است. این سیستم چیزی نیست جز چند لینک مزین شده با کلاس‌های left carousel-control و همچنین right carousel-control. ویژگی‌های data-slide این لینک‌ها نیز مشخص کننده اعمالی هستند که کامپوننت جاوا اسکریپتی carousel قرار است انجام دهد. برای مثال حرکت به قبل یا بعد. همچنین باید دقت داشت که href این لینک‌ها به id مرتبط با div اصلی دربرگیرنده این قسمت از صفحه اشاره می‌کند. از یک سری گلیف آیکن نیز برای نمایش فلش رو به چپ و راست نیز در اینجا استفاده شده است.
- قسمت لیست مرتبط دارای کلاس carousel-indicators، در حقیقت مشخص کننده سه دایره کوچکی است که در تصویر فوق ملاحظه می‌کنید. به ازای هر تصویر، یک مورد را باید افزود. در اینجا data-target هر آیتم به id مرتبط با div محصور کننده کل اسلایدشو اشاره می‌کند. data-slide-toها به شماره تصویر متناظر هر آیتم متصل خواهند شد. ایندکس آغازین این آیتم‌ها از صفر شروع می‌شود.

بررسی کامپوننت Scroll spy

اگر به مستندات رسمی بوت استرپ مراجعه کنید، منوی کنار صفحه با لغزش صفحه به سمت پایین ثابت است؛ اما به ازای هر سرفصل جدیدی در صفحه، آیتم فعال این منو نیز به صورت خودکار تغییر می‌کند. این قابلیت توسط کامپوننت Scroll spy ایجاد شده است. یک مثال:

<body id="articles" data-spy="scroll" data-target=".scrollspy">
    <div class="container">
        <h4 class="alert alert-info">
            Scroll spy</h4>
        <div id="articlesindex" class="row">
            <section class="scrollspy clearfix col col-lg-3 hidden-sm">
                <ul class="nav nav-list affix">
                    <li><a href="#item1"><span class="glyphicon glyphicon-user"></span>Item 1</a></li>
                    <li><a href="#item2"><span class="glyphicon glyphicon-user"></span>Item 2</a></li>
                    <li><a href="#item3"><span class="glyphicon glyphicon-user"></span>Item 3</a></li>
                </ul>
                <!-- nav-list -->
            </section><!-- scrollspy -->
            <section class="col col-lg-9">
                <article id="item1" class="media">
                    <h2>
                        item1</h2>
                    <div class="media-body">
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                    </div>
                </article>
                <article id="item2" class="media">
                    <h2>
                        item2</h2>
                    <div class="media-body">
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                    </div>
                </article>
                <article id="item3" class="media">
                    <h2>
                        item3</h2>
                    <div class="media-body">
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                        <p>
                            متن متن متن ............متن متن متن ............متن متن متن .............</p>
                    </div>
                </article>
            </section><!-- artistinfo -->
        </div>
        <!-- end row -->
    </div>
    <!-- /container -->
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="Scripts/bootstrap-rtl.js"></script>
</body>

توضیحات:
- کار با ایجاد یک section جدید که حاوی منوی ثابت کنار صفحه است، شروع می‌شود. این section دارای کلاس scrollspy می‌باشد. داخل این section لیست عناوین منو قرار می‌گیرند که ul آن دارای کلاس nav nav-list affix خواهد بود. affix سبب می‌شود تا این لیست در کنار صفحه ثابت نمایش داده شود و همواره نمایان باشد.
- نکته مهم لیست آیتم‌های منو، مقادیر href لینک‌های آن است. این مقادیر باید به id محتوای متناظر اشاره کنند. این محتواها را در ادامه‌ی کار ملاحظه می‌کنید.
- به علاوه اگر به تگ body در ابتدای کار دقت کرده باشید، ویژگی‌های data-spy و هدفی که قرار است تحت نظر قرار گیرد به آن اضافه شده‌است.
- تا اینجا این سیستم کار می‌کند؛ اما اگر صفحه را به بالا و پایین حرکت دهید، پس زمینه آیتم فعال، تغییر رنگ نمی‌دهد. برای این منظور نیاز است، به CSS سفارشی خود، چند سطر ذیل را اضافه کرد:

.scrollspy .nav > li.active{
   background: lightgray;
}

فایل‌های نهایی این قسمت را از اینجا نیز می‌توانید دریافت کنید:
bs3-sample04.zip

‫۱۰ سال و ۱۲ ماه قبل، چهارشنبه ۱ آبان ۱۳۹۲، ساعت ۰۳:۰۰