jQuery EasyUi实战教程之布局篇

jQuery 前端之家
前端之家收集整理的这篇文章主要介绍了jQuery EasyUi实战教程之布局篇，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

最后效果图如下：

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

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

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

页面代码：

Js点击事件代码：

dion 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 = '