Yahoo! UI Library: Resize Utility的使用

最新推荐文章于 2022-11-10 18:21:53 发布

nedvedheqing

最新推荐文章于 2022-11-10 18:21:53 发布

阅读量1k

点赞数

分类专栏： Ajax YAHOO UI Library 文章标签： library yahoo ui stylesheet javascript div

本文链接：https://blog.csdn.net/nedvedheqing/article/details/2352266

版权

Ajax 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

YAHOO UI Library

1 篇文章 0 订阅

订阅专栏

以前一直在写一些Javascript UI类库，写过treeMenu,divDialog等类库，自己使用起来感觉还不错。但是自己写类库有个缺点，就是效率很低，往往写个没有bug,重用性好的js类库要花上比较长的时间，在结合css的情况下更是如此。大家都知道调试js是件有趣而痛苦的事情，即使有firefox的帮助，也感觉比调试java,C#等编译类型语言的程序要困难。不过看了Yahoo的UI Library,我想以后不用自己再写JS UI类库了,把它们用好了就行了。Yahoo! UI Library 给我们提供了很多的 javascript+css实现的UI类库，在日常的web开发中已经够用了。现在我试着把上面的提供的常用效果做一遍，就先从Resize Utility类库开始吧！ Resize Utility类库允许我们改变html页面元素的大小，比如说某个层。我们先来实现个简单的div拉伸效果吧。首先新建个demo1.html,内容如下：

 
  <html> 
<head> 
<title>Resize Div</title> 
<style type="text/css"> 
  #resizeMe { background-color:red; 
              height: 200px;
              width:200px; 
              border: 1px solid black;
              } 
</style> 
</head> 
<body>
 <div id="resizeMe"> 
    <p>I will to be resize</p> 
 </div> 
</body>
 </html>
 
 

然后试着运行一下，我们可以看到一个背景为红色的div，但是它不能被鼠标拉伸或者收缩。现在我们在demo1.html的head部分加入如下的代码：

 
  <!-- Skin CSS file --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/assets/skins/sam/resize.css">
 <!-- Utility Dependencies -->
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js"></script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script> 
 <!-- Optional Animation -->
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js"></script> 
 <!-- Source file for the Resize Utility --> 
<script src="http://yui.yahooapis.com/2.5.1/build/resize/resize-beta-min.js"></script>
 
 

然后我们在demo1.html的body部分加入如下的代码（注意要加在被resize的div的后面）：

 
  <script type="text/javascript"> 
    var resize = new YAHOO.util.Resize('resizeMe'); 
</script>

demo1.html修改后的完整代码如下：

 
  <html> 
<head> 
<title>Resize Div</title>
 <!-- Skin CSS file --> 
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.1/build/assets/skins/sam/resize.css">
 <!-- Utility Dependencies -->
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/dragdrop/dragdrop-min.js"></script> 
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/element/element-beta-min.js"></script> 
 <!-- Optional Animation -->
 <script type="text/javascript" src="http://yui.yahooapis.com/2.5.1/build/animation/animation-min.js"></script> 
 <!-- Source file for the Resize Utility --> 
<script src="http://yui.yahooapis.com/2.5.1/build/resize/resize-beta-min.js"></script>
 <style type="text/css"> 
  #resizeMe {background-color:red;  
             height: 200px;   
             width: 200px;    
             border: 1px solid black;} 
</style>
 </head> 
<body> 
  <div id="resizeMe"> 
     <p>I will to be resize</p> 
  </div> 
<script type="text/javascript">  new YAHOO.util.Resize('resizeMe'); </script>
 </body>
 </html>
 
 

现在再打开demo1.html看看，那个红色的div已经可以被resize了。

我们再来看看实现的关键点： 1.先是要把Resize Utility类库用到的相关js和css文件导入进去，这里我们都是用网上的文件，所以必须能上网才能实现效果。我们也可以提前把这些文件下载下来，以后用本地的相对路径把它们包含进去就可以了。 2.调用如下语句新建一个resize对象： new YAHOO.util.Resize('resizeMe') resizeMe是将要被resize的div的id