گاهی اوقات در برنامه های MVC نیاز به نمایش تصویر در combobox یا dropdownlist می باشد. در سراسر اینترنت درباره این موضوع نمونه هایی وجود دارد که از روش های سخت و پیچیده ای برای انجام این کار استفاده شده است. راه هایی مانند پلاگین ddslick ، jquery + msdropdown ، jquery. استفاده از Component هم برای انجام کار به این کوچکی نیز نمی تواند کار درستی باشد. در این مقاله با روشی آسان و ساده برای انجام این کار آشنا خواهید شد.

پیش زمینه

HTML dropdownlist از تصاویر پشتیبانی نکرده و در صورت استفاده از <style> مانند مثال زیر :
 

<select>
     <option style="background-image:url(images/volvo.png);" value="volvo">Volvo</option>
     <option style="background-image:url(images/saab.png);" value="saab">Saab</option>
     <option style="background-image:url(images/honda.png);" value="honda">Honda</option>
     <option style="background-image:url(images/audi.png);" value="audi">Audi</option>
</select>

تنها مرورگر فایرفاکس آن را نمایش داده و مرورگر های دیگر از آن پشتیبانی نمی کنند از این رو نیاز به ساخت یک combobox به همراه تصویر سفارشی که قابل پشتیبانی در همه مرورگرها باشد وجود دارد.

طراحی

مرحله اول : ساخت تگ Div

<div class="customCombobox" id="customCombobox1"></div>

کد بالا یک تگ DIV ایجاد می کند. حالا یک کلاس css برای استایل دادن به Combobox ایجاد می نماییم.

.customCombobox {
        width: 120px;
        height: 22px;
        border: 1px solid black;
        background-image: url('../../Images/down.png');
        background-repeat: no-repeat;
        background-position: right;
        margin: 0;
        padding: 0;
        cursor: pointer;
        align-content: center;
    }

پس از استایل دادن و اجرای صفحه تگ DIV مانند زیر خواهد شد :

مرحله اول ساخت combobox یا dropdown با تصویر سفارشی با موفقیت انجام شد.

مرحله 2 : ساخت ul و li برای dropdown

در اینجا یک dropdown با استفاده از لیست های نا مرتب (Unorder list) می سازیم. برنامه نویسان تازه کار می توانند به این لینک رفته تا کار با Unorder list ها را یاد بگیرند.

<ul class="ulcustomCombobox" id="ulcustomCombobox1">
    <li id="1"><a><img src="~/Images/fb.png" class="imgDisplay" />
       <p class="imageText">فیسبوک</p></a>
    </li>
    <li id="2"><a><img src="~/Images/twitter.png" class="imgDisplay" />
       <p class="imageText">توییتر</p></a>
    </li>
    <li id="3"><a><img src="~/Images/orkut.png" class="imgDisplay" />
       <p class="imageText">اورکات</p></a>
    </li>
</ul>

قطعه کد html فوق برای نمایش آیتم های dropdown می باشد. شما همچنین می توانید با استفاده از تگهای table و div آیتم های dropdown را نمایش دهید. در اینجا تنها از تگهای p و img برای نمایش تصویر و متن تصویر استفاده شده است. یک img و p برای نمایش هر آیتم dropdown.

css زیر برای استایل دادن به dropdown می باشد:

    .ulcustomCombobox {
        display: none; /*hide dropdown by default*/
        width: 120px;
        background-color: white;
        border: 1px solid black;
        border-top: none;
        margin: 0;
        padding: 0;
        position:absolute;
    }

Display : none : بصورت پیش فرض dropdown را پنهان می کند. (بعدا با استفاده از جی کوئری آن را آشکار می نماییم)

برای border دادن به آیتم های dropdown list از کد زیر استفاده می کنیم :

.ulcustomCombobox li {
            border-top: 1px solid gray;
            height: 22px;
        }

همچنین برای تغییر رنگ پس زمینه و افکت دادن به آیتم ها در هنگام mouse over از کد زیر استفاده می کنیم :

.ulcustomCombobox li:hover{
            background-color:lightblue;
            cursor:pointer;
        }

همچنین برای وسط چین کردن از کدهای زیر استفاده می کنیم :

 

 .imgDisplay{
            display:inline;
            vertical-align:middle;
        }

            .imageText{
                display:inline;
                vertical-align:middle;
                padding-left:5px;
            }

حالا برای درآوردن dropdown از حالت پنهان از جی کوئری زیر استفاده می شود :
 

<script>
    $(document).ready(function () {
        $("#customCombobox1").click(function () {
            //Get ul tag
            var dropDwn = $(this).next();
            //Show Dropdown
            if (dropDwn.is(":visible"))
                dropDwn.hide();
            else
                dropDwn.show();
        })
    });
</script>

لازم به ذکر است که باید ابتدا از کد زیر برای رفرنس دادن فایل جی کوئری به صفحه استفاده نماییم:

<script type="text/javascript" src="~/Scripts/jquery-1.8.2.js"></script>

حال اگر صفحه را اجرا گرفته و روی dropdown کلیک کنیم مانند زیر خواهد بود :

همچنین برای رویداد کلیک و همچنین انتخاب آیتم های dropdownl از کد زیر استفاده می نماییم:

//Dropdown element click
        $("#ulcustomCombobox1 li").click(function () {
            //Get div tag
            var cmbBox = $(this).parent().prev();
            //Set div tag text/image
            cmbBox.html($(this).html());
            //alert selected element id
            alert("Selected Id:" +  $(this).attr("id"));
            //Hide Dropdown
            $(this).parent().hide();
        });

حال می خواهیم زمانیکه کاربر جایی بیرون از dropdown کلیک انجام داد dropdown خودبه خود بسته شود :

 

 //Hide Dropdown If User click outside 
        $(document).on('click', function (e) {
            var element, evt = e ? e : event;
            if (evt.srcElement)
                element = evt.srcElement;
            else if (evt.target)
                element = evt.target;
            //Hide if clicked outside
            if (element.className != "customCombobox") {
                $("ul.ulcustomCombobox").hide();
            }
        });