Привет.
Для практики начал создавать плагин - редактируемое дерево.
Смысл - редактировать дерево (меню), перетаскиванием листьев в новые позиции.
Потом планирую его как часть 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>