jQuery的布局，同时通过用户界面视图装载不工作 [英] jquery layout not working while loading through ui-view
本文介绍了jQuery的布局，同时通过用户界面视图装载不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建使用JQuery布局的布局。如果我在正常索引文件使用它工作正常。但是，当我试图通过用户界面视图目录加载，它不加载。请帮助。
我index.html`
＆LT; HTML NG-应用=样品＆GT;＆LT; HEAD＆GT;
＆LT;标题＆GT;样品LT; /标题＆GT;
＆LT;链接类型=文/ CSS相对=样式的href =/＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =的jquery.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =jquery.ui.all.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =jquery.layout.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =角animate.js＆GT;＆下; /脚本＆GT;
＆LT;脚本SRC =角-UI-router.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;脚本类型=文/ JavaScript的＆GT;
VAR mylayout;
$（文件）。就绪（函数（）{
。myLayout = $（'＃集装箱'）布局（{west_size：400，
west_minSize：100
}）;
}）
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT;格UI的视图＆gt;＆LT; / DIV＆GT;
＆LT; /身体GT;＆LT;脚本类型=文/ JavaScript的SRC =app.js＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =home.js＆GT;
＆LT; / HTML＆GT;
`
我app.js为波纹管;
变种SP = {};
SP.CONTROLLERS = angular.module（'spControllers'，[]）;
sp.Dependencies = ['spControllers'，ui.router，'ngAnimate'
];spModule = angular.module（'spModule'，SP.dependencies）
的.config（['$ stateProvider'，'$ urlRouterProvider'，'$ httpProvider'，
功能（$ stateProvider，$ urlRouterProvider，$ httpProvider）{$ stateProider。
状态（'家'，{
网址：''，
templateurl：home.html做为
}）
}]）;
我是home.html的下面;
＆LT; DIV ID =容器NG-控制器=smpCTRL＆GT;
＆LT; DIV CLASS =窗格界面布局 - 西＆GT;西＆LT; / DIV＆GT;
＆LT; DIV CLASS =窗格界面布局中心＆GT;中心＆lt; / DIV＆GT;
＆LT; / DIV＆GT;
我home.js是如下;
SP＆GT; CONTROLLERS.controller（smpCTRL，['$范围'，函数（$范围）{
的console.log（sucess）;
}]）;
CSS如下;
#container的{
背景：＃999;
高度：100％;
保证金：0汽车;
宽度：100％;
最大宽度：900px;
最小宽度：700像素;
_width：700像素; / *最小宽度为IE6 * /
}
.pane {
显示：无; / *当布局inits会出现* /
}
/ *
*默认布局主题
*
*创造了jquery.layout
*
*版权所有（C）2010
*法布里奇奥Balliano（http://www.fabrizioballiano.net）
*凯文Dalman（http://allpro.net）
*
*双采用GPL许可协议（http://www.gnu.org/licenses/gpl.html）
*和麻省理工学院（http://www.opensource.org/licenses/mit-license.php）许可证。
*
*更新时间：2010-02-10
*注意：为code可读性，认为这有一个固定的空间字体和标签等于4个字符
* // *
*默认字体
*只是为了演示页面更好看 - 实际上没有到布局有关！
* /
身体 {
FONT-FAMILY：日内瓦，宋体，黑体，无衬线;
字体大小：100％;
* FONT-SIZE：80％;
}/ *
* PANES＆安培; CONTENT-的DIV
* /
的.ui布局窗格{/ *所有的窗格* /
背景：#FFF;
边框：1px的固体#BBB;
填充：10px的;
溢出：汽车;
/ *不添加滚动（或填充），以具有内容的div窗格，
否则，你可能会得到双重滚动条 - 在窗格和内容DIV
- 使用UI布局，包装类，如果面板上有内容的div
- 如果使用窗格有内部布局UI布局容器
* /
}
内窗格/ *（滚动）内容的div允许固定报头（多个）和/或页脚（多个）* /
的.ui布局内容{
填充：10px的;
位置：相对; / *包含浮动或定位元素* /
溢出：汽车; / *添加滚动到内容DIV * /
}/ *
*实用工具类
*必须出现在窗格级的上方，将覆盖
*这些类不自动生成的，并非用于布局
* /
.layout孩子容器，
.layout内容容器{
填充：0;
溢出：隐藏;
}
.layout孩子容器{
边框：0; / *删除边框，因为内布局窗格可能有边界* /
}
.layout滚动{
溢出：汽车;
}
.layout隐藏{
显示：无;
}/ *
*缩放工具酒吧
* /
的.ui布局，大小调整{/ *所有的缩放工具酒吧'* /
背景：#DDD;
边框：1px的固体#BBB;
边框宽度：0;
}
的.ui-布局缩放工具拖{/ * REAL大小调整，而在调整的进展* /
}
的.ui-布局缩放工具悬停{/ *会影响打开和关闭状态* /
}
/ *注：悬停时和拖动设置为相同的颜色看起来最好，
否则颜色变化的同时拖动栏时，不能用鼠标跟上* /
的.ui-布局缩放工具打开悬停，/ *悬停颜色调整* /
的.ui-布局缩放工具拖动{/ *缩放工具beging'拖'* /
背景：＃C4E1A4;
}
的.ui-布局缩放工具拖动{/ *克隆的大小调整被拖* /
边框：1px的固体#BBB;
}
的.ui-布局缩放工具 - 北 - 拖动，
的.ui-布局缩放工具一南一拖{
边框宽度：1px的0;
}
的.ui-布局缩放工具 - 西拖动，
的.ui-布局缩放工具 - 东 - 拖{
边框宽度：1px的0;
}
/ *注意：添加一个'拖限制'颜色提供视觉反馈时，图像缩放命中最小/最大尺寸限制* /
的.ui-布局缩放工具拖动限制{/ *在最小或最大尺寸限制克隆大小调整* /
背景：＃E1A4A4; / * *红/
} 的.ui-布局缩放工具封闭悬停{/ *悬停颜色滑开'* /
背景：＃EBD5AA;
}
的.ui布局，图像缩放滑动{/ *缩放工具时，窗格滑开'* /
不透明度：0.10; / *显示只有轻微的阴影* /
过滤器：α（不透明= 10）;
}
的.ui布局，图像缩放滑动悬停{/ *滑动缩放工具 - 悬停* /
不透明度：1.00; / *上悬停，显示缩放工具栏正常* /
过滤器：α（不透明度= 100）;
}
/ *滑动缩放工具 - 加外边界来缩放工具上悬停
*此示例演示了如何针对特定的窗格和状态* /
的.ui-布局缩放工具 - 北 - 滑动悬停{下边框宽度：1px的; }
的.ui-布局缩放工具向南滑动悬停{边境顶宽度：1px的; }
的.ui-布局缩放工具 - 西滑悬停{右边框宽度：1px的; }
的.ui-布局缩放工具 - 东 - 滑动悬停{左边框宽度：1px的; }/ *
* TOGGLER-BUTTONS
* /
的.ui-布局toggler {
边框：1px的固体#BBB; / *匹配窗格边界* /
背景色：#BBB;
}
的.ui-布局缩放工具悬停的.ui布局，toggler {
不透明度：0.60;
过滤器：α（不透明= 60）;
}
的.ui-布局toggler悬停，/ *需要时，不可调整大小* /
的.ui-布局缩放工具悬停的.ui-布局toggler悬停{/ *需要的特异性改变大小时* /
背景颜色：＃FC6;
不透明度：1.00;
过滤器：α（不透明度= 100）;
}
的.ui-布局toggler北，
的.ui-布局toggler南{
边框宽度：1px的0; / *左/右边缘* /
}
的.ui-布局toggler西，
的.ui-布局toggler东{
边框宽度：1px的0; / *顶部/底部边框* /
}
/ *隐藏toggler按钮时，窗格滑开'* /
的.ui布局，图像缩放滑动的.ui布局，toggler {
显示：无;
}
/ *
*样式的文字我们把里面的togglers
* /
的.ui-布局toggler .content {
颜色：＃666;
字体大小：12像素;
字体重量：大胆的;
宽度：100％;
填充底：0.35ex; / *文字跨度内垂直居中文本* /
}/ *
*窗格 - 面具
*这些样式都在面具elems硬codeD，但也
*因为这里包含！重要的是确保将覆盖所有的通用样式
* /
的.ui布局面罩{
！边界：无重要;
填充：0重要;
保证金：0重要;
溢出：隐藏重要的;！
位置：绝对重要的;！
不透明度：0重要;
过滤器：阿尔法（不透明度=0）很重要;
}
的.ui布局面罩，里面窗格{/ *总是内窗格口罩时除外面板是一个iframe * /
顶：0重要;
左：0重要;！
宽度：100％重要;！
身高：100％重要;！
}
div.ui布局面罩{} / *标准掩码内部框架* /
iframe.ui布局面罩{}的对象/小程序/ *额外的面具* // *
*默认打印样式
* /
@media打印{
/ *
*除非你要它出现在屏幕上打印的布局，
*这些HTML /车身造型需要，让内容流
* /
HTML {
！高度：汽车重要的;
！溢出：可见重要的;
}
body.ui布局容器{
位置：静态重要;！
顶部：汽车重要的;！
！底：汽车重要的;
左：汽车重要的;
右：汽车重要的;
/ *只有IE6有容器的宽度和放大器;通过高度设置布局* /
_width：汽车重要的;
_height：汽车重要的;
}
的.ui-布局调整器，的.ui-布局toggler {
！显示：无重要;
}
/ *
*默认窗格打印样式禁用定位，边框和背景。
*您可以修改这些样式但它满足您的需求。
* /
的.ui布局窗格{
！边界：无重要;
背景：透明重要;！
！位置：相对重要的;
顶部：汽车重要的;！
！底：汽车重要的;
左：汽车重要的;
右：汽车重要的;
！宽度：汽车重要的;
！高度：汽车重要的;
！溢出：可见重要的;
}
}
解决方案
包含脚本的home.html的局部模板里面，应该工作，也有类似的问题，我的猜测是，该特定DOM元素不存在时，你功能最初执行。
home.html的
＆LT;脚本类型=文/ JavaScript的＆GT;
VAR mylayout;
$（文件）。就绪（函数（）{
。myLayout = $（'＃集装箱'）布局（{west_size：400，
west_minSize：100
}）;
}）
＆LT; / SCRIPT＆GT;＆LT; DIV ID =容器NG-控制器=smpCTRL＆GT;
＆LT; DIV CLASS =窗格界面布局 - 西＆GT;西＆LT; / DIV＆GT;
＆LT; DIV CLASS =窗格界面布局中心＆GT;中心＆lt; / DIV＆GT;
＆LT; / DIV＆GT;
I have created a layout using JQuery layout. It is working fine if I use it in normal index file. But when I try to load through ui-view directory, it's not loading. Please help.
my index.html`
<html ng-app="sample">
<head>
<title>sample</title>
<link type="text/css" rel="stylesheet" href=""/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script src="jquery.js"></script>
<script src="jquery.ui.all.js"></script>
<script src="jquery.layout.js"></script>
<script src="angular-animate.js"></script>
<script src="angular-ui-router.min.js"></script>
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
</head>
<body>
<div ui-view></div>
</body>
<script type="text/javascript" src="app.js">
<script type="text/javascript" src="home.js">
</html>
`
my app.js as bellow;
var SP ={};
SP.CONTROLLERS = angular.module('spControllers',[]);
sp.Dependencies =['spControllers',ui.router,'ngAnimate'
];
spModule = angular.module('spModule',SP.dependencies)
.config(['$stateProvider','$urlRouterProvider','$httpProvider',
function($stateProvider,$urlRouterProvider,$httpProvider){
$stateProider.
state('home',{
url:'',
templateurl:'home.html'
})
}]);
my home.html is as below;
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
my home.js is as below;
SP>CONTROLLERS.controller("smpCTRL", ['$scope',function($scope){
console.log("sucess");
}]);
css as below;
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
/*
* Default Layout Theme
*
* Created for jquery.layout
*
* Copyright (c) 2010
* Fabrizio Balliano (http://www.fabrizioballiano.net)
* Kevin Dalman (http://allpro.net)
*
* Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
* and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
*
* Last Updated: 2010-02-10
* NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
*/
/*
* DEFAULT FONT
* Just to make demo-pages look better - not actually relevant to Layout!
*/
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 100%;
*font-size: 80%;
}
/*
* PANES & CONTENT-DIVs
*/
.ui-layout-pane { /* all 'panes' */
background: #FFF;
border: 1px solid #BBB;
padding: 10px;
overflow: auto;
/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
otherwise you may get double-scrollbars - on the pane AND on the content-div
- use ui-layout-wrapper class if pane has a content-div
- use ui-layout-container if pane has an inner-layout
*/
}
/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
.ui-layout-content {
padding: 10px;
position: relative; /* contain floated or positioned elements */
overflow: auto; /* add scrolling to content-div */
}
/*
* UTILITY CLASSES
* Must come AFTER pane-class above so will override
* These classes are NOT auto-generated and are NOT used by Layout
*/
.layout-child-container,
.layout-content-container {
padding: 0;
overflow: hidden;
}
.layout-child-container {
border: 0; /* remove border because inner-layout-panes probably have borders */
}
.layout-scroll {
overflow: auto;
}
.layout-hide {
display: none;
}
/*
* RESIZER-BARS
*/
.ui-layout-resizer { /* all 'resizer-bars' */
background: #DDD;
border: 1px solid #BBB;
border-width: 0;
}
.ui-layout-resizer-drag { /* REAL resizer while resize in progress */
}
.ui-layout-resizer-hover { /* affects both open and closed states */
}
/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
otherwise color shifts while dragging when bar can't keep up with mouse */
.ui-layout-resizer-open-hover , /* hover-color to 'resize' */
.ui-layout-resizer-dragging { /* resizer beging 'dragging' */
background: #C4E1A4;
}
.ui-layout-resizer-dragging { /* CLONED resizer being dragged */
border: 1px solid #BBB;
}
.ui-layout-resizer-north-dragging,
.ui-layout-resizer-south-dragging {
border-width: 1px 0;
}
.ui-layout-resizer-west-dragging,
.ui-layout-resizer-east-dragging {
border-width: 0 1px;
}
/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
.ui-layout-resizer-dragging-limit { /* CLONED resizer at min or max size-limit */
background: #E1A4A4; /* red */
}
.ui-layout-resizer-closed-hover { /* hover-color to 'slide open' */
background: #EBD5AA;
}
.ui-layout-resizer-sliding { /* resizer when pane is 'slid open' */
opacity: .10; /* show only a slight shadow */
filter: alpha(opacity=10);
}
.ui-layout-resizer-sliding-hover { /* sliding resizer - hover */
opacity: 1.00; /* on-hover, show the resizer-bar normally */
filter: alpha(opacity=100);
}
/* sliding resizer - add 'outside-border' to resizer on-hover
* this sample illustrates how to target specific panes and states */
.ui-layout-resizer-north-sliding-hover { border-bottom-width: 1px; }
.ui-layout-resizer-south-sliding-hover { border-top-width: 1px; }
.ui-layout-resizer-west-sliding-hover { border-right-width: 1px; }
.ui-layout-resizer-east-sliding-hover { border-left-width: 1px; }
/*
* TOGGLER-BUTTONS
*/
.ui-layout-toggler {
border: 1px solid #BBB; /* match pane-border */
background-color: #BBB;
}
.ui-layout-resizer-hover .ui-layout-toggler {
opacity: .60;
filter: alpha(opacity=60);
}
.ui-layout-toggler-hover , /* need when NOT resizable */
.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
background-color: #FC6;
opacity: 1.00;
filter: alpha(opacity=100);
}
.ui-layout-toggler-north ,
.ui-layout-toggler-south {
border-width: 0 1px; /* left/right borders */
}
.ui-layout-toggler-west ,
.ui-layout-toggler-east {
border-width: 1px 0; /* top/bottom borders */
}
/* hide the toggler-button when the pane is 'slid open' */
.ui-layout-resizer-sliding .ui-layout-toggler {
display: none;
}
/*
* style the text we put INSIDE the togglers
*/
.ui-layout-toggler .content {
color: #666;
font-size: 12px;
font-weight: bold;
width: 100%;
padding-bottom: 0.35ex; /* to 'vertically center' text inside text-span */
}
/*
* PANE-MASKS
* these styles are hard-coded on mask elems, but are also
* included here as !important to ensure will overrides any generic styles
*/
.ui-layout-mask {
border: none !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
position: absolute !important;
opacity: 0 !important;
filter: Alpha(Opacity="0") !important;
}
.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
}
div.ui-layout-mask {} /* standard mask for iframes */
iframe.ui-layout-mask {} /* extra mask for objects/applets */
/*
* Default printing styles
*/
@media print {
/*
* Unless you want to print the layout as it appears onscreen,
* these html/body styles are needed to allow the content to 'flow'
*/
html {
height: auto !important;
overflow: visible !important;
}
body.ui-layout-container {
position: static !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
/* only IE6 has container width & height set by Layout */
_width: auto !important;
_height: auto !important;
}
.ui-layout-resizer, .ui-layout-toggler {
display: none !important;
}
/*
* Default pane print styles disables positioning, borders and backgrounds.
* You can modify these styles however it suit your needs.
*/
.ui-layout-pane {
border: none !important;
background: transparent !important;
position: relative !important;
top: auto !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
}
}
解决方案
Include your script inside your home.html partial template, that should work, had a similar issue, my guess is that that particular dom element does not exist when your function is initially executed.
home.html
<script type="text/javascript">
var mylayout;
$(document).ready(function(){
myLayout = $('#container').layout({west_size:400,
west_minSize:100
});
})
</script>
<div id="container" ng-controller="smpCTRL">
<div class="pane ui-layout-west">WEST</div>
<div class="pane ui-layout-center">CENTER</div>
</div>
这篇关于jQuery的布局，同时通过用户界面视图装载不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
