File size: 10.1Kb
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Примеры к статье "jQuery-скрипт для стилизации селектов html-форм"</title>
<link href="selectbox.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.selectbox.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 630px;
margin: 0 auto;
font: 14px/20px Arial, Tahoma, sans-serif;
color: #333;
}
h1 {
font-size: 25px;
font-weight: normal;
line-height: 1.1;
margin: 40px 0;
text-align: center;
}
a {
color: #0094D6;
}
p {
margin: 0 0 15px;
}
.section {
margin: 0 0 30px;
padding: 16px 20px 20px;
border: 1px solid #DDD;
}
.nowidth .selectbox .select,
.nowidth .selectbox .dropdown {
width: auto;
}
.maxheight .selectbox .dropdown {
max-height: 203px;
}
button {
height: 32px;
margin: 0 6px 0 0;
padding: 0 11px;
overflow: visible;
outline: none;
border: 1px solid #ccc;
border-bottom-color: #b3b3b3;
border-radius: 4px;
background: #F1F1F1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x;
box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1);
font: 14px/1 Arial, Tahoma, sans-serif;
text-shadow: 1px 1px #FFF;
color: #333;
cursor: pointer;
}
button::-moz-focus-inner {border:0;padding:0}
button:hover {
background-color: #E6E6E6;
background-position: 0 -10px;
}
button:active {
background: #f5f5f5;
box-shadow: inset 1px 1px 3px #DDD;
}
</style>
<script>
(function($) {
$(function() {
$('select').selectbox();
$('#add').click(function(e) {
$(this).parents('div.section').append('<br /><br /><select><option>-- Выберите --</option><option>Пункт 1</option><option>Пункт 2</option><option>Пункт 3</option><option>Пункт 4</option><option>Пункт 5</option></select>');
$('select').selectbox();
e.preventDefault();
})
$('#add2').click(function(e) {
var options = '';
for (i = 1; i <= 5; i++) {
options += '<option>Option ' + i + '</option>';
}
$(this).parents('div.section').find('select').each(function() {
$(this).append(options);
})
$('select').trigger('refresh');
e.preventDefault();
})
$('#che').click(function(e) {
$(this).parents('div.section').find('option:nth-child(5)').attr('selected', true);
$('select').trigger('refresh');
e.preventDefault();
})
})
})(jQuery)
</script>
</head>
<body>
<h1>Примеры к статье <br />"<a href="http://dimox.name/styling-select-boxes-using-jquery-css/">jQuery-скрипт для стилизации селектов html-форм</a>"</h1>
<div class="section">
<p><strong>Простой селект</strong> с несколькими пунктами, один из них неактивный.</p>
<select>
<option>-- Выберите --</option>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option disabled="disabled">Пункт 3</option>
<option>Пункт 4</option>
<option>Пункт 5</option>
</select>
<br /><br />
<button type="submit" name="" id="add">Добавить селект</button>
<button type="submit" name="" id="add2">Добавить пункты в список</button>
<button type="submit" name="" id="che">Выбрать "Пункт 4"</button>
</div>
<div class="section">
<p>Селект, имеющий пункт <strong>с длинным текстом</strong>.</p>
<select>
<option>-- Выберите --</option>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Какой-то пункт с очень длинным текстом, не влезающим в одну строку</option>
<option>Пункт 4</option>
<option>Пункт 5</option>
</select>
</div>
<div class="section nowidth">
<p>У этого селекта <strong>не указана ширина</strong>.</p>
<select>
<option>-- Выберите --</option>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Какой-то пункт с очень длинным текстом, не влезающим в одну строку</option>
<option>Пункт 4</option>
<option>Пункт 5</option>
</select>
</div>
<div class="section maxheight">
<p>Выпадающий список этого селекта <strong>органичен по высоте</strong>.</p>
<select>
<option>-- Выберите --</option>
<option>Пункт 11</option>
<option>Пункт 12</option>
<option>Пункт 13</option>
<option>Пункт 14</option>
<option>Пункт 15</option>
<option>Пункт 16</option>
<option>Пункт 17</option>
<option>Пункт 18</option>
<option>Пункт 19</option>
<option>Пункт 20</option>
<option>Пункт 21</option>
<option>Пункт 22</option>
<option>Пункт 23</option>
<option>Пункт 24</option>
<option>Пункт 25</option>
<option>Пункт 26</option>
<option>Пункт 27</option>
<option>Пункт 28</option>
<option>Пункт 29</option>
<option>Пункт 30</option>
</select>
</div>
<div class="section">
<p>Этот селект вставлен прямо <strong>посреди текста</strong>.</p>
какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст
<select>
<option>-- Выберите --</option>
<option>Пункт 1</option>
<option>Пункт 2</option>
<option>Пункт 3</option>
<option>Пункт 4</option>
<option>Пункт 5</option>
</select>
какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст какой-то текст
</div>
<div class="section">
<p>Селект <strong>с длинным списком</strong>, не ограниченным максимальной высотой.</p>
<select>
<option>-- Выберите --</option>
<option>Пункт 11</option>
<option>Пункт 12</option>
<option>Пункт 13</option>
<option>Пункт 14</option>
<option>Пункт 15</option>
<option>Пункт 16</option>
<option>Пункт 17</option>
<option>Пункт 18</option>
<option>Пункт 19</option>
<option>Пункт 20</option>
<option>Пункт 21</option>
<option>Пункт 22</option>
<option>Пункт 23</option>
<option>Пункт 24</option>
<option>Пункт 25</option>
<option>Пункт 26</option>
<option>Пункт 27</option>
<option>Пункт 28</option>
<option>Пункт 29</option>
<option>Пункт 30</option>
<option>Пункт 31</option>
<option>Пункт 32</option>
<option>Пункт 33</option>
<option>Пункт 34</option>
<option>Пункт 35</option>
<option>Пункт 36</option>
<option>Пункт 37</option>
<option>Пункт 38</option>
<option>Пункт 39</option>
<option>Пункт 40</option>
<option>Пункт 41</option>
<option>Пункт 42</option>
<option>Пункт 43</option>
<option>Пункт 44</option>
<option>Пункт 45</option>
<option>Пункт 46</option>
<option>Пункт 47</option>
<option>Пункт 48</option>
<option>Пункт 49</option>
<option>Пункт 50</option>
<option>Пункт 51</option>
<option>Пункт 52</option>
<option>Пункт 53</option>
<option>Пункт 54</option>
<option>Пункт 55</option>
<option>Пункт 56</option>
<option>Пункт 57</option>
<option>Пункт 58</option>
<option>Пункт 59</option>
<option>Пункт 60</option>
<option>Пункт 61</option>
<option>Пункт 62</option>
<option>Пункт 63</option>
<option>Пункт 64</option>
<option>Пункт 65</option>
<option>Пункт 66</option>
<option>Пункт 67</option>
<option>Пункт 68</option>
<option>Пункт 69</option>
<option>Пункт 70</option>
<option>Пункт 71</option>
<option>Пункт 72</option>
<option>Пункт 73</option>
<option>Пункт 74</option>
<option>Пункт 75</option>
<option>Пункт 76</option>
<option>Пункт 77</option>
<option>Пункт 78</option>
<option>Пункт 79</option>
<option>Пункт 80</option>
<option>Пункт 81</option>
<option>Пункт 82</option>
<option>Пункт 83</option>
<option>Пункт 84</option>
<option>Пункт 85</option>
<option>Пункт 86</option>
<option>Пункт 87</option>
<option>Пункт 88</option>
<option>Пункт 89</option>
<option>Пункт 90</option>
<option>Пункт 91</option>
<option>Пункт 92</option>
<option>Пункт 93</option>
<option>Пункт 94</option>
<option>Пункт 95</option>
<option>Пункт 96</option>
<option>Пункт 97</option>
<option>Пункт 98</option>
<option>Пункт 99</option>
<option>Пункт 100</option>
</select>
</div>
<div style="position: fixed; bottom: 5px; right: 10px;"><script><!--
document.write("<img src='http://counter.yadro.ru/hit?t26.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border=0 width=88 height=15>")
//--></script></div>
</body>
</html>