easyUI常用实例

来源：互联网发布：mac微信公众号菜单栏编辑：程序博客网时间：2024/05/16 09:12

首先网页引用：

    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><link rel="stylesheet" type="text/css" href="Css/demo.css"><script type="text/javascript" src="js/jquery-1.8.0.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script>

一、Window窗口

效果：

代码：

<div style="margin:10px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('open')">Open</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#w').window('close')">Close</a></div><div id="w" class="easyui-window" title="Modal Window" data-options="modal:true,closed:true,iconCls:'icon-save'" style="width:500px;height:200px;padding:10px;">The window content.</div>

二、Tabs 滑动门

效果：

代码：

    <div id="tt" class="easyui-tabs" style="width:700px;height:250px" data-options="tabPosition:'left'"><div title="About" style="padding:10px"><p style="font-size:14px">jQuery EasyUI framework help you build your web page easily.</p><ul><li>easyui is a collection of user-interface plugin based on jQuery.</li><li>easyui provides essential functionality for building modem, interactive, javascript applications.</li><li>using easyui you don't need to write many javascript code, you usually defines user-interface by writing some HTML markup.</li><li>complete framework for HTML5 web page.</li><li>easyui save your time and scales while developing your products.</li><li>easyui is very easy but powerful.</li></ul></div><div title="My Documents" style="padding:10px"><ul class="easyui-tree" data-options="url:'../tabs/tree_data1.json',animate:true"></ul></div><div title="Help" data-options="iconCls:'icon-help',closable:true" style="padding:10px">This is the help content.</div></div>

三、Tab滑动门 - 动态添加

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery EasyUI Demo</title><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"><script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script><script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script><script>    $(document).ready(function(){    addTab('标题1','内容1');    addTab('标题2','内容2');             });    function addTab(title, content){if ($('#tt').tabs('exists', title)){$('#tt').tabs('select', title);} else {var content = '内容:'+content;$('#tt').tabs('add',{title:title,content:content,closable:true});}    }</script></head><body><div id="tt" class="easyui-tabs" style="width:400px;height:250px;"></div></body></html>