All geek questions in one place

How to create a nested center and south in jQuery UI Layout Plug-in?

How can I create a nested inner centers and internal Yuga? Next, do not seem to do anything except display the "inner center" and "Inner South"? How can I make it display the layout linker for Inner Center and Inner South?

<html> <head> <title>TEST</title> <script src="jquery-latest.js"></script> <script src="jquery.layout-latest.js"></script> <script> $(document).ready(function () { $('body').layout({ applyDefaultStyles: true }); }); </script> </head> <body> <div class="ui-layout-center"> Center <div class="ui-layout-center">Inner Center</div> <div class="ui-layout-south">Inner South</div> </div> <div class="ui-layout-north">North</div> <div class="ui-layout-west">West</div> </body> </html>

http://layout.jquery-dev.net/demos/example.html

^ Similar to this, but with the "Inner Center" and "Inner South" in the "Center" area.

+4
source share
1 answer

If you want to have nested layouts, you need to call the layout for each container in which you want to invest. Therefore, you need to mark the current ui-layout-center , where you have a sub-container, for example. with id :

 <div class="ui-layout-center" id="inner"> <div class="ui-layout-center">Inner Center</div> <div class="ui-layout-south">Inner South</div> </div> <div class="ui-layout-north">North</div> <div class="ui-layout-west">West</div> -center" id = "inner"> <div class="ui-layout-center" id="inner"> <div class="ui-layout-center">Inner Center</div> <div class="ui-layout-south">Inner South</div> </div> <div class="ui-layout-north">North</div> <div class="ui-layout-west">West</div> -center"> Inner Center </ div> <div class="ui-layout-center" id="inner"> <div class="ui-layout-center">Inner Center</div> <div class="ui-layout-south">Inner South</div> </div> <div class="ui-layout-north">North</div> <div class="ui-layout-west">West</div> -north"> North </ div> <div class="ui-layout-center" id="inner"> <div class="ui-layout-center">Inner Center</div> <div class="ui-layout-south">Inner South</div> </div> <div class="ui-layout-north">North</div> <div class="ui-layout-west">West</div>

Again, call the layout on #inner , to create a nested layout:

 $('body').layout({ applyDefaultStyles: true }); $('#inner').layout({ applyDefaultStyles: true }); ({ $('body').layout({ applyDefaultStyles: true }); $('#inner').layout({ applyDefaultStyles: true }); layout ({ $('body').layout({ applyDefaultStyles: true }); $('#inner').layout({ applyDefaultStyles: true });

Demo JSFiddle.

See. Also dealer demo

+8
source

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

More articles:


All Articles