Я пытаюсь интегрировать следующее в Joomla 3.8.11 (новая установка) с использованием модуля Custom HTML, JCE и Protostar.
Я пробовал несколько вещей, включая использование - jQuery(document).ready(function() { -
но, к сожалению, я не могу заставить его работать.
Может кто-нибудь помочь мне, пожалуйста?
Большое спасибо!
Сценарий:
$(function(){
$('.dragbox')
.each(function(){
$(this).hover(function(){
$(this).find('h2').addClass('collapse');
}, function(){
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function(){
$(this).find('.configure').css('visibility', 'visible');
}, function(){
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function(){
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
stop: function(event, ui){
$(ui.item).find('h2').click();
var sortorder='';
$('.column').each(function(){
var itemorder=$(this).sortable('toArray');
var columnId=$(this).attr('id');
sortorder+=columnId+'='+itemorder.toString()+'&';
});
alert('SortOrder: '+sortorder);
/*Pass sortorder variable to server using ajax to save state*/
}
})
.disableSelection();
});
Html
<div class="column" id="column1">
<div class="dragbox" id="item1" >
<h2>Handle 1</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item2" >
<h2><span class="configure" ><a href="#" >Configure</a></span>Handle 2</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
<div class="dragbox" id="item3" >
<h2>Handle 3</h2>
<div class="dragbox-content" >
<!-- Panel Content Here -->
</div>
</div>
</div>
<div class="column" id="column2" >
<div class="dragbox" id="item4" >
<h2>Handle 4</h2>
<div class="dragbox-content" >
<!-- Panel Content Here-->
</div>
</div>
<div class="dragbox" id="item5" >
<h2>Handle 5</h2>
<div class="dragbox-content" >
<!--Panel Content Here-->
</div>
</div>
</div>
Есть некоторые CSS, но это не вызывает никаких проблем.