Форум

Micher · #1 (**permalink**) 31.01.2014, 00:52

Доброго всем дня. Может кто-нибудь встречался с похожей проблемой.
На странице есть стилизованный select Jquery selectbox и ползунок Jquery UI slider. Ползунок тянется только 1 раз, после чего не реагирует. При этом, если убрать $("select.custom").selectbox(); , то тогда ползунок работает исправно.
Jquery подключаю v1.7.1

<select class="custom">
  <option value="1">Раз</option>
  <option value="2">Два</option>
</select>
<input type="text" id="minSq" value="" />
<input type="text" id="maxSq" value="" />
<div class="sliderCont"><div id="slider"></div></div>

<script type="text/javascript">
jQuery(document).ready(function(){
    /* slider */
    jQuery("#slider").slider({
        min: 0,
        max: 200,
        values: [30,150],
        range: true,
        stop: function(event, ui) {
            jQuery("#minSq").val(jQuery("#slider").slider("values",0));
            jQuery("#maxSq").val(jQuery("#slider").slider("values",1));
        },
        slide: function(event, ui){
            jQuery("#minSq").val(jQuery("#slider").slider("values",0));
            jQuery("#maxSq").val(jQuery("#slider").slider("values",1));
        }
    });
    /* select */
    $("select.custom").selectbox();
});
</script>

рони · #2 (**permalink**) 31.01.2014, 02:50

Сообщение от Micher

$("select.custom").selectbox();

вы определитесь или $ или jQuery

Micher · #3 (**permalink**) 31.01.2014, 12:16

Сообщение от рони

вы определитесь или $ или jQuery

Поставил

<script type="text/javascript">
$(document).ready(function(){
	/* slider */
	$("#slider").slider({
		min: 0,
		max: 200,
		values: [30,150],
		range: true,
		stop: function(event, ui) {
			$("#minSq").val($("#slider").slider("values",0));
			$("#maxSq").val($("#slider").slider("values",1));
	    },
	    slide: function(event, ui){
			$("#minSq").val($("#slider").slider("values",0));
			$("#maxSq").val($("#slider").slider("values",1));
	    }
	});


    /* select */
    $("select.custom").selectbox();
});
</script>

Ничего не изменилось

рони · #4 (**permalink**) 31.01.2014, 12:43

Сообщение от Micher

Поставил

Сообщение от Micher

Ничего не изменилось

аналогично но результат иной

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">

 <style type="text/css">
  body{background:#FFD700}
  .ui-slider-handle{border-radius:50%; position: relative; font-size: 24px; display: block; }
  .ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{text-decoration:none}
  .ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{background:#000;border:#00FFFF 0.2em solid;color:#555;font-weight:normal;height:0.5em;width:0.5em}
  .ui-slider .ui-slider-handle{height:0.5em;width:0.5em}
  .ui-state-default{background:#F00}
  .ui-slider-horizontal .ui-slider-handle{top:-0.3em}
  #slider{height:0.3em;background:#0FF;margin:2em 8em auto;border-radius:3px;}
  .gallery{height:500px;margin-left:auto;margin-right:auto;overflow:hidden;position:relative;width:100%}
  .gallery .list{left:0;position:absolute;top:0;white-space:nowrap}
  </style>
 <link href="http://www.bulgaria-web-developers.com/projects/javascript/selectbox/css/jquery.selectbox-0.2.css" type="text/css" rel="stylesheet" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.bulgaria-web-developers.com/projects/javascript/selectbox/js/jquery.selectbox-0.2.js"></script>
 <script type="text/javascript">
$(document).ready(function(){
    /* slider */
    $("#slider").slider({
        min: 0,
        max: 200,
        values: [30,150],
        range: true,
        stop: function(event, ui) {
            $("#minSq").val($("#slider").slider("values",0));
            $("#maxSq").val($("#slider").slider("values",1));
        },
        slide: function(event, ui){
            $("#minSq").val($("#slider").slider("values",0));
            $("#maxSq").val($("#slider").slider("values",1));
        }
    });
    /* select */
   $("select.custom").selectbox();
});
</script>

</head>

<body>
 <select class="custom">
  <option value="1">Раз</option>
  <option value="2">Два</option>
</select>
<input type="text" id="minSq" value="" />
<input type="text" id="maxSq" value="" />
<div class="sliderCont"><div id="slider"></div></div>

</body>

</html>

Micher · #5 (**permalink**) 31.01.2014, 13:07

рони, спасибо за участие!
Как оказалось, проблема была лишь js-библиотеке.
Я просто заменил jquery.ui-slider.js на jquery-ui.js и всё.

Форум

Справочник

Discord чат

Курсы javascript