管理布局-EasyUI-2

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_33800593

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript java python ViewUI

原文链接：https://my.oschina.net/hehongbo/blog/601701

本文介绍了一种利用EasyUI框架构建的系统，用于管理框架布局、账户、客户、监控平台和服务商管理系统等功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理布局</title>
    <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="http://www.java1234.com/jquery-easyui-1.3.3/themes/icon.css">
    <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="http://www.java1234.com/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
</head>
 
<body class="easyui-layout" data-options="fit:true">
 
    <!-- 头部 -->
    <div data-options="region:'north',border:false" style="height:67px;background:#4178C7;padding:10px">框架管理</div>
    
	<!-- 中部主体 -->
	<div data-options="region:'center'">
	
	<!-- 上面的导航栏 -->
	<div class="easyui-panel" style="height:36px;background:#DEE5EE;padding:3px">

		<div style="border:1px solid #ddd;">
			&nbsp;&nbsp;
			<a href="#" class="easyui-linkbutton" data-options="plain:true" style="background-color:#F06F00;"><span style="font-size:16px; color:#FFFFFF;font-weight:bold;">我的账户</span></a>
			&nbsp;&nbsp;
			<a href="#" class="easyui-linkbutton" data-options="plain:true"><span style="font-size:16px;color:#505050;font-weight:bold;">我的客户</span></a>
			&nbsp;&nbsp;
			<a href="#" class="easyui-linkbutton" data-options="plain:true"><span style="font-size:16px;color:#505050;font-weight:bold;">监控平台</span></a>
			&nbsp;&nbsp;
			<a href="#" class="easyui-linkbutton" data-options="plain:true"><span style="font-size:16px;color:#505050;font-weight:bold;">服务商管理系统</span></a>
			
			
			<input type="button" value="搜索设备" style="padding:5px;border:1px solid #99A6B8; background-color:#F06F00; float:right; width:82px;" onClick="$('#w').window('open')"/>
			<div style="float:right;">&nbsp;</div>
			<input type="text" placeholder="设备号(IMSI)" style="padding:5px;border:1px solid #99A6B8;float:right; width:227px;"/>
			
			
		</div>

	</div>
	
	<div class="easyui-panel" data-options="fit:true">

		<!-- 左侧栏 -->
        <div class="easyui-layout" data-options="fit:true">
			
            <div data-options="region:'west',split:true" style="width:150px;padding:10px">

                <ul id="tt" class="easyui-tree">
					<li>
						<span>我的账户</span>
						<ul>
							<li><span>账户首页</span></li>
						</ul>
					</li>
				</ul>

            </div>
			
			<!-- 右侧主体 -->
            <div data-options="region:'center',fit:true" style="clear: both;position:relative">
			
				<div class="easyui-tabs" style="width:500px;height:156px;float:left;clear: both;padding:3px;">
					<div title="我的工作台" style="padding:10px">
						<div style="float:left;">
							<img src="photo.jpg"/>
						</div>
						<div style="float:left;padding:10px;font-weight:bold; color:#666666;">
							<div style="padding:3px; font-size:14px;color:#505050;">广州非翔汽车用品有限公司</div>
							<div style="padding:3px;">超级管理员 ：</div>
							<div style="padding:3px;">过期设备 ：</div>
							<div style="padding:3px;">设备数量 ： </div>
						</div>
					</div>
				</div>
				
				<div class="easyui-tabs" style="width:700px;height:315px;float:left;padding:3px;">
					<div title="快速销售" style="padding:10px">
						<p style="font-size:14px">jQuery EasyUI框架能够让你轻松构建Web页面.</p>
						<ul>
							<li>easyui是一套基于JQuery的用户界面插件集合.</li>
							<li>easyui为构建现代流行的交互式体验JavaScript应用程序提供了基本功能.</li>
							<li>使用easyui你不需要写很多javascript代码，你通常只需要写一些html标签来定义用户界面.</li>
							<li>完美支持HTML5.</li>
							<li>easyui能够有效地节省你的开发时间.</li>
							<li>easyui很简单但是很强大.</li>
						</ul>
					</div>
					<div title="批量销售" style="padding:10px">
						这是帮助内容.
					</div>
				</div>

				
				<div class="easyui-tabs" style="width:500px;height:156px;padding:3px;position:absolute;top:159px;">
					<div title="我的服务商" style="padding:10px">
						<div style="float:left;">
							<img src="photo.jpg"/>
						</div>
						<div style="float:left;padding:10px;font-weight:bold; color:#666666;">
							<div style="padding:3px;">服务商 ： 深圳市大路宝汽车科技有限公司</div>
							<div style="padding:3px;">联系人 ：</div>
							<div style="padding:3px;">电　话 ：</div>
							<div style="padding:3px;">地　址 ：</div>
						</div>
					</div>
				</div>
				
            </div>

        </div>

    </div>
	
	 </div>
	 
	 <!-- 弹出的窗口 -->
	 <div id="w" class="easyui-window" title="设备搜索" data-options="closed:true" style="width:712px;height:518px;padding:10px;">
		窗体内容。
	</div>

    <script type="text/javascript">
         
        // 监听子节点的单击事件
        $('#tt').tree({
            onClick: function(node){
                //alert(node.target);
                // 没有子节点的才能点击生成选项
                if($('#tt').tree('isLeaf',node.target)){
                    addPanel(node.text);
                }
                 
            }
        });
 
        // 加载页面
        function addPanel(title){
           if($("#tb").tabs("exists",title)){
               $("#tb").tabs("select",title);
            }else{
               $("#tb").tabs("add",{
                   title: title,
                   content: '<div style="padding:10px">内容'+title+'</div>',//这里的content里放想要显示的界面
                   closable:true
               });
            }
        }
 
    </script>
     
</body>
 
</html>

转载于:https://my.oschina.net/hehongbo/blog/601701