Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 23.03.2015, 18:35
Аспирант
Отправить личное сообщение для gam0ra Посмотреть профиль Найти все сообщения от gam0ra
 
Регистрация: 15.12.2014
Сообщений: 65

jquery ui slider
jquery ui slider Как поменять слайдеру стили??
Пробывал менять в jquery ui css не момогло(
Ответить с цитированием
  #2 (permalink)  
Старый 23.03.2015, 18:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

gam0ra,
выбрать в галерее - скачать css

или сразу подключить
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
<style>
и вопрос что вы там меняли и где?
Ответить с цитированием
  #3 (permalink)  
Старый 23.03.2015, 18:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

gam0ra,
http://api.jqueryui.com/slider/
в разделе Theming даны названия классов которые используются при оформлении слайдера
Ответить с цитированием
  #4 (permalink)  
Старый 24.03.2015, 14:52
Аспирант
Отправить личное сообщение для gam0ra Посмотреть профиль Найти все сообщения от gam0ra
 
Регистрация: 15.12.2014
Сообщений: 65

рони,
А есть тоже самое на русском?)
Ответить с цитированием
  #5 (permalink)  
Старый 24.03.2015, 14:57
Аспирант
Отправить личное сообщение для gam0ra Посмотреть профиль Найти все сообщения от gam0ra
 
Регистрация: 15.12.2014
Сообщений: 65

Сообщение от рони Посмотреть сообщение
gam0ra,
выбрать в галерее - скачать css

или сразу подключить
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/le-frog/jquery-ui.css">
<style>
и вопрос что вы там меняли и где?
.ui-widget-header поменял цвет на свой
Серавно цвет тотже остался
Ответить с цитированием
  #6 (permalink)  
Старый 24.03.2015, 15:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

gam0ra,
где код?
Ответить с цитированием
  #7 (permalink)  
Старый 24.03.2015, 15:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

gam0ra, вариант серобуромалиновый без крапинок
<!doctype html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>jQuery UI Slider - Slider bound to select</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
  <style type="text/css">
#slider { margin: 10px;width : 500px; height: 8px ;
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF4500));
background-image: -o-linear-gradient(left, #FFD700, #FF4500);
background-image: -moz-linear-gradient(left, #FFD700, #FF4500);
background-image: -webkit-linear-gradient(left, #FFD700, #FF4500);
background-image: linear-gradient(to right, #FFD700, #FF4500)

}
  .ui-widget-header	{
    background-image: -webkit-gradient(linear, left, right, color-stop(0, #FF1493), color-stop(1, #0060BF));
    background-image: -o-linear-gradient(left, #FF1493, #0060BF);
    background-image: -moz-linear-gradient(left, #FF1493, #0060BF);
    background-image: -webkit-linear-gradient(left, #FF1493, #0060BF);
    background-image: linear-gradient(to right, #FF1493, #0060BF)
  }

  .ui-slider-handle{border-radius:50%; position: relative; font-size: 14px; display: block; }
  .ui-slider-horizontal .ui-slider-handle{top:-0.4em; background: #0000FF; }
    :focus {
 outline: 0; /* Firefox выделяет рамкой из точек все ссылки при нажатии */
 border: 0;
 }
  </style>


  <script>

  $(function() {
    var arr = [0,100000,300000,750000,1500000,3000000];
    var input = $( "#minbeds" );

    var slider = $( "<div id='slider'></div>" ).insertAfter( input ).slider({

      min: 0,

      max: 5000,

      range: "min",
      animate: "slow" ,
      stop:  function( event, ui ) {

        var num =  Math.round(ui.value/1000 );
         window.setTimeout(function ()
{
  slider.slider( "option", "value", num * 1000 );
},600)
       //
      },
      change: function( event, ui ) {

        var num =  Math.round(ui.value/1000 );
        input.val(arr[num]) ;

      },

      slide: function( event, ui ) {
        var num =  Math.round(ui.value/1000 ) ;
        input.val(arr[num]) ;

      }

    });

   slider.slider( "option", "value", 2000 );

  });

  </script>

</head>

<body>



<form id="reservation">

  <label for="minbeds">$</label>

  <input name="minbeds" id="minbeds">

</form>





</body>

</html>
Ответить с цитированием
  #8 (permalink)  
Старый 25.03.2015, 15:27
Аспирант
Отправить личное сообщение для gam0ra Посмотреть профиль Найти все сообщения от gam0ra
 
Регистрация: 15.12.2014
Сообщений: 65

рони,
У меня двойной слайдер щас попробую этот стиль вставить к себе)
Ответить с цитированием
  #9 (permalink)  
Старый 25.03.2015, 15:29
Аспирант
Отправить личное сообщение для gam0ra Посмотреть профиль Найти все сообщения от gam0ra
 
Регистрация: 15.12.2014
Сообщений: 65

рони,
А как исполняемый скрипт сюда скинуть?
Ответить с цитированием
  #10 (permalink)  
Старый 25.03.2015, 15:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,104

Сообщение от gam0ra
А как исполняемый скрипт сюда скинуть?
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужно связать input и ползунок jQuery Slider / jQuery ui IffeR jQuery 4 16.08.2014 17:01
jQuery UI Slider Mcqueen jQuery 2 02.10.2013 23:48
jQuery UI Range slider как заблокировать левый ползунок по первому клику Oleg_Pupkin jQuery 3 04.09.2013 12:44
jQuery UI Slider изменяет ширину ползунка SkaN2412 jQuery 1 26.11.2012 11:03
Неправильно работает jQuery Slider maximale jQuery 2 05.08.2012 20:36