Selectbox Style – Görsel kullanarak custom selectbox yapmak.

1 Cevap

İmage kullanarak custom bir select box (combo box) hazırlıyoruz.

Önce Javascript kodumuzu yazıyoruz:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){  

        if (!$.browser.opera) {

            // select element styling
            $('select.select').each(function(){
                var title = $(this).attr('title');
                if( $('option:selected', this).val() != ''  ) title = $('option:selected',this).text();
                $(this)
                    .css({'z-index':10,'opacity':0,'-khtml-appearance':'none'})
                    .after('<span class="select" style="padding-top:3px;">' + title + '</span>')
                    .change(function(){
                        val = $('option:selected',this).text();
                        $(this).next().text(val);
                        })
            });

        };

    });
// ]]></script>

Daha sonra Cssimizi yazıyoruz:

1
2
3
4
5
6
7
8
9
10
11
<style>
body {margin:0;}
.clear{clear:both;}
img {border:none;}
form div{position:relative;}
form div.variation1 label{display:block;line-height:26px;}
form div.variation2 label{float:left;width:100px;line-height:26px;}
form div.variation2 span.select{left:100px;}
select.select {position:relative;z-index:10;width:188px !important;height:32px !important;line-height:26px;}
span.select {position:absolute;bottom:0;float:left;left:0;width:188px;height:32px;line-height:26px;text-indent:10px;background:url(images/selectbox.jpg) no-repeat 0 0;cursor:default;  z-index:1;}
</style>

Son olarak ta html kodumuzu yazıyoruz:

1
2
3
4
5
6
7
8
<form action="" method="post">
<div>
<select class="select" title="Select one"> <option>Blue</option></select>
<select class="select" title="Select one"> <option>Red</option></select>
<select class="select" title="Select one"> <option>Green</option></select>
<select class="select" title="Select one"> <option>Yellow</option></select>
<select class="select" title="Select one"> <option>Brown</option></select></div>
</form>

Demo

PaylaşShare on Facebook0Share on Google+0Email this to someoneShare on LinkedIn0Tweet about this on TwitterPin on Pinterest0

“Selectbox Style – Görsel kullanarak custom selectbox yapmak.” için bir cevap

  1. Chnny diyor ki:
    28 Temmuz 2012, 17:18

    In the populate foiutncn, about line 1170 there is an ajax call $.ajax…Just before that, the variable param is created and populated. You can query the DOM and add the parameter to the list there. i.e. param[user_id’] = $(‘#user_id’).val();If you put your code on pastebin or something, I can help more.

    Cevapla

Bir Cevap Yazın