All geek questions in one place

Unable to resize jQuery layout

I will not be able to set jquery-layout plugin options. By default it displays correctly, but there are no options. I'm trying to set a resizable and sliding document at the ready, but when I warn about resizing, it returns false. Can anyone determine what is going on here?

JS:

$(document).ready(function() { var myLayout = $('body').layout({ west: { resizable: true, resizeWhileDragging: true, slidable: true } }); alert(myLayout.options.west.resizable); //returns false });

HTML:

 <body> <div class="ui-layout-center">Center <div id="board"> </div> <button onclick="set_board();">New Game!</button> <button onclick="execute_turn();">Turn!</button> </div> <div class="ui-layout-east">East</div> <div class="ui-layout-west">West</div> </body>
+6
source share
3 answers

It works for me when jqueryui is included, for example in jquery-layout. Simple demo in http://layout.jquery-dev.net/demos/simple.html .

Make sure you first jquery.layout jquery-ui and then jquery.layout , otherwise this will not work.

Example:

 <script src="lib/jquery/jquery-ui-1.10.4.js"></script> <script src="lib/jquery/jquery.layout-1.3.0-rc30.79.js"></script>
+13
source

You initialize the plugin plugin twice ... try to reconcile the definition and initialization parameters of myLayout:

 $(document).ready(function() { var myLayout = $('body').layout({ west: { resizable: true, resizeWhileDragging: true, slidable: true } }); alert(myLayout.options.west.resizable); //returns false });
0
source

2018 update for Webpack users

as mentioned in @codeless, you need to load 'jquery-ui' before linking (by explicitly importing 'jquery-ui' first), but make sure you also load the modules 'resizable' and 'draggable' from jquery-ui

 import 'jquery-ui/ui/widgets/resizable'; import 'jquery-ui/ui/widgets/draggable';

otherwise, resizing the panel will not work

0
source

Source: https://habr.com/ru/post/916144/

More articles:


All Articles