前端框架jQuery EasyUI_01_前端使用jquery easyui-优快云博客

本文链接：https://blog.youkuaiyun.com/public_sbw/article/details/79695394

本文详细介绍如何使用 jQuery EasyUI 构建丰富的用户界面，包括页面布局、折叠面板及选项卡组件的配置与使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用jQuery EasyUI :

<!-- 导入 jquery 核心类库 -->
<script type="text/javascript" src=“./js/jquery-1.8.3.js"></script>
<!-- 导入 easyui 类库 -->
<script type="text/javascript" src=“.js/easyui/jquery.easyui.min.js"></script>
<!– 导入默认主题 CSS 文件-->
<link id="easyuiTheme" rel="stylesheet" type="text/css"
href=“.js/easyui/themes/default/easyui.css">
<!– 导入图标 CSS 文件-->
<link rel="stylesheet" type="text/css"
href=“.js/easyui/themes/icon.css">
<!– 导入国际化信息文件-->
<script
src=“./js/easyui/locale/easyui-lang-zh_CN.js"
type="text/javascript"></script>

jQuery EasyUI 页面布局layout:

<body class="easyui-layout">
	<div data-options="region:'north', title:'北部区域', split:true" style="height:120px"></div>
	<div data-options="region:'south', title:'南部区域'" style="height:120px"></div>
	<div data-options="region:'center', title:'中部区域'"></div>
	<div data-options="region:'west', title:'西部区域'" style="width:180px"></div>
	<div data-options="region:'east', title:'东部区域'" style="width:180px"></div>
</body>

    整个页面或某个div的页面布局：
        class="easyui-layout"
    设置区域和区域标题:
        data-options="region:'north', title:'North Title'"
    设置自适应父容器:
        data-options="fit:true"
    设置分割线：
        split=true/false
    设置边框:

border=xx

jQuery EasyUI 折叠面板accordion：

<body class="easyui-layout">
	<div data-options="region:'north', title:'北部区域', split:true" style="height:120px"></div>
	<div data-options="region:'south', title:'南部区域'" style="height:120px"></div>
	<div data-options="region:'center', title:'中部区域'"></div>
	<div data-options="region:'west', title:'西部区域'" style="width:180px">
		<div class="easyui-accordion" data-options="fit:true">
			<div data-options="title:'面板一'">面板一</div>
			<div data-options="title:'面板二'">面板二</div>
		</div>
	</div>
</body>

    设置折叠面板:
        class="easyui-accordion"
    设置自适应父容器：
        data-options="fit:true"
    设置面板标=标题：

data-options="title:'面板标题'"

jQuery EasyUI 选项卡 tabs ：

<script type="text/javascript">
	$(function(){
		$("#a1").click(function(){
			$("#tabs1").tabs("add",{
				title:'选项卡标题',
				content:'选项卡内容'
			})
		});
	});
</script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north', title:'北部区域', split:true" style="height:120px"></div>
	<div data-options="region:'south', title:'南部区域'" style="height:120px"></div>
	<div data-options="region:'center'">
		<div class="easyui-tabs" data-options="fit:true" id="tabs1">
			<div data-options="title:'选项卡一',closable:true">选项卡一</div>
			<div data-options="title:'选项卡二'">选项卡二</div>
		</div>
	</div>
	<div data-options="region:'west', title:'西部区域'" style="width:180px">
		<div class="easyui-accordion" data-options="fit:true">
			<div data-options="title:'面板一'">
				<a href="javascript:void(0)" id="a1">点击/a>
			</div>
			<div data-options="title:'面板二'">面板二</div>
		</div>
	</div>
</body>

    设置选项卡：
        class="easyui-tabs"
    设置自适应父容器:
        data-options="fit:true"
    设置可关闭选项卡：
        data-options="closabel:true"
    添加选项卡的方法：
        $("#id").tabs('add',{
            选项卡属性
        });
    选项卡属性：
        id/title/content/href...