JQuery组件easyui基本布局实现代码(jqueryui easyui)

以下是使用jQuery EasyUI实现基本布局的示例代码:

超文本标记语言

& lt！DOCTYPE html & gt

& lthtml & gt

& lthead & gt

& ltmeta charset = & quotUTF-8 & quot；& gt

& lttitle & gtEasyUI布局& lt/title & gt；

& ltlink rel = & quot样式表& quottype = & quottext/CSS & quot；href = & quothttps://cdn . jsdelivr . net/NPM/jquery-easy ui @ 1 . 9 . 21/themes/default/

easy ui . CSS & quot；& gt

& lt脚本类型= & quottext/JavaScript & quot；src = & quothttps://cdn . jsdelivr . net/NPM/jquery/dist/jquery . min . js & quot；& gt& lt/script & gt；

& lt脚本类型= & quottext/JavaScript & quot；src = & quothttps://cdn . jsdelivr . net/NPM/jquery-easy ui @ 1 . 9 . 21/jquery . easy ui . min . js & quot；& gt

& lt/script & gt；

& lt/head & gt；

& ltbody & gt

& ltdiv id = & quot布局& quotclass = & quoteasy ui-layout & quot；style = & quot宽度:500px高度:300px"& gt

& ltdiv数据-选项= & quot地区:& # 39；北& # 39；，拆分:true & quotstyle = & quot高度:50px"& gt北面板& lt/div & gt；

& ltdiv数据-选项= & quot地区:& # 39；西& # 39；，拆分:true & quotstyle = & quot宽度:100px"& gt西面板& lt/div & gt；

& ltdiv数据-选项= & quot地区:& # 39；中心& # 39；"& gt中心面板& lt/div & gt；

& ltdiv数据-选项= & quot地区:& # 39；东& # 39；，拆分:true & quotstyle = & quot宽度:100px"& gt东面板& lt/div & gt；

& ltdiv数据-选项= & quot地区:& # 39；南& # 39；，拆分:true & quotstyle = & quot高度:50px"& gt南面板& lt/div & gt；

& lt/div & gt；

& lt脚本& gt

$(function () {

$('#布局& # 39；).layout()；

});

& lt/script & gt；

& lt/body & gt；

& lt/html & gt；

在上面的代码中，我们使用jQuery EasyUI的布局组件实现了一个基本的布局。布局包含在带有easyui-layout的文件中。

都是a

(分割线是否可以拖)。该区域的内容可以根据需要填充。

最后，在JavaScript代码中调用layout()方法来初始化布局组件。

可以将上面的代码保存为HTML文件，打开看看效果。请注意，在实际使用中，您可能需要根据自己的需要调整布局。

样式和配置选项。另外，因为样例代码引用了CDN上的EasyUI CSS和JavaScript文件，所以要确保你的网络连接正常。

可以加载这些文件。

以上内容来自互联网，不代表本站全部观点！欢迎关注我们:zhujipindao。com