Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.03.2017, 17:23
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Stay_Strong, смотри uncompressed версию jquery, там сделано примерно так:
function nextAll(elem) {
	var matched = [];
	while (elem = elem.nextSibling) {
		if (elem.nodeType === 1) {
			matched.push(elem);
		}
	}
	return matched;
}

PS: у меня вот что получилось)

Последний раз редактировалось Rise, 16.03.2017 в 17:35.
Ответить с цитированием
  #12 (permalink)  
Старый 16.03.2017, 17:41
Аватар для PROPHESSOR
Новичок на форуме
Отправить личное сообщение для PROPHESSOR Посмотреть профиль Найти все сообщения от PROPHESSOR
 
Регистрация: 11.03.2017
Сообщений: 9

А ты посмотри, как в JQuery это реализовано
Ответить с цитированием
  #13 (permalink)  
Старый 16.03.2017, 17:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

nextAll на js

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .test{
    background-color: #008000;
  }
  .red{
    background-color: #FF0000;
  }

  </style>


</head>

<body>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item test">test</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
 <script>
function nextAll(elem) {
    var next = false;
    return [].filter.call(elem.parentNode.children, function(child) {
        if (child === elem) next = true;
        return next && child !== elem
    })
};

var div = document.querySelector(".test"), next = nextAll(div);
next.forEach(function(el) {
       el.classList.add('red');
});

  </script>


</body>
</html>
Ответить с цитированием
  #14 (permalink)  
Старый 16.03.2017, 20:22
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

рони,
Спасибо, не подскажите, как мне на чистом js вот такое изобразить

$.fn.mobileMenu = function (options) {};


На jquery это просто. Делаю по своему же примеру https://github.com/WebTravel/multile.../mobileMenu.js

Там создаю объект default, потом расширяю еще option при помощи extand. А потом нужно бы возвращать первый элемент и делать это плагином.. А как я не в упор. Пока вот такое у меня:
var defaults = {
    //....
  }

  function LoadElements(element, options) {
    var extend = function(out) {
      out = out || {};
      for (var i = 1; i < arguments.length; i++) {
        if (!arguments[i])
          continue;
        for (var key in arguments[i]) {
          if (arguments[i].hasOwnProperty(key))
            out[key] = arguments[i][key];
        }
      }
      return out;
    };

    this.options = extend({}, defaults, options);
    this.element = element;
    this.init();
  }


Дальше будет

LoadElements.prototype.init = function () {
// тело плагина
}


И дальше как раз нужно вызов осуществлять, как в $.fn
Вопрос: а как?
Ответить с цитированием
  #15 (permalink)  
Старый 16.03.2017, 20:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Stay_Strong,
Небольшая JavaScript библиотека в jQuery стиле включающая собственные функции
Ответить с цитированием
  #16 (permalink)  
Старый 16.03.2017, 20:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Stay_Strong
создаю объект default, потом расширяю еще option при помощи extand
Object.assign
Ответить с цитированием
  #17 (permalink)  
Старый 21.03.2017, 18:29
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

рони,
Не подскажите, почему у меня this не берется, а документ передается в функцию prototype?

window.onload = function() {

  var defaults = {
    'childrenElements' : '.filter__option',//дочерние элементы, больше числа которых появляется кнопка раскрытия
    'count' : '3',//число, после которого появится раскрытие
    'speed' : '250',//скорость раскрытия блока по нажатию на кнопку показа
    'textMore' : '+ Показать все',//Текст для кнопки "Показать все"
    'textLess' : '- Скрыть'//Текст для кнопки "Cкрыть"
  }


  function LoadElements(element, options) {
    var extend = function(out) {
      out = out || {};
      for (var i = 1; i < arguments.length; i++) {
        if (!arguments[i])
          continue;
        for (var key in arguments[i]) {
          if (arguments[i].hasOwnProperty(key))
            out[key] = arguments[i][key];
        }
      }
      return out;
    };

    this.options = extend({}, defaults, options);
    this.element = element;
    this.init();
  }


  LoadElements.prototype.init = function() {
    var self = this;
    //Переменные, используемые в плагине
    var elList = document.querySelectorAll(self); //находим все элементы на странице, к которым нужно применить метод

    Array.prototype.forEach.call(elList, function(el, i) { //Обходим в цикле все элементы
        var countChildren = elList[i].querySelectorAll(self.options.childrenElements);
        if(countChildren.length > self.options.count) {
          //Создаем контейнер, куда будем перемещать все элементы, которые нужно скрыть.
          var container = document.createElement('div');
              container.className = 'loadContainer';
          //Создаем кнопку для раскрытия списка
          var showAll = document.createElement('div');
              showAll.className = 'loadMore';
              showAll.innerHTML = self.options.textMore;
          //Присваиваем контейнер в наш элемент
          elList[i].appendChild(container);
          //Присваиваем кнопку в наш элемент
          elList[i].appendChild(showAll);
          //Выбираем все элементы, которые будем скрывать и отправлем их в контейнер
          for(var j = 0; j < countChildren.length; j++) {
            if(j > self.options.count - 1) {
              container.appendChild(countChildren[j]);
            }
          }

          //Поочередно разворачиваем и сворачиваем контейнер при нажатии
          showAll.onclick = function() {
            this.previousElementSibling.classList.toggle('active');
          }

        }

    });

  }

  (function(window) {
    window.loadElements = function(element, options) {
        this.element = element;
        new LoadElements(this, options);
    }
    return this;
  })(window);

  document.querySelectorAll('.filter__item').loadElements(); 

}


<div class="filter__wrapper">
<form action="" class="filter">
<div class="filter__item">
          <div class="filter__name">Производители</div>
          <div class="filter__option--wrapper">
            <div class="filter__option">
              <input id="check1" type="checkbox"/>
              <label for="check1">ACV</label>
            </div>
            <div class="filter__option">
              <input id="check2" type="checkbox"/>
              <label for="check2">AE&T</label>
            </div>
            <div class="filter__option">
              <input id="check3" type="checkbox"/>
              <label for="check3">Ariston</label>
            </div>
            <div class="filter__option">
              <input id="check4" type="checkbox"/>
              <label for="check4">Armada</label>
            </div>
            <div class="filter__option">
              <input id="check5" type="checkbox"/>
              <label for="check5">Baxi</label>
            </div>
            <div class="filter__option">
              <input id="check6" type="checkbox"/>
              <label for="check6">Buderus</label>
            </div>
            <div class="filter__option">
              <input id="check7" type="checkbox"/>
              <label for="check7">Chaffoteaux</label>
            </div>
            <div class="filter__option">
              <input id="check8" type="checkbox"/>
              <label for="check8">Matrix</label>
            </div>
            <div class="filter__option">
              <input id="check9" type="checkbox"/>
              <label for="check9">MATRIX</label>
            </div>
          </div>
        </div>
</form>
</div>
Ответить с цитированием
  #18 (permalink)  
Старый 21.03.2017, 18:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Stay_Strong,
может тот кто лучше знает ООП подскажет.
Ответить с цитированием
  #19 (permalink)  
Старый 22.03.2017, 07:33
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

Stay_Strong, extend из конструктора убери не красиво он там)
Ответить с цитированием
  #20 (permalink)  
Старый 22.03.2017, 09:11
Аватар для Stay_Strong
Аспирант
Отправить личное сообщение для Stay_Strong Посмотреть профиль Найти все сообщения от Stay_Strong
 
Регистрация: 14.10.2015
Сообщений: 37

Rise,
Почему нельзя так обрабатывать extend? И как мне передать мой селектор? Как только я попадаю в функцию инициализации, вывожу console.log(this) и на выходе получаю весь документ, вместо моего селектора, к которому применяю метод. Вы понимаете в этом, могу взять урок по скайпу за плату.

Последний раз редактировалось Stay_Strong, 22.03.2017 в 09:15.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Auto resizing textarea на чистом JavaScript volshebnyi jQuery 1 16.09.2016 10:34
аналог ajaxupload на чистом js Гугл-мен Общие вопросы Javascript 1 04.11.2013 13:49
Есть ли в JavaScript аналог функции exec() из php? lorddarkside Общие вопросы Javascript 3 22.12.2010 12:37
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 19:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 20:34