Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 24.11.2015, 15:31
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

рони,
у меня получилось сделать, то что нужно с помощью открыть закрыть открывашка на js
но только теперь когда я из выпадающего списка выбираю длину, то название строчки не переноситься в название списка, и список не закрывается автоматически при нажатие на тег "li"
Вот весь код:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример</title>
  <meta name="robots" content="noindex,nofollow">

  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

  <!-- Bootstrap -->
  <link href="css/animate.css" rel="stylesheet">

  <!-- Google Font Lato -->
  <link href="http://fonts.googleapis.com/css?family=Lato:400,700,900,400italic,700italic,900italic" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="fonts/Raleway-ExtraLight.ttf" type="text/css">

  <!-- Main Styles -->
  <link href="css/styles.css" rel="stylesheet">
  <link rel="shortcut icon" href="img/ico/favicon.png"> 
</head>
  <body id="top" data-spy="scroll" data-target=".navbar" data-offset="260">
    <!-- Vehicles start -->
    <form action="#">
      <section id="vehicles" class="container">           
        <div class="col-md-12">
          <h2 class="title wow fadeInDown" data-wow-offset="200">Выбор стеллажа<span class="subtitle"></span></h2>
          <div id="radio">
            <div class="radio_pos">
            <input checked="checked" class="radio" id="radio-1" name="sw" type="radio" value="one">
            <label style="" for="radio-1">Односторонний</label>
            <br><br>
            <input style="" class="radio" id="radio-2" name="sw" type="radio">
            <label style="" for="radio-2">Двухсторонний</label>
            </div>
          </div>
        </div>

        <!-- Vehicle 1str start -->
        <div id="one" class="row">
          <div class="col-md-3 vehicle-nav-row wow fadeInUp" data-wow-offset="100">
            <div id="vehicle-nav-container">
              <div id="length" class="wrapper-dropdown-3" tabindex="1">
          	   <span>Длина</span>
              	<ul class="vehicle-nav">                 
                  <input id="1str1metr" type="radio" class="lenght" value="one" name="length" checked="checked">
                    <label for="1str1metr">
                      <li class="active">
                        <a onclick="_click(1); return false;"><i class="icon-envelope icon-large"></i>1 метр</a>
                      </li>
                    </label>
                  <input id="1str2metra" type="radio" class="lenght" value="one" name="length">
                    <label for="1str2metra">
                      <li class="active">
                        <a onclick="_click(2); return false;"><i class="icon-envelope icon-large"></i>2 метра</a>
                      </li>
                    </label>
                  <input id="1str3metra" type="radio" class="lenght" value="one" name="length">
                    <label for="1str2metra">
                      <li class="active">
                        <a onclick="_click(3); return false;"><i class="icon-envelope icon-large"></i>3 метра</a>
                      </li>
                    </label>
              	</ul>
               </div>          
  				​  </div>
  				</div>
          <!-- Vehicle 1str end -->

<script type="text/javascript">     
      function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.vehicle-nav > .op input[type="radio"] + label li');
        this.val = '';
        this.index = -1;
        this.initEvents();
      }
        DropDown.prototype = {
          initEvents : function() {
            var obj = this;
            obj.dd.on('click', function(event){
              $(this).toggleClass('active');
              return false;
            });
            obj.opts.on('click',function(){
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
              $('.wrapper-dropdown-3').removeClass('active');
              obj.index = opt.index();
            });
          },
          getValue : function() {
            return this.val;
          },
          getIndex : function() {
            return this.index;
          }
        }

        $(function() {
          var dd = new DropDown( $('#length') );
          var dd = new DropDown( $('#metr') );
          $(document).click(function() {
            // all dropdowns
            $('<div class="wrapper-dropdown-3"></div>').removeClass('active');
          });
        });

        $(document).ready(function(){
          $('input[name=sw]').click(function(){
            var v = ($(this).val());
            console.log(v);
            if(v === 'one'){
              $('#one').show();
              $('#two').hide();
            }
            else{
              $('#one').hide();
              $('#two').show();
            }
          });
        });

        var _click = function () {
          var b = 1;
          return function (c) {
              var a = document.getElementById("vehicle-" + b);
              c == b && (a.style.display = "none" == a.style.display ? "" : "none");
              c != b && (a.style.display = "none", a = document.getElementById("vehicle-" + c), a.style.display = "", b = c)
          }
      }();
  window.onload = function() {
      _click(1)
   }        
	</script>


Сам список выпадающий строки 46-66, а код js для него 02-41.
Ответить с цитированием
  #12 (permalink)  
Старый 24.11.2015, 17:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

d1mka21,
пас ... либо попробуйте локализовать ... html 10-20 строк 3 радио 3 элемента
Ответить с цитированием
  #13 (permalink)  
Старый 24.11.2015, 19:45
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

Сообщение от рони
локализовать
в плане локализовать?
Ответить с цитированием
  #14 (permalink)  
Старый 24.11.2015, 20:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

открывашка 237 radio jquery
d1mka21,
это вот как-то так
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
$(function() {
    var a = $(".lenght"),
        c = $(".vehicle");
    a.each(function(a, b) {
        $(b).click(function() {
            c.hide().eq(a).show()
        });
        b.checked && b.click()
    })
});
  </script>
</head>

<body>
<input type="radio" class="lenght" name="length" checked="checked">
<input type="radio" class="lenght" name="length">
<input type="radio" class="lenght" name="length">
<div class="vehicle">1</div>
<div class="vehicle">2</div>
<div class="vehicle">3</div>


</body>

</html>
Ответить с цитированием
  #15 (permalink)  
Старый 25.11.2015, 10:26
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

рони,
как то так не получается, там много всего надо скидывать))
может так получиться у меня объяснить, в чем проблема:
вот кусок js отвечающий за замену при нажатии на выбранное событие.
function DropDown(el) {
        this.dd = el;
        this.placeholder = this.dd.children('span');
        this.opts = this.dd.find('ul.vehicle-nav > .op input[type="radio"] + label li');
        this.val = '';
        this.index = -1;
        this.initEvents();
      }
        DropDown.prototype = {
          initEvents : function() {
            var obj = this;
            obj.dd.on('click', function(event){
              $(this).toggleClass('active');
              return false;
            });
            obj.opts.on('click',function(){
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
              $('.wrapper-dropdown-3').removeClass('active');
              obj.index = opt.index();
            });
          },
          getValue : function() {
            return this.val;
          },
          getIndex : function() {
            return this.index;
          }
        }

но когда я добавил в js открывашку
var _click = function () {
          var b = 1;
          return function (c) {
              var a = document.getElementById("vehicle-" + b);
              c == b && (a.style.display = "none" == a.style.display ? "" : "none");
              c != b && (a.style.display = "none", a = document.getElementById("vehicle-" + c), a.style.display = "", b = c)
          }
      }();
  window.onload = function() {
      _click(1)
   }


то перестала работать замена выбранного события. Может какой то конфликт?!)
Ответить с цитированием
  #16 (permalink)  
Старый 25.11.2015, 11:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

d1mka21,
попробуйте адаптировать код выше, если вы правильно описали алгоритм вам достаточно указать правильные селекторы для кнопок и блоков и возможно заменить клик на change. разбирать зависимости конфликта ваших скриптов и код вашего html нет возможности.
Ответить с цитированием
  #17 (permalink)  
Старый 25.11.2015, 12:44
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

Ну вроде бы получилось))) СПАСИБО!!!!
Единственное, что при загрузке ничего не отображается, а начинает отображаться только после выбора кнопки(
Но это появилось, когда я добавил второй список с кнопками, так что сейчас на подобии первого буду городить совой огород))))

Еще раз огромной СПАСИБО!!!!

Последний раз редактировалось d1mka21, 25.11.2015 в 12:51.
Ответить с цитированием
  #18 (permalink)  
Старый 25.11.2015, 13:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

d1mka21,
если меняли клик на change смените в двух местах
даже лучше так
b.checked && $(b).change()
Ответить с цитированием
  #19 (permalink)  
Старый 25.11.2015, 16:07
Интересующийся
Отправить личное сообщение для d1mka21 Посмотреть профиль Найти все сообщения от d1mka21
 
Регистрация: 07.10.2015
Сообщений: 22

рони,
у меня получилось адаптировать под свои нужды код вот такого плана, но два таких же кода, ток другие классы кроме ".vehicle-data" - уже не работает, один из них:
$(".vehicle-data").hide();
var activeVehicleData = $(".vehicle-nav .active a").attr("href");
$(activeVehicleData).show();

$(".vehicle-nav li").on("click", function(){

  $(".vehicle-nav .active").removeClass("active");
  $(this).addClass('active');

  $(activeVehicleData).fadeOut( "slow", function() {
    activeVehicleData = $(".vehicle-nav .active a").attr("href");
    $(activeVehicleData).fadeIn("slow", function() {});
  });

  return false;
});


И блин, даже второй выпадающими списками такая же фигня((

Последний раз редактировалось d1mka21, 25.11.2015 в 16:16.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Показ следующего числа в зависимости от нажатой кнопки TTATPuOT jQuery 1 09.10.2015 18:56
показать/убрать текст при переходе с кнопки на кнопу radio zazula Общие вопросы Javascript 12 03.08.2015 11:53
Как вызвать событие уже отмеченной radio кнопки? cha0s jQuery 1 09.05.2014 13:48
html код в зависимости от выбора radio Findail Общие вопросы Javascript 6 30.03.2013 12:53
<select> в зависимости от выбранного radio imediasun1 Элементы интерфейса 1 23.12.2012 23:38