Commit ab2872c1 authored by 季圣华's avatar 季圣华
Browse files

升级easyUI到1.9.4版本

parent 0527b980
...@@ -11,12 +11,9 @@ ...@@ -11,12 +11,9 @@
</head> </head>
<body> <body>
<h2>Constrain Draggable</h2> <h2>Constrain Draggable</h2>
<div class="demo-info"> <p>The draggable object can only be moved within its parent container.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>The draggable object can only be moved within its parent container.</div> <div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px">
</div>
<div style="margin:10px 0;"></div>
<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:500px;height:300px">
<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;"> <div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
</div> </div>
</div> </div>
......
...@@ -11,12 +11,9 @@ ...@@ -11,12 +11,9 @@
</head> </head>
<body> <body>
<h2>Snap Draggable</h2> <h2>Snap Draggable</h2>
<div class="demo-info"> <p>This sample shows how to snap a draggable object to a 20x20 grid.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>This sample shows how to snap a draggable object to a 20x20 grid.</div> <div class="easyui-panel" style="position:relative;overflow:hidden;width:500px;height:300px">
</div>
<div style="margin:10px 0;"></div>
<div style="position:relative;overflow:hidden;border:1px solid #ccc;width:500px;height:300px">
<div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;"> <div class="easyui-draggable" data-options="onDrag:onDrag" style="width:100px;height:100px;background:#fafafa;border:1px solid #ccc;">
</div> </div>
</div> </div>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Accept a Drop</h2> <h2>Accept a Drop</h2>
<div class="demo-info"> <p>Some draggable object can not be accepted.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>Some draggable object can not be accepted.</div>
</div>
<div style="margin:10px 0;"></div>
<div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;"> <div id="source" style="border:1px solid #ccc;width:300px;height:400px;float:left;margin:5px;">
drag me! drag me!
<div id="d1" class="drag">Drag 1</div> <div id="d1" class="drag">Drag 1</div>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Basic Droppable</h2> <h2>Basic Droppable</h2>
<div class="demo-info"> <p>Drag the boxed on left to the target area on right.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>Drag the boxed on left to the target area on right.</div>
</div>
<div style="margin:10px 0;"></div>
<div style="float:left;width:200px;margin-right:20px;"> <div style="float:left;width:200px;margin-right:20px;">
<div class="title">Source</div> <div class="title">Source</div>
<div> <div>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Change Items Order</h2> <h2>Change Items Order</h2>
<div class="demo-info"> <p>Drag the list items to change their order.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>Drag the list items to change their order.</div>
</div>
<div style="margin:10px 0;"></div>
<ul style="margin:0;padding:0;margin-left:10px;"> <ul style="margin:0;padding:0;margin-left:10px;">
<li class="drag-item">Drag 1</li> <li class="drag-item">Drag 1</li>
<li class="drag-item">Drag 2</li> <li class="drag-item">Drag 2</li>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic FileBox - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic FileBox</h2>
<p>The filebox component represents a file field of the forms.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="Upload File" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-textbox" label="Name:" labelPosition="top" style="width:100%">
</div>
<div style="margin-bottom:20px">
<input class="easyui-filebox" label="File1:" labelPosition="top" data-options="prompt:'Choose a file...'" style="width:100%">
</div>
<div style="margin-bottom:40px">
<input class="easyui-filebox" label="File2:" labelPosition="top" data-options="prompt:'Choose another file...'" style="width:100%">
</div>
<div>
<a href="#" class="easyui-linkbutton" style="width:100%">Upload</a>
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Button Align on FileBox - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Button Align on FileBox</h2>
<p>Change the button align to the left or right of filebox.</p>
<div style="margin:20px 0 40px 0;"></div>
<span>Select Button Align:</span>
<select onchange="changeAlign(this.value)">
<option value="left">Left</option>
<option value="right" selected>Right</option>
</select>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<input id="fb" class="easyui-filebox" style="width:100%" data-options="prompt:'Choose a file...'">
</div>
<script type="text/javascript">
function changeAlign(align){
$('#fb').filebox({buttonAlign:align});
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid FileBox - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Fluid FileBox</h2>
<p>This example shows how to set the width of FileBox to a percentage of its parent container.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-filebox" label="width: 100%" labelPosition="top" style="width:100%">
</div>
<div style="margin-bottom:20px">
<input class="easyui-filebox" label="width: 80%" labelPosition="top" style="width:80%">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Form - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Basic Form</h2>
<p>Fill the form and submit it.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
<form id="ff" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
</div>
<div style="margin-bottom:20px">
<select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
<script>
function submitForm(){
$('#ff').form('submit');
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Floating Label - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/material-blue/easyui.css">
<link rel="stylesheet" type="text/css" href="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../source/jquery.validatebox.js"></script>
<script type="text/javascript" src="../../source/jquery.textbox.js"></script>
</head>
<body>
<h2>Floating Label</h2>
<p>This example shows how to create inspired text fields with animated floating labels.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
<form id="ff" method="post">
<div class="form-floating-label form-field" style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',labelPosition:'top'">
</div>
<div class="form-floating-label form-field" style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',labelPosition:'top',validType:'email'">
</div>
<div class="form-floating-label form-field" style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:',labelPosition:'top'">
</div>
<div class="form-floating-label form-field" style="margin-bottom:20px">
<input class="easyui-textbox" name="message" style="width:100%;min-height:100px" data-options="label:'Message:',labelPosition:'top',multiline:true">
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
<script>
function submitForm(){
$('#ff').form('submit');
}
function clearForm(){
$('#ff').form('clear');
}
function err(target, message){
var t = $(target);
if (t.hasClass('textbox-text')){
t = t.parent();
}
var m = t.next('.error-message');
if (!m.length){
m = $('<div class="error-message"></div>').insertAfter(t);
}
m.html(message);
}
</script>
</body>
</html>
\ No newline at end of file
...@@ -3,5 +3,6 @@ ...@@ -3,5 +3,6 @@
"email":"easyui@gmail.com", "email":"easyui@gmail.com",
"subject":"Subject Title", "subject":"Subject Title",
"message":"Message Content", "message":"Message Content",
"language":"en" "language":"de",
"accept":"true"
} }
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Load Form Data - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Load Form Data</h2>
<p>Click the buttons below to load form data.</p>
<div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadLocal()">LoadLocal</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="loadRemote()">LoadRemote</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">Clear</a>
</div>
<div class="easyui-panel" title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
<form id="ff" method="post">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
</div>
<div style="margin-bottom:20px">
<select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
</div>
<div style="margin-bottom:20px">
<label for="accept" class="textbox-label">Accept:</label>
<input id="accept" type="checkbox" name="accept" value="true">
</div>
</form>
</div>
<script>
function loadLocal(){
$('#ff').form('load',{
name:'myname',
email:'mymail@gmail.com',
subject:'subject',
message:'message',
language:'en',
accept:true
});
}
function loadRemote(){
$('#ff').form('load', 'form_data1.json');
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Validate Form on Submit - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Validate Form on Submit</h2>
<p>The form does not perform validation before being submitted.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="New Topic" style="width:100%;max-width:400px;padding:30px 60px;">
<form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'Name:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="email" style="width:100%" data-options="label:'Email:',required:true,validType:'email'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="subject" style="width:100%" data-options="label:'Subject:',required:true">
</div>
<div style="margin-bottom:20px">
<input class="easyui-textbox" name="message" style="width:100%;height:60px" data-options="label:'Message:',multiline:true">
</div>
<div style="margin-bottom:20px">
<select class="easyui-combobox" name="language" label="Language" style="width:100%"><option value="ar">Arabic</option><option value="bg">Bulgarian</option><option value="ca">Catalan</option><option value="zh-cht">Chinese Traditional</option><option value="cs">Czech</option><option value="da">Danish</option><option value="nl">Dutch</option><option value="en" selected="selected">English</option><option value="et">Estonian</option><option value="fi">Finnish</option><option value="fr">French</option><option value="de">German</option><option value="el">Greek</option><option value="ht">Haitian Creole</option><option value="he">Hebrew</option><option value="hi">Hindi</option><option value="mww">Hmong Daw</option><option value="hu">Hungarian</option><option value="id">Indonesian</option><option value="it">Italian</option><option value="ja">Japanese</option><option value="ko">Korean</option><option value="lv">Latvian</option><option value="lt">Lithuanian</option><option value="no">Norwegian</option><option value="fa">Persian</option><option value="pl">Polish</option><option value="pt">Portuguese</option><option value="ro">Romanian</option><option value="ru">Russian</option><option value="sk">Slovak</option><option value="sl">Slovenian</option><option value="es">Spanish</option><option value="sv">Swedish</option><option value="th">Thai</option><option value="tr">Turkish</option><option value="uk">Ukrainian</option><option value="vi">Vietnamese</option></select>
</div>
</form>
<div style="text-align:center;padding:5px 0">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
</div>
</div>
<script>
function submitForm(){
$('#ff').form('submit',{
onSubmit:function(){
return $(this).form('enableValidation').form('validate');
}
});
}
function clearForm(){
$('#ff').form('clear');
}
</script>
</body>
</html>
\ No newline at end of file
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Add and Remove Layout</h2> <h2>Add and Remove Layout</h2>
<div class="demo-info"> <p>Click the buttons below to add or remove region panel of layout.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;">
<div>Click the buttons below to add or remove region panel of layout.</div>
</div>
<div style="margin:10px 0;">
<span>Select Region Panel:</span> <span>Select Region Panel:</span>
<select id="region"> <select id="region">
<option value="north">North</option> <option value="north">North</option>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Auto Height for Layout</h2> <h2>Auto Height for Layout</h2>
<div class="demo-info"> <p>This example shows how to auto adjust layout height after dynamically adding items.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;">
<div>This example shows how to auto adjust layout height after dynamically adding items.</div>
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="addItem()">Add Item</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="removeItem()">Remove Item</a>
</div> </div>
...@@ -53,8 +50,9 @@ ...@@ -53,8 +50,9 @@
var oldHeight = p.panel('panel').outerHeight(); var oldHeight = p.panel('panel').outerHeight();
p.panel('resize', {height:'auto'}); p.panel('resize', {height:'auto'});
var newHeight = p.panel('panel').outerHeight(); var newHeight = p.panel('panel').outerHeight();
c.height(c.height() + newHeight - oldHeight); c.layout('resize',{
c.layout('resize'); height: (c.height() + newHeight - oldHeight)
});
} }
</script> </script>
</body> </body>
......
...@@ -11,15 +11,12 @@ ...@@ -11,15 +11,12 @@
</head> </head>
<body> <body>
<h2>Basic Layout</h2> <h2>Basic Layout</h2>
<div class="demo-info"> <p>The layout contains north,south,west,east and center regions.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>The layout contains north,south,west,east and center regions.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;"> <div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true" title="East" style="width:180px;"></div> <div data-options="region:'east',split:true" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true" title="West" style="width:100px;"></div> <div data-options="region:'west',split:true" title="West" style="width:100px;"></div>
<div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'"> <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
<table class="easyui-datagrid" <table class="easyui-datagrid"
...@@ -30,8 +27,8 @@ ...@@ -30,8 +27,8 @@
<th data-options="field:'productid'" width="100">Product ID</th> <th data-options="field:'productid'" width="100">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="80">List Price</th> <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th> <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr'" width="150">Attribute</th> <th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="50">Status</th> <th data-options="field:'status',align:'center'" width="60">Status</th>
</tr> </tr>
</thead> </thead>
</table> </table>
......
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Collapse Title in Layout - jQuery EasyUI Demo</title>
<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="../demo.css">
<script type="text/javascript" src="../../jquery.min.js"></script>
<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Collapse Title in Layout</h2>
<p>The title bar will display while collapse a region panel.</p>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div>
<div data-options="region:'east',split:true,hideCollapsedContent:false" title="East" style="width:100px;"></div>
<div data-options="region:'west',split:true,hideCollapsedContent:false,collapsed:true" title="West" style="width:100px;"></div>
<div data-options="region:'center',title:'Main Title'">
<table class="easyui-datagrid"
data-options="url:'datagrid_data1.json',method:'get',border:false,singleSelect:true,fit:true,fitColumns:true">
<thead>
<tr>
<th data-options="field:'itemid'" width="80">Item ID</th>
<th data-options="field:'productid'" width="100">Product ID</th>
<th data-options="field:'listprice',align:'right'" width="80">List Price</th>
<th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
<th data-options="field:'attr1'" width="150">Attribute</th>
<th data-options="field:'status',align:'center'" width="60">Status</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
\ No newline at end of file
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Complex Layout</h2> <h2>Complex Layout</h2>
<div class="demo-info"> <p>This sample shows how to create a complex layout.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0;"></div>
<div>This sample shows how to create a complex layout.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-layout" style="width:700px;height:350px;"> <div class="easyui-layout" style="width:700px;height:350px;">
<div data-options="region:'north'" style="height:50px"></div> <div data-options="region:'north'" style="height:50px"></div>
<div data-options="region:'south',split:true" style="height:50px;"></div> <div data-options="region:'south',split:true" style="height:50px;"></div>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment