Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.07.2018, 10:37
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,374

Пишу плагин редактирования дерева
Привет.
Для практики начал создавать плагин - редактируемое дерево.
Смысл - редактировать дерево (меню), перетаскиванием листьев в новые позиции.
Потом планирую его как часть yii расширения выставлять, поэтому хотелось бы чтобы по js коду было "по чище", начал делать, пока константы, начальные настройки и обработка ошибок, все пока нормально?

;( function( $, window ){
	$.fn.editabletree = function(options) {

		options = options || {};
		
		var MOVE_WITH_SUBTREE_MODE = 'move-with-subtree-mode';
		var MOVE_WITHOUT_SUBTREE_MODE = 'move-without-subtree-mode';

		var mode = MOVE_WITHOUT_SUBTREE_MODE;
		
		if (options.mode) {
			if ($.inArray(options.mode, [MOVE_WITH_SUBTREE_MODE, MOVE_WITHOUT_SUBTREE_MODE]) !== -1) {
				mode = options.mode;
			} 
		}
		
		var idAttributeName = options.idAttributeName || 'data-id';
		
		try {
			var $tree = this.first();
			var $lis = $tree.find('li');
			
			$lis.each(function(){
				var $li = $(this);
				var attr = $li.attr(idAttributeName);
				if (attr === undefined) {
					throw new Error('One of the tree leaves misses the data attribute');
				} 
				$li.data({id: attr});
			});
			
			var $spans = $tree.find('span');
			
			$spans.on('click', function(){
				alert($(this).closest('li').data('id'));
			});
		
		} catch(e) {
			alert('The next error occured during processing the tree: \n\n' + e.message);
		}
		
		return this;
	};	
})( jQuery, window );


<head>
<meta charset="UTF-8" />
<script src="../0_lib/jquery-3.3.1.js"></script>
<script src="editabletree.js"></script>
<script>
$(document).ready(function(){
	$('#tree').editabletree({
	    mode : 'move-with-subtree-mode9',
		//idAttributeName : 'id'
	});
	
});
</script>
<style>
 li {border:1px solid red;}
</style>
</head>
<body>

<ul id="tree">
<li data-id="1"><span>11111</span></li>

<li data-id="2"><span>22222</span></li>

<li data-id="3">
	<span>33333</span>

	<ul>
	<li data-id="31"><span>33333-11111</span></li>
	<li data-id="32"><span>33333-22222</span></li>	
	</ul>

</li>

<li data-id="4"><span>44444</span></li>

<li data-id="5">
	<span>55555</span>

	<ul>
	<li data-id="51">
		<span>55555-11111</span>
		
		<ul>
		<li data-id="511"><span>55555-11111-11111</span></li>
		<li data-id="512"><span>55555-11111-22222</span></li>	
		<li data-id="513"><span>55555-11111-33333</span></li>	
		</ul>		
		
	</li>
	
	<li data-id="52"><span>55555-22222</span></li>	
	</ul>

</li>

<li data-id="6"><span>66666</span></li>

</ul>

Последний раз редактировалось micscr, 10.07.2018 в 10:39.
Ответить с цитированием
  #2 (permalink)  
Старый 10.07.2018, 12:14
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 3,911

И что это работает?) Смысл какой-то неясный - перетаскивать листья. А зачем? А контент в них редактируется? А ветки что? А создать новую или удалить? А как? Что значит редактируемое дерево? Надо как-то описать по пунктам весь функционал - редактируемое дерево. Это первое с чего следует начать. Второе это полная html-разметка в возможных состояниях и сопутствующие css. Третье почитать букварь https://learn.jquery.com/plugins/. А вот затем уже можно начать что-то кодить на jquery.

Последний раз редактировалось Rise, 10.07.2018 в 12:51.
Ответить с цитированием
  #3 (permalink)  
Старый 10.07.2018, 12:34
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,076

Сообщение от micscr
все пока нормально?
Вы код запускали?

Если в опциях не передать параметр "mode", то скрипт ваш упадет.
У контекста в строке 20 разве есть метод "first"?
Зачем перезаписывать data-атрибут "id"?
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2018, 12:54
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,374

Сообщение от Rise Посмотреть сообщение
И что это работает?) Смысл какой-то неясный - перетаскивать листья. А зачем?
Только изменение взаимного расположения. А потом информация о новом расположении будет на сервер передаваться для перестройки.
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2018, 12:57
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,374

Сообщение от Nexus Посмотреть сообщение
Вы код запускали?

Если в опциях не передать параметр "mode", то скрипт ваш упадет.
У контекста в строке 20 разве есть метод "first"?
Зачем перезаписывать data-атрибут "id"?
1) Конечно запускал, ничего не падает, там же есть проверка , только если if (options.mode) {.

2) this там - это jQuery объект.

3) А метод data не переписывает атрибуты
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2018, 13:00
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,374

Скажите, нормально будет в конце метода пообъявлять свои служебные функции?:

} catch(e) {
			alert('The next error occured during processing the tree: \n\n' + e.message);
		}
		
		return this;
		
		function getStatus() {
			return status;
		};		
		
	};
})( jQuery, window );
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2018, 13:03
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,374

А что с jsfiddle.net?
Захожу на "Your public fiddles", она там есть, захожу по ссылке внутрь нее.
Там почему то написано "Add title to make the fiddle public", хотя 2 поля выше заполнены.
И в рез-те по ссылке глобально она недоступна
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2018, 13:09
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,076

Сообщение от micscr
1) Конечно запускал, ничего не падает, там же есть проверка , только если if (options.mode) {.
Пропустил строку 4, прошу прощения.

Сообщение от micscr
А метод data не переписывает атрибуты
Атрибуты не перезаписываются, но данные доступные из атрибута будут сохранены еще и в ram. Имеет ли это смысл?
Ответить с цитированием
  #9 (permalink)  
Старый 10.07.2018, 13:13
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 2,514

Сообщение от micscr
А что с jsfiddle.net?
Не чихает вроде.

Где будет применяться этот плагин?
Ответить с цитированием
  #10 (permalink)  
Старый 10.07.2018, 13:26
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,374

Сообщение от j0hnik Посмотреть сообщение
Не чихает вроде.
Это почему то в IE11 jsfiddle не работает.

Вот ссылка

Сообщение от j0hnik Посмотреть сообщение
Где будет применяться этот плагин?
Редактирование меню сайта (расположения позиций).
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плагин browserSync неработает в iFrame jeka2 Node.JS 1 23.04.2017 01:16
Загрузка/Сохранение дерева anonim_14 ExtJS 1 05.11.2014 21:45
Пишу плагин. Не работает.live('click') для элементов. mr_freeman jQuery 4 20.12.2012 18:00
Плагин в стиле Live tarya jQuery 5 16.07.2012 02:00
Пишу плагин к ФФ gnomik Firefox/Mozilla 1 30.01.2009 15:14