jQuery EasyUi实战教程之布局篇_jquery

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

最后效果图如下：

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

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

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

版权所有：酷网工作室

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

二、添加左侧菜单

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

页面代码：

Folder


Sub Folder 1


审核博客


File 12


File 13




File 2


File 3




File21




content2 


content3 

Js点击事件代码：

以上代码效果图：

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

Welcome to jQuery UI!

本文已完到此结束。希望本文分享对大家有所帮助。