欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

jQuery EasyUi实战教程之布局篇_jquery

程序员文章站 2022-04-15 15:49:37
...
jQuery EasyUI Layout是一种基于jQuery的布局框架,今天初次使用Jquery EasyUi,简单的做了个布局页面感觉还不错,给大家分享一下,就是不知道Jquery EasyUi浏览器兼容性怎么样。

最后效果图如下:

jQuery EasyUi实战教程之布局篇_jquery

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

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

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



LayOut

以上代码效果如下(完成局部第一步):

jQuery EasyUi实战教程之布局篇_jquery

二、添加左侧菜单

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

页面代码:

content2
content3

Js点击事件代码:


以上代码效果图:

jQuery EasyUi实战教程之布局篇_jquery

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

Welcome to jQuery UI!

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