javascript代码实例教程-jquery_EasyUI的学习

发布时间:2019-03-25 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jquery_EasyUI的学习脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。

1 Accordion(可折叠标签)

1.1 实例
1.1.1 代码

<htML>

<head>

<;meta http-equiv="Content-tyPE" content="text/html; charset=UTF-8">

<tITle>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script type="text/javascript">

$( function() {

$(&#39;#aa').accordion( {

width : 400,

height : 200,

fit : false

});

});

</script>

</head>

<body>


<p id="aa" border="true" >

<p title="Title1" icon="icon-save" 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>

</p>

<p title="Title2" icon="icon-reload" selected="true"

style="padding: 10px;">content2</p>

<p title="Title3">content3</p>

</p>


</body>

</html>


1.1.2 效果图

&nbsp;

1.1.3  扩展

实例html代码中

<p id="aa" border="true" >

此行也可写成

<p id="aa" class="easyui-accordion" style="width:300px;height:200px;" fit="false" border="false">

,并且将js代码全部去掉,效果图是一样的。

1.2 参数
1.2.1 容器参数

参数名称
 参数类型
 描述
 默认值
 
width
 数字
 可折叠标签的度。
 auto
 
height
 数字
 可折叠标签的高度。
 auto
 
fit
 布尔
 是否使可折叠标签自动缩放以适应父容器的大小,当为true时width和height参数将失效。
 false
 
border
 布尔
 是否显示边界线。
 true
 

1.2.2 面板参数

可折叠标签面板继承自面板(panel),许多属性定义在<p />标签里,下面的属性就是如此:

参数名称
 参数类型
 描述
 默认值
 
selected
 布尔
 设置可折叠标签中默认展开的标签页
 false
 


2 DateBox(日期框)
2.1 实例
2.1.1 代码

<!DOCTYPE html PubLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function disable() {

$('#dd').datebox('disable');

}

function enable() {

$('#dd').datebox('enable');

}


/* 

 将Date/String类型,解析为String类型. 

 传入String类型,则先解析为Date类型 

 不正确的Date,返回 '' 

 如果时间部分为0,则忽略,只返回日期部分. 

 */

function formatDate(v) {

if (v instanceof Date) {

VAR y = v.getFullYear();

var m = v.getMonth() + 1;

var d = v.getDate();

var h = v.getHours();

var i = v.getMinutes();

var s = v.getSeconds();

var ms = v.getMilliseconds();

if (ms > 0)

return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s

+ '.' + ms;

if (h > 0 || i > 0 || s > 0)

return y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;

return y + '-' + m + '-' + d;

}

return '';

}


$( function() {

$('#dd').datebox( {

currentText : '今天',

closeText : '关闭',

disabled : false,

required : true,

missingMessage : '必填',

formatter : formatDate


});

});

</script>

</head>

<body>

<h1>DateBox</h1>

<p style="margin-bottom: 10px;"><a href="#" onclick=

disable();

>disable</a>

<a href="#" onclick=

enable();

>enable</a></p>

<input id="dd"></input>

</body>

</html>

2.1.2 效果图


2.2 参数
属性名
 类型
 描述
 默认值
 
currentText
 字符串
 为当前日期按钮显示的文本
 Today
 
closeText
 字符串
 关闭按钮显示的文本
 Close
 
disabled
 布尔
 如果为true则禁用输入框
 false
 
required
 布尔
 定义输入框是否为必添
 false
 
missingMessage
 字符串
 当输入框为空时提示的文本
 必填
 
formatter
 function
 格式化日期的函数,这个函数以’date’为参数,并且返回一个字符串
 ——
 
parser
 function
 分析字符串的函数,这个函数以’date’为参数并返回一个日期
 ——
 

2.3 事件
事件名
 参数
 描述
 
 
onSelect
 date
 当选择一个日期时触发
 
 

2.4 方法
方法名
 参数
 描述
 
 
destroy
 none
 销毁组件
 
 
disable
 none
 禁用输入框.
 
 
enable
 none
 启用输入框
 
 


3 ComboBox(组合框)
3.1 实例
3.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function loadData(){

$('#cc').COMbobox({

url:'combobox_data.json',//该文件内容在下面

valUEFIeld:'id',

textField:'text'

});

}

function setValue(){

$('#cc').combobox('setValue','2');

}

function getValue(){

var val = $('#cc').combobox('getValue');

alert(val);

}

function disable(){

$('#cc').combobox('disable');

}

function enable(){

$('#cc').combobox('enable');

}

$( function() {

$('#cc').combobox( {

width:150,

listWidth:150,

listHeight:100,

//valuefield:'value',

//textField:'text',

//url:'combobox_data.json',

editable:false

});

});

</script>

</head>

<body>

<h1>ComboBox</h1>

<p style="margin-bottom: 10px;"><a href="#" onclick="loadData()">loadData</a>

<a href="#" onclick="setValue()">setValue</a> <a href="#"

onclick="getValue()">getValue</a> <a href="#" onclick="disable()">disable</a>

<a href="#" onclick="enable()">enable</a></p>


<span>Options: </span>

<select id="cc" name="dept" required="true">

<option value="">==请选择==</option>

<option value="0">苹果</option>

<option value="1">香蕉</option>

<option value="2">鸭梨</option>

<option value="3">西瓜</option>

<option value="4">芒果</option>

</select>

</body>

</html>


combobox_data.json内容:

[{

"id":1,

"text":"text1"

},{

"id":2,

"text":"text2"

},{

"id":3,

"text":"text3",

"selected":true

},{

"id":4,

"text":"text4"

},{

"id":5,

"text":"text5"

}]

3.1.2 效果图


3.2 参数
属性名
 类型
 描述
 默认值
 
width
 数字
 组件的宽度
 auto
 
listWidth
 数字
 下拉列表的宽度
 null
 
listHeight
 数字
 下拉列表的高度
 null
 
valueField
 字符串
 基础数据值名称绑定到这个组合框
 value
 
textField
 字符串
 基础数据的字段的名称绑定到这个组合框
 text
 
editable
 布尔
 定义是否可以直接到文本域中键入文本
 true
 
url
 字符串
 加载列表数据的远程URL
 null
 

3.3 事件
事件名
 参数
 描述
 
onLoadSuccess
 none
 当远程数据成功加载时触发
 
onLoadError
 none
 当远程数据加载失败时触发
 
onSelect
 record
 当用户选择了一个列表项时触发
 
onChange
 newValue, oldValue
 当文本域字段的值改变时触发
 

3.4 方法
方法名
 参数
 描述
 
select
 value
 选择下拉列表中的一项
 
setValue
 param
 设定指定值到文本域,参数可以是一个字符串,也可以是一个Javascript对象,如果是对象,必须包含两个属性各对应valueField和TextField属性。
 
getValue
 none
 获取字段值
 
reload
 url
 请求远程列表数据.
 


4 DiaLOG对话框)
4.1 实例
4.1.1 代码

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

$(function(){

$('#dd').dialog({

title:'对话框',

collapsible:true,

minimizable:true,

maximizable:true,

resizable:true,


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(){

$('#dd').dialog('close');

}

}]

});

});

function open1(){

$('#dd').dialog('open');

}

function close1(){

$('#dd').dialog('close');

}

</script>

</head>

<body>

<h1>Dialog</h1>

<p style="margin-bottom: 10px;"><a href="#" onclick="open1()">open1</a>

<a href="#" onclick="close1()">close1</a></p>

<p id="dd" icon="icon-save"

style="padding: 5px; width: 400px; height: 200px;">

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

<p>dialog content.</p>

</p>

</body>

</html>

4.1.2 效果图


4.2 参数
属性名
 类型
 描述
 默认值
 
title
 字符串
 对话框的标题文本
 New Dialog
 
collapsible
 布尔
 定义是否显示可折叠按钮
 false
 
minimizable
 布尔
 定义是否显示最小化按钮
 false
 
maximizable
 布尔
 定义是否显示最大化按钮
 false
 
resizable
 布尔
 定义对话框是否可编辑大小
 false
 
toolbar
 数组
 对话框上的工具条,每个工具条包括:
 text,

iconCls,

disabled,

handler

etc.

null
 
buttons
 数组
 对话框底部的按钮,每个按钮包括:
 text,

iconCls,

handler

etc.

null
 

4.3 事件
Dialog的事件和窗口(Window)的事件相同。

4.4 方法
Dialog的函数方法和窗口(Window)的相同。


5 Messager(提示框)
5.1 实例
5.1.1 代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>jQuery EasyUI</title>

<link rel="stylesheet" type="text/css"

href="../themes/default/easyui.css">

<link rel="stylesheet" type="text/css" href="../themes/icon.css">

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="../jquery.easyui.min.js"></script>

<script>

function show1(){

$.messager.show({

title:'My Title',

msg:'Message will be closed after 4 seconds.',

showType:'show'

});

}

function show2(){

$.messager.show({

title:'My Title',

msg:'Message will be closed after 5 seconds.',

timeout:5000,

showType:'slide'

});

}

function show3(){

$.messager.show({

title:'My Title',

msg:'Message never be closed.',

timeout:0,

showType:'fade'

});

}

function alert1(){

$.messager.alert('My Title','Here is a message!');

}

function alert2(){

$.messager.alert('My Title','Here is a error message!','error');

}

function alert3(){

$.messager.alert('My Title','Here is a info message!','info');

}

function alert4(){

$.messager.alert('My Title','Here is a question message!','question');

}

function alert5(){

$.messager.alert('My Title','Here is a warning message!','warning');

}

function confirm1(){

$.messager.confirm('My Title', 'Are you confirm this?', function(r){

if (r){

alert('confirmed:'+r);

location.href = 'http://www.GOOGLE.com';

}

});

}

function prompt1(){

$.messager.PRompt('My Title', 'Please type something', function(r){

if (r){

alert('you type:'+r);

}

});

}

$(function(){

$.messager.defaults={ok:"确定",cancel:"取消"};  

});

</script>

</head>

<body>

<h1>Messager</h1>

<p><a href="javascript:void(0)" onclick="show1()">show</a> | <a

href="#" onclick="show2()">slide</a> | <a href="#" onclick="show3()">fade</a>

|</p>


<p><a href="#" onclick="alert1()">alert</a> | <a href="#"

onclick="alert2()">alert(error)</a> | <a href="#" onclick="alert3()">alert(info)</a>

| <a href="#" onclick="alert4()">alert(question)</a> | <a href="#"

onclick="alert5()">alert(warning)</a></p>

<p><a href="#" onclick="confirm1();">confirm</a></p>

<p><a href="#" onclick="prompt1()">prompt</a></p>

<p style="height: 600px;"></p>

</body>

</html>

 

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-jquery_EasyUI的学习全部内容,希望文章能够帮你解决javascript代码实例教程-jquery_EasyUI的学习所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。