jQuery-EasyUI 插件的运用(一)

jQuery-EasyUI 插件的使用(一)

jQuery-EasyUI是一个UI插件，用于美化页面，给程序员带来不少的便利，里面封装了很多的组件。

只需要引用jQuery-EasyUI插件的js文件和css样式即可.

下面是jQuery-EasyUI插件的使用. 主要写了几个弹出框和对方框的使用方法:

<html>
     <head>
  	<!-- 导入easyui插件的js和css样式; -->
	<link rel="stylesheet" type="text/css" href="/EasyuiDemo/scripts/jquery-easyui-1.1.1/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="/EasyuiDemo/scripts/jquery-easyui-1.1.1/themes/icon.css">	
	<script type="text/javascript" src="/EasyuiDemo/scripts/jquery-easyui-1.1.1/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="/EasyuiDemo/scripts/jquery-easyui-1.1.1/jquery.easyui.min.js"></script>	
	<script type="text/javascript">	
		//右下角弹出框;
		function slide(){
			jQuery.messager.show({
				title:'温馨提示:',
				msg:'你好,我是从右下角弹出的窗体!',
				timeout:5000,
				showType:'slide'
			});
		}
		//弹出框;
		function alterInfo(){
			jQuery.messager.alert('提示:','你好,我叫弹出框!');
		}		
		//错误弹出框;
		function errorInfo(){
			jQuery.messager.alert('提示:','你好,我叫错误弹出框!','error');
		}		
		//信息弹出框;
		function info(){
			jQuery.messager.alert('提示:','你好,我叫信息弹出框!','info');
		}		
		//警告弹出框;
		function warning(){
			jQuery.messager.alert('提示:','你好,我叫警告弹出框!','warning');
		}		
		//确认弹出框;
		function confirmInfo(){
			jQuery.messager.confirm('提示:','你确认要删除吗?',function(event){
				if(event){
					alert('你点击的是'+event);
				}else{
					alert("你点击的是false");
				}
			});
		} 		
		//可以输入文本的对方框;
		function prompt(){
			jQuery.messager.prompt('提示:','请输入消息.',function(r){
				if(r){
					alert("你输入的文本是:"+r);
				}
			})
		}
	</script>
  </head> 
  <body>
   </body>
</html>

jQuery-EasyUI 插件的运用(一)

相关推荐