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

升级easyUI到1.9.4版本

parent 0527b980
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Horizontal Accordion - 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>Horizontal Accordion</h2>
<p>You can easily set the 'halign' property to create a horizontal accordion.</p>
<div style="margin:20px 0 10px 0;"></div>
<div class="easyui-accordion" halign="left" style="width:700px;height:300px;">
<div title="About" titleDirection="up" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3>
<p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
</div>
<div title="Help" titleDirection="up" style="padding:10px;">
<p>The accordion allows you to provide multiple panels and display one or more at a time. Each panel has built-in support for expanding and collapsing. Clicking on a panel header to expand or collapse that panel body. The panel content can be loaded via ajax by specifying a 'href' property. Users can define a panel to be selected. If it is not specified, then the first panel is taken by default.</p>
</div>
<div title="TreeMenu" titleDirection="up" style="padding:10px;">
<ul class="easyui-tree">
<li>
<span>Foods</span>
<ul>
<li>
<span>Fruits</span>
<ul>
<li>apple</li>
<li>orange</li>
</ul>
</li>
<li>
<span>Vegetables</span>
<ul>
<li>tomato</li>
<li>carrot</li>
<li>cabbage</li>
<li>potato</li>
<li>lettuce</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
\ No newline at end of file
...@@ -11,12 +11,9 @@ ...@@ -11,12 +11,9 @@
</head> </head>
<body> <body>
<h2>Multiple Accordion Panels</h2> <h2>Multiple Accordion Panels</h2>
<div class="demo-info"> <p>Enable 'multiple' mode to expand multiple panels at one time.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0 10px 0;"></div>
<div>Enable 'multiple' mode to expand multiple panels at one time.</div> <div class="easyui-accordion" data-options="multiple:true" style="width:500px;">
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-accordion" data-options="multiple:true" style="width:500px;height1:300px;">
<div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"> <div title="Language" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p> <p>A programming language is a formal language designed to communicate instructions to a machine, particularly a computer. Programming languages can be used to create programs that control the behavior of a machine and/or to express algorithms precisely.</p>
</div> </div>
......
...@@ -11,11 +11,8 @@ ...@@ -11,11 +11,8 @@
</head> </head>
<body> <body>
<h2>Accordion Tools</h2> <h2>Accordion Tools</h2>
<div class="demo-info"> <p>Click the tools on top right of panel to perform actions.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0 10px 0;"></div>
<div>Click the tools on top right of panel to perform actions.</div>
</div>
<div style="margin:10px 0;"></div>
<div class="easyui-accordion" style="width:500px;height:300px;"> <div class="easyui-accordion" style="width:500px;height:300px;">
<div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;"> <div title="About" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
<h3 style="color:#0099FF;">Accordion for jQuery</h3> <h3 style="color:#0099FF;">Accordion for jQuery</h3>
......
...@@ -11,12 +11,9 @@ ...@@ -11,12 +11,9 @@
</head> </head>
<body> <body>
<h2>Basic Calendar</h2> <h2>Basic Calendar</h2>
<div class="demo-info" style="margin-bottom:10px"> <p>Click to select date.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0"></div>
<div>Click to select date.</div> <div class="easyui-calendar" style="width:250px;height:250px;"></div>
</div>
<div class="easyui-calendar" style="width:180px;height:180px;"></div>
</body> </body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Custom Calendar - 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>Custom Calendar</h2>
<p>This example shows how to custom the calendar date by using 'formatter' function.</p>
<div style="margin:20px 0"></div>
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="formatter:formatDay"></div>
<script>
var d1 = Math.floor((Math.random()*30)+1);
var d2 = Math.floor((Math.random()*30)+1);
function formatDay(date){
var m = date.getMonth()+1;
var d = date.getDate();
var opts = $(this).calendar('options');
if (opts.month == m && d == d1){
return '<div class="icon-ok md">' + d + '</div>';
} else if (opts.month == m && d == d2){
return '<div class="icon-search md">' + d + '</div>';
}
return d;
}
</script>
<style scoped="scoped">
.md{
height:16px;
line-height:16px;
background-position:2px center;
text-align:right;
font-weight:bold;
padding:0 2px;
color:red;
}
</style>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Disable Calendar Date - 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>Disable Calendar Date</h2>
<p>This example shows how to disable specified dates, only allows the user to select Mondays.</p>
<div style="margin:20px 0"></div>
<div class="easyui-calendar" style="width:250px;height:250px;" data-options="
validator: function(date){
if (date.getDay() == 1){
return true;
} else {
return false;
}
}
"></div>
</body>
</html>
\ No newline at end of file
...@@ -11,12 +11,9 @@ ...@@ -11,12 +11,9 @@
</head> </head>
<body> <body>
<h2>First Day of Week</h2> <h2>First Day of Week</h2>
<div class="demo-info"> <p>Choose the first day of the week.</p>
<div class="demo-tip icon-tip"></div>
<div>Choose the first day of the week.</div>
</div>
<div style="margin:10px 0"> <div style="margin:20px 0">
<select onchange="$('#cc').calendar({firstDay:this.value})"> <select onchange="$('#cc').calendar({firstDay:this.value})">
<option value="0">Sunday</option> <option value="0">Sunday</option>
<option value="1">Monday</option> <option value="1">Monday</option>
...@@ -28,6 +25,6 @@ ...@@ -28,6 +25,6 @@
</select> </select>
</div> </div>
<div id="cc" class="easyui-calendar" style="width:180px;height:180px;"></div> <div id="cc" class="easyui-calendar" style="width:250px;height:250px;"></div>
</body> </body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid Calendar - 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 Calendar</h2>
<p>This example shows how to set the width of calendar to a percentage of its parent container.</p>
<div style="margin:20px 0"></div>
<div class="easyui-panel" style="width:700px;padding:10px">
<p>width: 50%, height: 250px</p>
<div class="easyui-calendar" style="width:50%;height:250px;"></div>
<p>width: 30%, height: 40%</p>
<div class="easyui-calendar" style="width:30%;height:40%;"></div>
</div>
</body>
</html>
\ No newline at end of file
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Basic TimeSpinner - jQuery EasyUI Demo</title> <title>Week Number on Calendar - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <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="../../themes/icon.css">
<link rel="stylesheet" type="text/css" href="../demo.css"> <link rel="stylesheet" type="text/css" href="../demo.css">
...@@ -10,12 +10,10 @@ ...@@ -10,12 +10,10 @@
<script type="text/javascript" src="../../jquery.easyui.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
</head> </head>
<body> <body>
<h2>Basic TimeSpinner</h2> <h2>Week Number on Calendar</h2>
<div class="demo-info"> <p>This example shows how to display the week number on calendar.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0"></div>
<div>Click spin button to adjust time.</div> <div class="easyui-calendar" showWeek="true" weekNumberHeader="Wk" style="width:250px;height:250px;"></div>
</div>
<div style="margin:10px 0;"></div>
<input class="easyui-timespinner" style="width:80px;">
</body> </body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic CheckBox - 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 CheckBox</h2>
<form id="ff">
<div style="margin-bottom:20px">
<input class="easyui-checkbox" name="fruit" value="Apple" label="Apple:">
</div>
<div style="margin-bottom:20px">
<input class="easyui-checkbox" name="fruit" value="Orange" label="Orange:">
</div>
<div style="margin-bottom:20px">
<input class="easyui-checkbox" name="fruit" value="Banana" label="Banana:">
</div>
</form>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Combo Animation - 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>Combo Animation</h2>
<p>Change the animation type when open & close the drop-down panel.</p>
<div style="margin:20px 0">
<span>Animation Type:</span>
<select onchange="changeAnimation(this.value)">
<option>slide</option>
<option>fade</option>
<option>show</option>
</select>
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="cc" label="Animation:" labelPosition="top" style="width:100%;">
</div>
</div>
<script type="text/javascript">
$(function(){
$('#cc').combo();
changeAnimation('slide');
});
function changeAnimation(atype){
$('#cc').combo('panel').panel({
openAnimation:atype,
closeAnimation:(atype=='show'?'hide':atype)
});
}
</script>
</body>
</html>
\ No newline at end of file
...@@ -11,24 +11,30 @@ ...@@ -11,24 +11,30 @@
</head> </head>
<body> <body>
<h2>Basic Combo</h2> <h2>Basic Combo</h2>
<div class="demo-info" style="margin-bottom:10px"> <p>Click the right arrow button to show drop down panel that can be filled with any content.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0"></div>
<div>Click the right arrow button to show drop down panel that can be filled with any content.</div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="cc" style="width:100%;">
</div>
</div> </div>
<select id="cc" style="width:150px"></select>
<div id="sp"> <div id="sp">
<div style="color:#99BBE8;background:#fafafa;padding:5px;">Select a language</div> <div style="line-height:22px;background:#fafafa;padding:5px;">Select a language</div>
<input type="radio" name="lang" value="01"><span>Java</span><br/> <div style="padding:10px">
<input type="radio" name="lang" value="02"><span>C#</span><br/> <input type="radio" name="lang" value="01"><span>Java</span><br/>
<input type="radio" name="lang" value="03"><span>Ruby</span><br/> <input type="radio" name="lang" value="02"><span>C#</span><br/>
<input type="radio" name="lang" value="04"><span>Basic</span><br/> <input type="radio" name="lang" value="03"><span>Ruby</span><br/>
<input type="radio" name="lang" value="05"><span>Fortran</span> <input type="radio" name="lang" value="04"><span>Basic</span><br/>
<input type="radio" name="lang" value="05"><span>Fortran</span>
</div>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
$(function(){ $(function(){
$('#cc').combo({ $('#cc').combo({
required:true, required:true,
editable:false editable:false,
label:'Language:',
labelPosition:'top'
}); });
$('#sp').appendTo($('#cc').combo('panel')); $('#sp').appendTo($('#cc').combo('panel'));
$('#sp input').click(function(){ $('#sp input').click(function(){
......
...@@ -11,17 +11,70 @@ ...@@ -11,17 +11,70 @@
</head> </head>
<body> <body>
<h2>ComboBox</h2> <h2>ComboBox</h2>
<div class="demo-info"> <p>Click the buttons below to perform actions.</p>
<div class="demo-tip icon-tip"></div>
<div>Click the buttons below to perform actions.</div>
</div>
<div style="margin:10px 0;"> <div style="margin:20px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="setvalue()">SetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert($('#state').combobox('getValue'))">GetValue</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('disable')">Disable</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#state').combobox('enable')">Enable</a>
</div> </div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<select id="state" class="easyui-combobox" name="state" label="State:" labelPosition="top" style="width:100%;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
<script type="text/javascript"> <script type="text/javascript">
function setvalue(){ function setvalue(){
$.messager.prompt('SetValue','Please input the value(CO,NV,UT,etc):',function(v){ $.messager.prompt('SetValue','Please input the value(CO,NV,UT,etc):',function(v){
...@@ -31,59 +84,5 @@ ...@@ -31,59 +84,5 @@
}); });
} }
</script> </script>
<select id="state" class="easyui-combobox" name="state" style="width:200px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</body> </body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic ComboBox - 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 ComboBox</h2>
<p>Type in ComboBox to try auto complete.</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">
<select class="easyui-combobox" name="state" label="State:" labelPosition="top" style="width:100%;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH" selected>Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
</body>
</html>
\ No newline at end of file
...@@ -11,19 +11,23 @@ ...@@ -11,19 +11,23 @@
</head> </head>
<body> <body>
<h2>Custom Format in ComboBox</h2> <h2>Custom Format in ComboBox</h2>
<div class="demo-info" style="margin-bottom:10px"> <p>This sample shows how to custom the format of list item.</p>
<div class="demo-tip icon-tip"></div> <div style="margin:20px 0"></div>
<div>This sample shows how to custom the format of list item.</div> <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input class="easyui-combobox" name="language" style="width:100%;" data-options="
url: 'combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
panelHeight: 'auto',
formatter: formatItem,
label: 'Language:',
labelPosition: 'top'
">
</div>
</div> </div>
<input class="easyui-combobox" name="language" data-options="
url: 'combobox_data1.json',
method: 'get',
valueField: 'id',
textField: 'text',
panelWidth: 350,
panelHeight: 'auto',
formatter: formatItem
">
<script type="text/javascript"> <script type="text/javascript">
function formatItem(row){ function formatItem(row){
var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' + var s = '<span style="font-weight:bold">' + row.text + '</span><br/>' +
......
...@@ -11,15 +11,21 @@ ...@@ -11,15 +11,21 @@
</head> </head>
<body> <body>
<h2>Load Dynamic ComboBox Data</h2> <h2>Load Dynamic ComboBox Data</h2>
<div class="demo-info"> <p>Click the button below to load data.</p>
<div class="demo-tip icon-tip"></div>
<div>Click the button below to load data.</div> <div style="margin:20px 0;">
</div>
<div style="margin:10px 0;">
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', 'combobox_data1.json')">LoadData</a> <a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#language').combobox('reload', 'combobox_data1.json')">LoadData</a>
</div> </div>
<input class="easyui-combobox" id="language" name="language" <div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
data-options="valueField:'id',textField:'text'"> <div style="margin-bottom:20px">
<input id="language" class="easyui-combobox" name="language" style="width:100%;" data-options="
valueField: 'id',
textField: 'text',
label: 'Language:',
labelPosition: 'top'
">
</div>
</div>
</body> </body>
</html> </html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fluid ComboBox - 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 ComboBox</h2>
<p>This example shows how to set the width of combobox 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-combobox" name="language" style="width:100%;"
data-options="
url: 'combobox_data2.json',
method: 'get',
valueField:'value',
textField:'text',
groupField:'group',
label: 'width: 100%',
labelPosition: 'top'
">
</div>
<div style="margin-bottom:20px">
<input class="easyui-combobox" name="language" style="width:50%;"
data-options="
url: 'combobox_data2.json',
method: 'get',
valueField:'value',
textField:'text',
groupField:'group',
label: 'width: 50%',
labelPosition: 'top'
">
</div>
</div>
</body>
</html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Group ComboBox - 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>Group ComboBox</h2>
<p>This example shows how to display combobox items in groups.</p>
<div style="margin:20px 0">
<input type="checkbox" onchange="$('#cc').combobox({groupPosition:$(this).is(':checked')?'sticky':'static'})">
<span>Sticky Group</span>
</div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<div style="margin-bottom:20px">
<input id="cc" class="easyui-combobox" name="browser" style="width:100%;" data-options="
url: 'combobox_data2.json',
method: 'get',
valueField:'value',
textField:'text',
groupField:'group',
label: 'Browser:',
labelPosition: 'top'
">
</div>
</div>
</body>
</html>
\ No newline at end of file
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