JqueryEasyUI引入，及初试

JqueryEasyUI引入，及初试

   首先我们初看下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="#" onclick="javaScript:_go(1);" style="text-decoration: none;background:url('images/b.gif') no-repeat;">Welcome BZ World!!</a>
 <a   href="#" onclick="javaScript:_go(2);" style="text-decoration: none;background:url('images/b.gif') no-repeat;">Welcome BZI World!!</a>

确实是可以！