[jquery, css] в форме списка select картинки

263

rtyug

9 января 2011, 12:06

4681

http://jqueryui.com/demos/position/

на сайте jqueryui там где выбираем тему оформления, в спике есть картинки...

как сделать, тоже, самое, чтобы картинки вставить в такой же список?

я посмотрел исходники странциы и не нашел как эти картинки оказались в этом списке

...картинки ~100px на 100px хотел вставить

Спалил тему: Pokerstars вывод WMZ, etc на VISA 0% или SWIFT + Конверт USD/GBP,etc (net profit $0,5 млрд) (https://minfin.com.ua/blogs/94589307/115366/) Monobank - 50₴ на счет при рег. тут (https://clck.ru/DLX4r) | Номер SIP АТС Москва 7(495) - 0Ꝑ, 8(800) - 800Ꝑ/0Ꝑ (http://goo.gl/XOrCSn)

S0

32

snk001

9 января 2011, 13:39

#1

Это не список select. Это просто набор div-ов. Один - "как бы" строка комбобокса. Другой - "как бы" то, что открывается. Соответственно, обычный CSS + совсем чуть-чуть JavaScript.

74

G.Vad!k

9 января 2011, 14:14

#2

Возможно для этих целей понадобится это

263

rtyug

14 января 2011, 08:14

#3

G.Vad!k:
Возможно для этих целей понадобится это

я нашел вот на jquery UI

исходники http://jqueryui.com/themeroller/themeswitchertool/

http://jqueryui.com/docs/Theming/ThemeSwitcher

все работает, но я не понимаю, как сделать редирект при нажатии на кликабельную картинку??

я пробовал:

 $(".menu_click").click(function(){



    top.location.href = $(".menu_click").attr('href');

        

    });

в консоле firefox ничего не было...

как и куда тут http://jqueryui.com/themeroller/themeswitchertool/ добавить, чтобы при щелчке был редирект...?

пробовал много раз - никак не хочет...

Скрипт для картинок: Яндекс [javascript jquery] не работает [DLE] как сделать изображения

RT

56

ReifTer

14 января 2011, 08:29

#4

Такой вариант должен работать




$(".menu_click").click(function(){



    top.location = $(this).attr('href');

        

});

Студия «Дз» (http://dddzzz.ru/) — создание сайтов, графический дизайн

263

rtyug

15 января 2011, 02:43

#5

ReifTer:
Такой вариант должен работать




$(".menu_click").click(function(){



    top.location = $(this).attr('href');

        

});

нет, не работает:


.................



	//markup 

	var button = $('<a href="#" class="jquery-ui-themeswitcher-trigger"><span class="jquery-ui-themeswitcher-icon"></span><span class="jquery-ui-themeswitcher-title">'+ options.initialText +'</span></a>');

	var switcherpane = $('<div class="jquery-ui-themeswitcher">	<div id="themeGallery">	<ul>	<li><a class="menu_click" href="http://jqueryui.com/themeroller/css/parseTheme.css.php">			<img src="http://www.x0.org.ua/images/79/thumbnail/2118.jpg" alt="UI Lightness" title="UI Lightness" />					<span class="themeName">UI lightness</span>		</a></li>	<li><a class="menu_click" href="http://jqueryui.com/themeroller/css/parseTheme.css.php">			<img src="http://www.x0.org.ua/images/79/thumbnail/2118.jpg" alt="UI Lightness" title="UI Lightness" />					<span class="themeName">UI lightness</span>		</a></li>							</ul>							</div></div>').find('div').removeAttr('id');



 $(".menu_click").click(function(){

    top.location.href = $(this).attr('href');

        

    });





.............

попробуй нажать там где комментарии:

http://www.x0.org.ua/photo/view/79/2120

(на самой странице кода много)

(но когда я нажимаю, то не работает, в консоле нету ничего...)

rtyug добавил 15-01-2011 в 08:24

UPD:

добавил:


	/* Theme Loading

	---------------------------------------------------------------------*/

	switcherpane2.find('a').click(function(){





		options2.onSelect();

		if(options2.closeOnSelect && switcherpane2.is(':visible')){

				    top.location.href = $(this).attr('href'); 

		switcherpane2.spHide(); }

		return false;

	});


				    top.location.href = $(this).attr('href');

UPD2:

есть вопрос:

я хочу поставить несколько таких списков...

из поставил...

но когда нажимаю на левый список, то открывается правый список...

http://www.x0.org.ua/photo/view/79/2120 (там где комментарии)

я все классы поменял на другие имена...

Но оно все равно открывает правый список, тогда когда нажимаю на левый...

как это исправить?

исходники:


  <script>

  $(document).ready(function(){

    $('#switcher').themeswitcher();



    $('#switcher2').themeswitcher2();

    

  });

  </script>


 <tr><td  align='center' > 

<div id="switcher"></div>

</td><td  align='center' > 

<div id="switcher2"></div>

</td></tr>






<script type="text/javascript">

/* jQuery plugin themeswitcher

---------------------------------------------------------------------*/





$.fn.themeswitcher2 = function(settings2){

	var options2 = jQuery.extend({

		loadTheme: null,

		initialText: 'Switch Theme',

		width: 150,

		height: 200,

		buttonPreText: 'Theme: ',

		closeOnSelect: true,

		buttonHeight: 14,

		cookieName: 'jquery-ui-theme',

		onOpen: function(){},

		onClose: function(){},

		onSelect: function(){}

	}, settings2);



	//markup 

	var button = $('<a href="#" class="jquery-ui-themeswitcher-trigger2"><span class="jquery-ui-themeswitcher-icon2"></span><span class="jquery-ui-themeswitcher-title2">'+ options2.initialText +'</span></a>');

	var switcherpane2 = $('<div class="jquery-ui-themeswitcher2">	<div id="themeGallery2">	<ul>	<li><a href="http://www.x0.org.ua/photo/view/79/21210">			<img src="http://www.x0.org.ua/images/79/thumbnail/2121.jpg" alt="UI Lightness" title="UI Lightness" />					<span class="themeName">UI lightness</span>		</a></li>	<li><a href="http://www.x0.org.ua/photo/view/79/2122">			<img src="http://www.x0.org.ua/images/79/thumbnail/2122.jpg" alt="UI Lightness" title="UI Lightness" />					<span class="themeName">UI lightness</span>		</a></li>							</ul>							</div></div>');







	//button events

	button.click(

		function(){

			if(switcherpane2.is(':visible')){ switcherpane2.spHide(); }

			else{ switcherpane2.spShow(); }

					return false;

		}

	);

	

	//menu events (mouseout didn't work...)

	switcherpane2.hover(

		function(){},

		function(){if(switcherpane2.is(':visible')){$(this).spHide();}}

	);



	//show/hide panel functions

	$.fn.spShow = function(){ $(this).css({top: button.offset().top + options2.buttonHeight + 6, left: button.offset().left}).slideDown(50); button.css(button_active); options2.onOpen(); }

	$.fn.spHide = function(){ $(this).slideUp(50, function(){options2.onClose();}); button.css(button_default); }

	

		

	/* Theme Loading

	---------------------------------------------------------------------*/

	switcherpane2.find('a').click(function(){





		options2.onSelect();

		if(options2.closeOnSelect && switcherpane2.is(':visible')){

				    top.location.href = $(this).attr('href'); 

		switcherpane2.spHide(); }

		return false;

	});

	

	//function to append a new theme stylesheet with the new style changes

	function updateCSS(locStr){

		var cssLink = $('<link href="'+locStr+'" type="text/css" rel="Stylesheet" class="ui-theme" />');

		$("head").append(cssLink);

	

		

		if( $("link.ui-theme").size() > 3){

			$("link.ui-theme:first").remove();

		}	

	}	

	

	/* Inline CSS 

	---------------------------------------------------------------------*/

	var button_default = {

		fontFamily: 'Trebuchet MS, Verdana, sans-serif',

		fontSize: '11px',

		color: '#666',

		background: '#eee url(http://jqueryui.com/themeroller/themeswitchertool/images/buttonbg.png) 50% 50% repeat-x',

		border: '1px solid #ccc',

		'-moz-border-radius': '6px',

		'-webkit-border-radius': '6px',

		textDecoration: 'none',

		padding: '3px 3px 3px 8px',

		width: options2.width - 11,//minus must match left and right padding 

		display: 'block',

		height: options2.buttonHeight,

		outline: '0'

	};

	var button_hover = {

		'borderColor':'#bbb',

		'background': '#f0f0f0',

		cursor: 'pointer',

		color: '#444'

	};

	var button_active = {

		color: '#aaa',

		background: '#000',

		border: '1px solid #ccc',

		borderBottom: 0,

		'-moz-border-radius-bottomleft': 0,

		'-webkit-border-bottom-left-radius': 0,

		'-moz-border-radius-bottomright': 0,

		'-webkit-border-bottom-right-radius': 0,

		outline: '0'

	};

	

	

	

	//button css

	button.css(button_default)

	.hover(

		function(){ 

			$(this).css(button_hover); 

		},

		function(){ 

		 if( !switcherpane2.is(':animated') && switcherpane2.is(':hidden') ){	$(this).css(button_default);  }

		}	

	)

	.find('.jquery-ui-themeswitcher-icon').css({

		float: 'right',

		width: '16px',

		height: '16px',

		background: 'url(http://jqueryui.com/themeroller/themeswitchertool/images/icon_color_arrow.gif) 50% 50% no-repeat'

	});	

	//pane css

	switcherpane2.css({

		position: 'absolute',

		float: 'left',

		fontFamily: 'Trebuchet MS, Verdana, sans-serif',

		fontSize: '12px',

		background: '#000',

		color: '#fff',

		padding: '8px 3px 3px',

		border: '1px solid #ccc',

		'-moz-border-radius-bottomleft': '6px',

		'-webkit-border-bottom-left-radius': '6px',

		'-moz-border-radius-bottomright': '6px',

		'-webkit-border-bottom-right-radius': '6px',

		borderTop: 0,

		zIndex: 999999,

		width: options2.width-6//minus must match left and right padding

	})

	.find('ul').css({

		listStyle: 'none',

		margin: '0',

		padding: '0',

		overflow: 'auto',

		height: options2.height

	}).end()

	.find('li').hover(

		function(){ 

			$(this).css({

				'borderColor':'#555',

				'background': 'url(http://jqueryui.com/themeroller/themeswitchertool/images/menuhoverbg.png) 50% 50% repeat-x',

				cursor: 'pointer'

			}); 

		},

		function(){ 

			$(this).css({

				'borderColor':'#111',

				'background': '#000',

				cursor: 'auto'

			}); 

		}

	).css({

		width: options2.width-30,

		height: '',

		padding: '2px',

		margin: '1px',

		border: '1px solid #111',

		'-moz-border-radius': '4px',

		clear: 'left',

		float: 'left'

	}).end()

	.find('a').css({

		color: '#aaa',

		textDecoration: 'none',

		float: 'left',

		width: '100%',

		outline: '0'

	}).end()

	.find('img').css({

		float: 'left',

		border: '1px solid #333',

		margin: '0 2px'

	}).end()

	.find('.themeName').css({

		float: 'left',

		margin: '3px 0'

	}).end();

	





	$(this).append(button);

	$('body').append(switcherpane2);

	switcherpane2.hide();





	return this;

};















</script>

rtyug добавил 15-01-2011 в 09:17

UPD3:

сделал!

надо было изменить имена этих функций в другом списке:


	$.fn.spShow = function(){ $(this).css({top: button.offset().top + options.buttonHeight + 6, left: button.offset().left}).slideDown(50); button.css(button_active); options.onOpen(); }

	$.fn.spHide = function(){ $(this).slideUp(50, function(){options.onClose();}); button.css(button_default); }

т.е. поставить:

$.fn.spShow2

$.fn.spHide2

Дзен реализовал для авторов возможность вывода денег через СПБ

Как снизить ДРР до 4,38% и повысить продажи с помощью VK Рекламы