easyui初步（一）

来源：互联网发布：java jdk7.0 64位下载编辑：程序博客网时间：2024/06/10 19:11

首先引入基本的文件：

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

js与css的引用格式要严格依照上面，如果script使用<script />的形式，link中rel属性不指定会出现无法引入的问题。

之后可以使用easyui。

基本元素之对话框：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Toolbar and Buttons - 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>Toolbar and Buttons</h2><p>The toolbar and buttons can be added to dialog.</p><div style="margin:20px 0;"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('open')">Open</a><a href="javascript:void(0)" class="easyui-linkbutton" onclick="$('#dlg').dialog('close')">Close</a></div><div id="dlg" class="easyui-dialog" title="Toolbar and Buttons" style="width:400px;height:200px;padding:10px"data-options="iconCls: 'icon-save',toolbar: [{text:'Add',iconCls:'icon-add',handler:function(){alert('add')}},'-',{text:'Save',iconCls:'icon-save',handler:function(){alert('save')}}],buttons: [{text:'Ok',iconCls:'icon-ok',handler:function(){alert('ok');}},{text:'Cancel',handler:function(){alert('cancel');;}}]">The dialog content.</div></body></html>

基本元素之表单：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>learn easyui 01</title><script type="text/javascript" src="easyui/jquery.min.js"></script><script type="text/javascript" src="easyui/jquery.easyui.min.js"></script><script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script><link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/><link rel="stylesheet" type="text/css" href="easyui/themes/icon.css"/> </head><body><h2>Basic Form</h2><p>Fill the form and submit it.</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 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></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');}function loadLocal(){$('#ff').form('load',{name:'myname',email:'mymail@gmail.com',subject:'subject',message:'message',language:'en'});}function loadRemote(){$('#ff').form('load', 'form_data1.json');}</script></body></html>

表单中使用data-options="novalidate:true"，可以禁止校验。在提交时使用：

function submitForm(){$('#ff').form('submit',{onSubmit:function(){return $(this).form('enableValidation').form('validate');}});}

可以在提交前进行校验。

阅读全文

'); })();