selectstyle.moxes.js

About

selectstyle.moxes.js is jQuery plugin which replaces the <select> tag with stylable div ans span boxes, but continue to act as select box.

Usage

Simple usage: 
<script type="text/javascript" src="selectstyle.moxes.js"></script>

<select name="foo">
    <option value="1">First value</option>
    <option value="2">Second value</option>
</select>

<script>$('select').selectstyle();</script>
This code generates: 
<span class="ssm-holder ssm-open">  // ssm-open if the span is open
    <div class="ssm-current ssm-hover"></div> // ssm-hover if the span is open
    <div class="ssm-values">
        <div rel="1">First value</div>
        <div rel="2" class="ssm-selected">Second value</div>
        // ssm-selected if selected value
    </div>
</span>

Examples

Example 1:

HTML:

<select name="example1" id="example1" class="example1" onchange="alert( this.value )">
     <option value="1">Value value 1</option>
     <option value="2">Value value 2</option>
     <option value="3">Value value 3</option>
     <option value="4">Value value 4</option>
</select>
<script>$('#example1').selectstyle();</script>

CSS:

.example1 .ssm-current, .example1 .ssm-option {
     background: #444;
     padding: 4px 8px;
     cursor: pointer;
}
.example1 .ssm-option:hover {
     color: #fff;
}

Example 2 (Fade effect):

HTML:

<select name="example2" id="example2" class="example2">
   <option value="1">Value value 1</option>
   <option value="2">Value value 2</option>
   <option value="3">Value value 3</option>
   <option value="4">Value value 4</option>
</select>
<script>$('#example2').selectstyle({effect: 'fade'});</script>

CSS:

.example2 .ssm-current, .example2 .ssm-option {
     background: #444;
     padding: 4px 8px;
     cursor: pointer;
}
.example2.ssm-open .ssm-current, .example2.ssm-open .ssm-option {
     background: rgba( 130, 130, 130, 0.8 );
}
.example2 .ssm-option:hover {
     background: rgba( 80, 80, 80, 0.8 );
}

Example 3 (Slide effect):

HTML:

<select name="example3" id="example3" class="example3">
     <option value="1">Value 1</option>
     <option value="2">Value 2</option>
     <option value="3">Value 3</option>
     <option value="4">Value 4</option>
</select>
<script>$('#example1').selectstyle({ effect: 'slide' });</script>

CSS:

.example3 .ssm-current, .example3 .ssm-values {
     background: #444;
     border-radius: 5px;
     border: 1px solid #666;
     cursor: pointer;
}
.example3.ssm-open .ssm-current, .example3.ssm-open .ssm-values {
     background: rgba( 50, 50, 50, 0.8 );
}
.example3 .ssm-current, .example3 .ssm-option {
     padding: 4px 8px;
     white-space: nowrap;
}
.example3 .ssm-values {
     padding-bottom: 4px;
     border-width: 0 1px 1px 1px;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
.example3 .ssm-hover {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
}
.example3 .ssm-selected, .example3 .ssm-values div:hover {
     background: rgba( 90, 90, 90, 0.6 );
}

Example 4 (With images):

HTML:

<select name="example4" id="example4" class="example4">
     <option value="1" data-image="/data/uploads/gallery/flags/gb.png">United Kingdom</option>
     <option value="2" data-image="/data/uploads/gallery/flags/us.png">United states</option>
     <option value="3" data-image="/data/uploads/gallery/flags/bg.png">Bulgaria</option>
</select>
<script>$('#example4').selectstyle({effect: 'slide', width: 'auto'});</script>

CSS:

.example4 .ssm-current, .example4 .ssm-option {
     background: #111;
     padding: 4px 8px;
     line-height: 32px;
}
.example4 .ssm-option, .example4 .ssm-current {
     white-space: nowrap;
     width: 150px;
     cursor: pointer;
}
.example4 img {
     vertical-align: middle;
     margin-right: 4px;
}
.example4 .ssm-option:hover {
     background: #333;
}

Categories

Blog tags