link not opening in center pane

EasyUI Forum

September 16, 2025, 04:31:34 PM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > link not opening in center pane

Pages: [1]

« previous next »

Author

Topic: link not opening in center pane (Read 11931 times)

vquickl27

Newbie

Posts: 1

link not opening in center pane

« 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.

Code:

<!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>


	Logged

stworthy

Administrator
Hero Member

Posts: 3581

Re: link not opening in center pane

« Reply #1 on: March 25, 2013, 06:37:24 PM »

Add onclick attribute to your tree node.

Code:

<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.

Code:

	<script>
		function openPage(url){
			$('iframe').attr('src',url);
		}
	</script>


	Logged

Pages: [1]

« previous next »