首先我们初看下JqueryEasyUI插件部分目录( http://www.jb51.net 提供下载)
二话不说,我敏感的顺序就是-->demo-->jquery-1.8.0.min.js-->jquery.easyui.min.js
好吧...其他的被我忽略了,不好意思。
能不能用,先把demo跑起来再说,demo都不行了超过10分钟就别看了。换吧....
经测试,本人下载的不是坑.
既然是js插件,那就肯定要引入到html,jsp....中才行。
A:如何引用?
B:模仿demo!
A:是的,老大。
(其实A,B都是一个人,呵呵)
看图说话,适合我们新手!
项目目录如上图:
在index.html中引入(傻瓜式copy,记得要改路径):
<title>这是为了说明,demo中引入库存放位置的规范,好习惯要养成</title>
<link rel="stylesheet" type="text/css" href="js_pluging/jquery-easyui1.3.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="js_pluging/jquery-easyui1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="js_pluging/jquery-easyui1.3.2/demo.css">
<script type="text/javascript" src="js_pluging/jquery-easyui1.3.2/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js_pluging/jquery-easyui1.3.2/jquery.easyui.min.js"></script>
就这么简单!
测试:请$.messager对象来演示(easyUI文档中众对象之一)
$.messager.show({
title:'我的消息',
msg:context+arg,
timeout:4000,
// showType:'show',
showType:'slide',
style:{
right:'',
top:document.body.scrollTop+document.documentElement.scrollTop,
bottom:''
}
});
相当于高级弹出效果了。想了解更多可查文档....
附图:
额外话题:猜想,因为此插件引用了jquery-1.8.0.min.js所以jquery的功能都可以用。
我测了下选择器,如下:
js:
//取得所有a标签中的文本拼接后的值
var context = $("a").text();
//var context = $("a[id='show']").text();
html:
<a id="show" href="#" οnclick="javaScript:_go(1);" style="text-decoration: none;background:url('images/b.gif') no-repeat;">Welcome BZ World!!</a>
<a href="#" οnclick="javaScript:_go(2);" style="text-decoration: none;background:url('images/b.gif') no-repeat;">Welcome BZI World!!</a>
确实是可以!