您的位置:首页 > Web前端 > JQuery

JqueryEasyUI引入,及初试

2015-11-19 22:05 756 查看
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>

确实是可以!

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: