juqery easyui

私人做程序开发一直有个头疼的问题就是后台管理界面，以前一般都是自己用jquery+ps自己设计的，效果很一般，很不理想。

今天初次使用Jquery EasyUi，简单的做了个布局页面感觉还不错，给大家分享一下，就是不知道Jquery EasyUi浏览器兼容性怎么样。

最后效果图如下：

使用Jquery EasyUi开发之前首先要引用Jquery EasyUi的Js和Css文件，引用如下：

<script src="../jquery.min.js" type="text/javascript"></script>

<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

OK，下面就开始我们的布局。

一、使用布局面板进行整体布局，直接贴代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>LayOut</title>

<script src="../jquery.min.js" type="text/javascript"></script>

<script src="../jquery.easyui.min.js" type="text/javascript"></script>

<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />

<link href="../themes/icon.css" rel="stylesheet" type="text/css" />

<script language="JavaScript">

$(document).ready(function () {

});

</script>

<style>

.footer {

width: 100%;

text-align: center;

line-height: 35px;

}

.top-bg {

background-color: #d8e4fe;

height: 80px;

}

</style>

</head>

<body class="easyui-layout">

<div region="north" border="true" split="true" style="overflow: hidden; height: 80px;">

<div class="top-bg"></div>

</div>

<div region="south" border="true" split="true" style="overflow: hidden; height: 40px;">

</div>

<div region="west" split="true" title="导航菜单" style="width: 200px;">

</div>

<div id="mainPanle" region="center" style="overflow: hidden;">

</div>

</body>

</html>

以上代码效果如下（完成局部第一步）：

二、添加左侧菜单

左侧菜单使用的是jquery easyui的可伸缩面板控件和树形控件的结合，直接将可伸缩面板控件和树形控件放到west域中即可，并且编写点击事件，代码如下：

页面代码：

<div region="west" split="true" title="导航菜单" style="width: 200px;">

<div id="aa" class="easyui-accordion" style="position: absolute; top: 27px; left: 0px; right: 0px; bottom: 0px;">

<div title="博文管理" iconcls="icon-save" style="overflow: auto; padding: 10px;">

<ul class="easyui-tree">

<li>

<span>Folder</span>

<ul>

<li>

<span>Sub Folder 1</span>

<ul>

<li>

<span><a target="mainFrame" href="http://www.baidu.com">审核博客</a></span>

</li>

<li>

<span><a href="#">File 12</a></span>

</li>

<li>

<span>File 13</span>

</li>

</ul>

</li>

<li>

<span>File 2</span>

</li>

<li>

<span>File 3</span>

</li>

</ul>

</li>

<li>

<span><a href="#">File21</a></span>

</li>

</ul>

</div>

<div title="新闻管理" iconcls="icon-reload" selected="true" style="padding: 10px;">

content2

</div>

<div title="资源管理">

content3

</div>

Js点击事件代码：

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

<script language="JavaScript">

$(document).ready(function () {

$('.easyui-accordion li a').click(function () {

var tabTitle = $(this).text();

var url = $(this).attr("href");

addTab(tabTitle, url);

$('.easyui-accordion li div').removeClass("selected");

$(this).parent().addClass("selected");

}).hover(function () {

$(this).parent().addClass("hover");

}, function () {

$(this).parent().removeClass("hover");

});

function addTab(subtitle, url) {

if (!$('#tabs').tabs('exists', subtitle)) {

$('#tabs').tabs('add', {

title: subtitle,

content: createFrame(url),

closable: true,

width: $('#mainPanle').width() - 10,

height: $('#mainPanle').height() - 26

});

} else {

$('#tabs').tabs('select', subtitle);

}

tabClose();

}

function createFrame(url) {

var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0" src="' + url + '" style="width:100%;height:100%;"></iframe>';

return s;

}

function tabClose() {

/*双击关闭TAB选项卡*/

$(".tabs-inner").dblclick(function () {

var subtitle = $(this).children("span").text();

$('#tabs').tabs('close', subtitle);

})

$(".tabs-inner").bind('contextmenu', function (e) {

$('#mm').menu('show', {

left: e.pageX,

top: e.pageY,

});

var subtitle = $(this).children("span").text();

$('#mm').data("currtab", subtitle);

return false;

});

}

//绑定右键菜单事件

function tabCloseEven() {

//关闭当前

$('#mm-tabclose').click(function () {

var currtab_title = $('#mm').data("currtab");

$('#tabs').tabs('close', currtab_title);

})

//全部关闭

$('#mm-tabcloseall').click(function () {

$('.tabs-inner span').each(function (i, n) {

var t = $(n).text();

$('#tabs').tabs('close', t);

});

//关闭除当前之外的TAB

$('#mm-tabcloseother').click(function () {

var currtab_title = $('#mm').data("currtab");

$('.tabs-inner span').each(function (i, n) {

var t = $(n).text();

if (t != currtab_title)

$('#tabs').tabs('close', t);

});

//关闭当前右侧的TAB

$('#mm-tabcloseright').click(function () {

var nextall = $('.tabs-selected').nextAll();

if (nextall.length == 0) {

//msgShow('系统提示','后边没有啦~~','error');

alert('后边没有啦~~');

return false;

}

nextall.each(function (i, n) {

var t = $('a:eq(0) span', $(n)).text();

$('#tabs').tabs('close', t);

});

return false;

});

//关闭当前左侧的TAB

$('#mm-tabcloseleft').click(function () {

var prevall = $('.tabs-selected').prevAll();

if (prevall.length == 0) {

alert('到头了，前边没有啦~~');

return false;

}

prevall.each(function (i, n) {

var t = $('a:eq(0) span', $(n)).text();

$('#tabs').tabs('close', t);

});

return false;

});

//退出

$("#mm-exit").click(function () {

$('#mm').menu('hide');

})

}

});

以上代码效果图：

三、最后点击菜单时需要在center域显示点击后的内容页面,代码如下：

<h1>Welcome to jQuery UI!</h1>

</div>

本文已完到此结束。

原文连接：http://www.kwstu.com/ArticleView/kwstu_20139413501290

juqery easyui的更多相关文章

解决juqery easyui combobox只能选择问题
1.首先设定框为 combobox样式,该字段值为了进行值的显示 <tr class="odd_row"> <td class="TableLabel_ ...
jquery easyui中的dialog拖动超出浏览器问题解决办法
juqery easyui当鼠标点着拖动超出浏览器后,就回不来了,拉不下的问题: //控制dialog超出浏览器回到原来的地方 var default_left; var default_top;// ...
扩展jquery easyui datagrid编辑单元格
扩展jquery easyui datagrid编辑单元格 1.随便聊聊这段时间由于工作上的业务需求,对jquery easyui比较感兴趣,根据比较浅薄的js知识,对jquery easyui中的 ...
easyui combobox 不能选中值的问题
easyui comboxbox 下拉框加载到数据,但是不能选中.一般情况是重复渲染,页面有同名元素,valueField重复. 这次遇到的具体问题是,第一次刷新页面,可以选中,第二次不能选中.考虑到 ...
前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
前端框架 EasyUI （1）熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...
前端框架 EasyUI （0）重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（81）-数据筛选（万能查询）
系列目录前言听标题的名字似乎是一个非常牛X复杂的功能,但是实际上它确实是非常复杂的,我们本节将演示如何实现对数据,进行组合查询(数据筛选) 我们都知道Excel中是如何筛选数据的.就像下面一样他 ...

随机推荐

7.$a = 'abcdef'; 请取出$a的值并打印出第一个字母
echo $a[0]; echo $a{0}; echo chr(ord($a));//先输出$a字符串里的第一个字符的ASCII值再从指定的 ASCII 值返回字符.
Excel命名区域的创建、修改、删除、命名
因工作需要,需要用到 Excel实现多级下拉列表,这是预备知识! 链接地址:http://wenku.baidu.com/link?url=vHkAo25IXo6mabms-Jv0m3T7BRfAMg ...
使用Log4Net完成异常日志处理
1.在MVC的Modal文件夹建一个异常处理过滤器 public class MyExceptionAttribute:HandleErrorAttribute { public static Que ...
* 和 ** python
*代表tuple集合,**代表dict def func(a, b, c=0, *args, **kw) print ('a=',a, 'b=',b,'c=',c,'args=',args,'kw= ...
QT开发实战精解
无法打开包括文件<QApplication> No such file or directory 这一问题解决办法,使用QApplication时必须在项目pro文件中添加一句 QT ...
基于webrtc的视频通话时webrtc的接口调用流程
场景: 1.A call B 2.B answer 3.A connected with B 共同的步骤: A 和 B 都需要初始化webrtc模块,创建peerconnectionfactory 步 ...
JAVA基础知识之JDBC——RowSet
RowSet概念在C#中,提供了一个DataSet,可以把数据库的数据放在内存中进行离线操作(读写),操作完成之后再同步到数据库中去,Java中则提供了类似的功能RowSet. RowSet接口继承 ...
Ubuntu+Win7双系统grub的修复问题
最近,在grub引导的Ubuntu+Win7双系统上作业,用的是Ubuntu14.04.2.进行系统更新,更新到一般卡住了,恰好此时在进行grub相关文件的更新,我把机器重启后进入了grub resc ...
DSO、CUBE区别（覆盖、合计）
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
ELK 安装与配置
ELK日志分析之安装 1.介绍: NRT elasticsearch是一个近似实时的搜索平台,从索引文档到可搜索有些延迟,通常为1秒. 集群集群就是一个或多个节点存储数据,其中一个节点为主节点,这个 ...

juqery easyui

juqery easyui的更多相关文章

随机推荐

热门专题