Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 31.08.2010, 09:12
Аспирант
Отправить личное сообщение для Ultimatum Посмотреть профиль Найти все сообщения от Ultimatum
 
Регистрация: 18.06.2010
Сообщений: 63

Ну мне кажется нельзя повлиять на select (display:none) при клике на которую он как раз и раскрываться, только если напрятать его средствами css.
Я буду делать дивами в которые вложу список LI который уберу в display:none и он будет подгружаться при событии onFocus и соответственно скрываться
Ответить с цитированием
  #12 (permalink)  
Старый 31.08.2010, 09:27
Аватар для Gozar
Отправить личное сообщение для Gozar Посмотреть профиль Найти все сообщения от Gozar
 
Регистрация: 07.06.2007
Сообщений: 7,504

Сообщение от float Посмотреть сообщение
Зачем что-то мудить...
Вы хотите другой вид селекта?
CSS не пробывали для начала?
float,
объясните нам всем неразумным, как раскрыть select по клику на input, средствами css?

может я чего недопонял и нужно было это:

<input type="text" id="inpt" onclick="document.getElementById('ku').style.visibility='visible'"><br>
<select multiple size="3" id="ku" style="visibility:hidden;" onclick="document.getElementById('inpt').value=this.options[this.selectedIndex].value;this.style.visibility='hidden'">
<option>одын</option>
<option selected>двысти дваццат восэм</option>
<option>тры</option>
<option>четыреста</option>
<option>чатыреста триццать</option>
</select>
__________________
Последний раз редактировалось Gozar, Сегодня в 24:14.
Ответить с цитированием
  #13 (permalink)  
Старый 31.08.2010, 11:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,109

Сообщение от Gozar
this.options[this.selectedIndex].value
value в Internet Explorer без DOCTYPE не сработает -- лучше this.options[this.selectedIndex].text если value в option явно не указано
Ответить с цитированием
  #14 (permalink)  
Старый 31.08.2010, 23:56
Аспирант
Отправить личное сообщение для Ultimatum Посмотреть профиль Найти все сообщения от Ultimatum
 
Регистрация: 18.06.2010
Сообщений: 63

Сделаю, выложи своё. Правда с дизом, потому что делаю под свой проект. Думаю к субботе закончу. Почему так долго, потому что буду прикручивать ajax+json+php+mysql+....генерация самописного select на основе вводов input.

Ну а общими усилиями поможете оптимизировать код )

Последний раз редактировалось Ultimatum, 31.08.2010 в 23:58.
Ответить с цитированием
  #15 (permalink)  
Старый 01.09.2010, 01:34
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

Цитата:
объясните нам всем неразумным, как раскрыть select по клику на input, средствами css?
Никак. Я ж код не смотрел, так, на картинки глянул
Ответить с цитированием
  #16 (permalink)  
Старый 01.09.2010, 01:50
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

Хм... а вы вообще уверены, что там именно селект?
Походу просто муляж.
Цитата:
Как сделать все как в контакте я знаю но как скрыть select то что указано стрелкой я недоуминеваю.
Они там ничего и не скрывают... вы огнежукам вообще открывали?!
Ответить с цитированием
  #17 (permalink)  
Старый 01.09.2010, 06:08
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

Цитата:
объясните нам всем неразумным, как раскрыть select по клику на input, средствами css?
Озадачил блин.
Ну пусть не только css...

вот набросал... перед сном))

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
	<title></title>
	<style>
		input {border: 1px solid #000; width: 300px;}
		select {width: 300px; display: none;}
	</style>
	</head>
<body>

<form>
<input id="put" type="text" onclick="show()" onblur="show()" /><br />
<select size="5" id="inp">
	<option>1</option>
	<option>2</option>
	<option>3</option>
</select>
</form>

<script>
	function show() {
		document.getElementById('inp').style.display = (document.getElementById('inp').style.display == 'block')?'none':'block';
		try {document.getElementById('put').value = document.getElementById('inp').options[document.getElementById('inp').selectedIndex].text;} catch(e){}
	}
</script>

</body>
</html>

Последний раз редактировалось float, 01.09.2010 в 06:10.
Ответить с цитированием
  #18 (permalink)  
Старый 03.09.2010, 22:35
Аспирант
Отправить личное сообщение для Ultimatum Посмотреть профиль Найти все сообщения от Ultimatum
 
Регистрация: 18.06.2010
Сообщений: 63

Снова поднимаю тему ))
Есть некий input, задача которого принять от пользователя данные.
Если данные есть уже в списке, который автоматически раскрывается,
то пользователь просто выберет нужную ему категорию и продолжит создание темы.
А если название новое и пользователь не нашел нужной ему категории в списке, то список не
закрывается при клике на другой участок браузера ,
как происходит скажем при клике(onBlur).Как мне сделать, чтобы список закрывался при onBlur
или другом событии, не могу понять как довести до идеала или что-то похожее было на правду.

Так же прошу помощи в исправлениях моих ошибках в коде и оптимизации JS

http://lovelife.su/newtime
В последствии всё это будет подгужаться с помощь ajax в виде json

// var slovos = new Array();
var s_json = new Array();
var oldValue;
// var reps		 = new Array();
// var list		 = new Array();
// var greats		 = new Array();
var lis_input_catalog = 'Введите название';
var lis_new_catalog = 'Новая категория';
var lis_start = '<div style="margin-top:20px;position:absolute;background-color:#fff;border-bottom:1px solid #cde;border-left:1px solid #cde;border-right:1px solid #cde;">' +
				'<div class="result_list result_list_scrollable">' +
				'<ul class="list" style="padding: 0px 0px 3px 0px;margin:0px 0px 0px 0px;">' +
				'<li onmouseover="this.style.backgroundColor=\'#91abc4\';this.style.color=\'#fff\';"'+ 
				'onmouseout="this.style.backgroundColor=\'#e9e9e9\';  	this.style.color=\'#000\';"'+ 
				'onclick="d_list()" id="noin">';
var lis_end	=  '</lu></div></div>';

s_json['id'] = [ 1, 3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18];
s_json['j'] = ['Крокодил гена','пока','земля','сон','провод',
'магазин','авто','ав','басы','участок',
'перевод','старт','ГИБДД','Пятница','Путин',
'Москва','Санкт-Питербург','клаксон'
];
function activate_select(){
setInterval(function (){

			if (document.getElementById('stail').value != oldValue)
				{ 
					oldValue =	document.getElementById('stail').value;
					if(oldValue.length	!= ''){
					// input fool
					// функция формирования и проверки массива
					 document.getElementById('selectwrite').innerHTML = ''; 
					 space = search_json(oldValue)
					 
						 if(space != ''){
						 document.getElementById('selectwrite').innerHTML = lis_start + lis_new_catalog  +'</li>'+ space +  lis_end;
						 }else{
						 document.getElementById('selectwrite').innerHTML ='';
						 }
					 
					 
					}else{
					
					 document.getElementById('selectwrite').innerHTML = ''; 
					 space = search_json(oldValue)
					 document.getElementById('selectwrite').innerHTML = lis_start + lis_input_catalog  +'</li>'+ space +  lis_end; 
					

					}
				}
			}, 
		10 );
}
// функция для просмотра длины слова
function  search_json(slovo)
	 
	
	{
	var lis	=	'';
		for(var f = 0;	f <= s_json['j'].length; f++)
		{
				// lis.appendChild(lis);
			
			//	document.getElementById('r2').innerHTML = s_json['j'][f];		
				if( s_json['j'][f] == undefined )
				{
						
				}else{
				
					if( slovo.length <= s_json['j'][f].length )
					{ 
					if (s_json['j'][f].search(new RegExp( slovo , "gi")) != -1? true : false )
						{ // регулярное выражение по поиску совпадений
							// регулярное выражение по замене
							reps =   s_json['j'][f].replace(new RegExp( slovo , "g"), '<em>' + slovo + '</em>') ;
							//	list['id'] =   s_json['id'][f];
							
							
							lis	= lis + '<li onclick="onclick_select_list(\'' + s_json['id'][f] + '\',\'' + s_json['j'][f]	+ '\')" ' +
							'onmouseover="this.style.backgroundColor=\'#6083a5\';this.style.color=\'#fff\';'+
							'this.style.borderTop = \'solid #f82525 1px\';this.style.borderBottom = \'solid #f82525 1px\';" '+
							'onmouseout="this.style.backgroundColor=\'#fff\';  	this.style.color=\'#000\';'+
							'this.style.borderTop = \'solid #ffffff 1px\';this.style.borderBottom = \'solid #ffffff 1px\';" value="' + s_json['id'][f] +'">' + reps	+ '</li>';
						}
					}
				}
		}
			
	return lis ;
			
	}
	//	res(listing);
		//	проверка
	function	onclick_select_list(id_value, var_value){
	
	 document.getElementById('stail').value = var_value;
	 document.getElementById('catalog_id').value = id_value;
	 document.getElementById('selectwrite').innerHTML = ''; 
	}
	
	function	onactivate_selec(){
	
	 document.getElementById('selectwrite').innerHTML = ''; 
	}
	
	
	
	
	
	function	delete_select_list(){
	
	var selectw	=	document.getElementById('selectwrite');
	if (selectw	!=	''){
	
	 // document.getElementById('selectwrite').innerHTML = ''; 
	 }else{
	 activate_select();
	 }
	}	
	
	
		
	
	function	d_list(){
	 document.getElementById('selectwrite').innerHTML = ''; 
	}


<div id="selectinput">
	<div style="cursor: pointer; width: 163px;">
		<img style="cursor: pointer; width: 9px; height: 20px; border: 1px none; padding: 0px; float: left;" src="/img/left_catalog_theme.gif" alt="|">
		<div style="display:inline;float:left;background-image: url('/img/catalog_input.gif');width: 154px; height: 20px;border: 0px; ">

		<input  onBlur="delete_select_list()"  value="" id="stail" onFocus="activate_select()" style="padding: 0px 0px 1px 0px;background-color:#fcfcfc;margin:2px 0px 2px 0px;height: 15px;width: 129px;float: left;border: 0px none;" name="catalog" type="text" size="10">
		<input  id="catalog_id" value="" style="display:none;" name="catalog_id" type="text">
		
		<div onclick="activate_select()" style="background-repeat: no-repeat;display:inline;float:left;background-image:url('/img/catalog_open_select.gif');width: 25px; height: 20px; ">
			</div>
		</div>
	</div>
</div>

<div id="selectwrite"></div>


Прошу не пинать слишком нагами, так как изучаю JS более недели и то по мере того что необходимо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
select по умолчанию Ultimatum Events/DOM/Window 0 31.07.2010 18:40