jquery+html+css

всем известно, что <select> верстке не поддается(по крайней мере я не находил материала на данную темы), поэтому создадим свой...
HTML:
<div class=\"select\">
<span class=\"value\">выбрать</span>
<a class=\"click_select\" ></a>
<div class=\"select_value_list\">
<a class=\"select_value\" id=\"1\">выбор1</a>
<a class=\"select_value\" id=\"2\">выбор2</a>
<a class=\"select_value\" id=\"3\">выбор3</a>
<a class=\"select_value\" id=\"4\">выбор4</a>
<a class=\"select_value\" id=\"5\">выбор5</a>
<a class=\"select_value\" id=\"6\">выбор6</a>
<a class=\"select_value\" id=\"7\">выбор7</a>
<a class=\"select_value\" id=\"8\">выбор8</a>
<a class=\"select_value\" id=\"9\">выбор9</a>
<a class=\"select_value\" id=\"0\">выбор0</a>
</div>
</div>
================================
CSS:
a{cursor:pointer;}
.select{
box-shadow: 0px 0px 1px;
width: 200px;
height: 30px;
margin: auto;
text-align: center;
}
a.click_select{
background: silver;
float: right;
width: 35px;
height: 30px;
}
span.value{
position: relative;
top: 5px;
}
div.select_value_list{
box-shadow: 0px 0px 1px;
position: relative;
top: 1px;
overflow: auto;
clear: both;
display: none;
}
a.select_value{
height: 20px;
width: 200px;
float: left;
}
a.select_value:hover{
background: rgb(0, 153, 255);
}
================================
JQUERY:
//открываем список
$(\'a.click_select\').click(function(){
$(\'div.select_value_list\').slideToggle(150);
});
//делаем выбор
$(\'a.select_value\').click(function(){
var value=$(this).text();//получаем текст выбора
var id=$(this).attr(\'id\');//получаем id выбора
$(this).parents(\'div.select_value_list\').siblings(\'span.value\').text(value);//записываем текст выбора
$(this).parents(\'div.select_value_list\').siblings(\'span.value\').attr(\'id\',id);//записываем id выбора
$(\'div.select_value_list\').slideUp(150);//закрываем список
});
//контроль закрытия
$(\'body\').mouseup(function(){
$(\'div.select_value_list\').slideUp(150);
});
=================================
проверенно для WEB.
так же не забудьте подключить jquery)))
=================================
P.S. тему создал специально для дальнейшего пополнения.

Изм. 2 раз. / Посл. изм.

anti_dot 2.24

(13 июл 2013, 01:48)

норм))

РЕЗИНОВЫЙ КОНТЕНТ
-----------------
как правило все страницы состоят из 3-х частей:
-шапка;
-рабочее поле;
-низ;
------------------
но вот беда... рабочее поле настолько мало, что низ заканчивается на середине экрана... вот способ это изменить)
HTML:
<div class=\"head\"></div>
<div class=\"content\"></div>
<div class=\"foot\"></div>
CSS:
div.head{height: 80px;}
.content{}
.foot{height: 80px;}
JQUERY:
function size_document(){
//обнулим значения
$(\'.content\').css({\'min-width\':0,\'min-height\':0});
//ширина окна
var Y = $(window).width();
//высота окна
var X = $(window).height();
//160-высота шапки и низа
var content_X=parseInt(X)-160;
//устанавливаем минимальный размер контента
$(\'.content\').css({\'min-width\':Y,\'min-height\':content_X});
}
$(document).ready(function(){
//запускаем функцию при загрузке документа
size_document();
//запускаем функцию при изменении размера окна
$(window).resize(function(){
size_document();
});
});

Привет всем! все наверное знают что такое flash... в архиве ниже выложен слайдер на jquery(был написан для Web-проекта), который имитирует flash-анимацию
==============================================================================
при создании не забываем прописать в css position: relative/absolute, z-index
и эффекты элементам там где это необходимо
==============================================================================
в jq коде есть настройки, которые регулируют скорость анимации/задержки элементов
==============================================================================
возможно код не очень красивый) но работает и справляется с поставленной задачей)

Прикрепленные файлы:
PROFIWM_RU_287_444620_slider.zip (775.97 кб)

третий пост можно и в css прописать минимальную ширину , зачем сложности такие?

разве у всех одинаковые экраны?) а тут автоматом подстраивается под каждый...