Title: link not opening in center pane
Post by: vquickl27 on March 24, 2013, 05:18:14 PM
I am a beginner in learning jquery easyui. I am confused on how to open pages in center pane of layout. I have a top pane, left pane and center pane. On the left pane i have links that i want to open in the center pane. I'm having problems figuring out what my target would be for the link. any help would be appreciate. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>NB Portal</title>
<link rel="stylesheet" type="text/css" href="../../css/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../css/themes/icon.css">
<link rel="stylesheet" type="text/css" href="../../css/demo.css">
<script type="text/javascript" src="../../js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="../../js/jquery.easyui.min.js"></script>
<body class="easyui-layout">
<div data-options="region:'north',border:true" style="height:40px;color:white;font-size:16px; text-shadow: 2px 2px black; background: white url(http://localhost/css/bg.gif); background-size: 100% 100%; padding:10px">Welcome to MyPage </div>
<div data-options="region:'west',split:true,title:'Navigation'" style="width:150px;padding:10px;">
<ul id="tt" class="easyui-tree">
<li>
<span>Home</span>
<ul>
<li>
<span><a target="mainFrame" href="../home/index.html">Home</a></span>
</li>
</ul>
</li>
<li>
<span><a href="#">File 11</a></span>
<ul>
<li>
<span>Monitors</span>
</li>
</ul>
</li>
</ul>
</div>
<div name="mainFrame" data-options="region:'center',border:true">
<iframe target="mainFrame" src="index.html" width="98%" height="670"></iframe>
</div>
</body>
Title: Re: link not opening in center pane
Post by: stworthy on March 25, 2013, 06:37:24 PM
Add onclick attribute to your tree node. <ul id="tt" class="easyui-tree">
<li>
<span>Home</span>
<ul>
<li>
<span><a href="#" onclick="openPage('../home/index.html')">Home</a></span>
</li>
</ul>
</li>
<li>
<span><a href="#" onclick="openPage('file11.html')">File 11</a></span>
<ul>
<li>
<span>Monitors</span>
</li>
</ul>
</li>
</ul>
And then define the 'openPage' function in your page. <script>
function openPage(url){
$('iframe').attr('src',url);
}
</script>
|