YUI学习笔记（三）Reszie模块1

李小抽SuperITGirl

浏览: 46898 次
性别:
来自: 沈阳

最近访客更多访客>>

u010861359

summer_hl

bebeter

ispotato2

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

需求说明：用鼠标控制div的大小，并且根据大小相应的截断div中段落的文字。如图，用鼠标控制外部div的尺寸，在尺寸改变的同时，使左侧文字适应div的大小而进行文字截断，右边的事件不截断。

代码：

<html>
  <head>
    <base href="<%=basePath%>">
    <title>文字截取</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <div class="journal-content-article">
      <ul class="list_ul">
        <li>
          <span><a>我校专业技术岗位等级聘任工作已结束</a></span>
          <em>2012-07-21</em>
        </li>
        <li>
          <span><a>踏寻历史踪迹   在实践中成长</a></span>
          <em >2012-07-13</em>
        </li>
        <li>
          <span><a>教师系列专业技术职务聘任结果</a></span>
          <em2012-07-02</em>
        </li>
        <li>
          <span ><a>我校小学部举行数学学科期末复习引路活动</a></span>
          <em>2012-06-26</em>
        </li>
        <li>
          <span ><a>我校举行&quot;青蓝杯&quot;教学大赛优胜...</a></span>
          <em>2012-06-26</em>
        </li>
        <li>
          <span><a>我校举行2012届毕业典礼</a></span>
          <em>2012-06-26</em>
        </li>
        <li>
          <span><a>教师系列专业技术职务聘任结果公告</a></span>
          <em>2012-06-22</em>
        </li>
      </ul>
    </div>
    <script src="http://yui.yahooapis.com/3.9.0/build/yui/yui-min.js"></script>
    <script type="text/javascript">
    //YUI要用到的模块有node和resize-plugin
    YUI().use('node','resize-plugin',function(Y){
      var tag_arr = Y.all("a");//所有<a>标签做成的数组
       var tag_strArr = new Y.Array(String);//所有<a>标签内容做成的数组
       var tag_showStr = null;//每行文字显示的文字
       var tag_lenArr = new Y.Array(String);//每行文字的长度
       var tag_fontsize = 0;//文字像素
       //YUI中的数组遍历操作用  数组名.each(function(item,index)){}
      //其中item表示当前数组中的对象，index表示当前数组中对象的下标	
       tag_arr.each(function(item,index){
              tag_strArr[index] = item.getHTML();
              tag_lenArr[index] = item.getHTML().length;
         });
    	
    	/**获取文字像素*/
    	var div = Y.one(".journal-content-article");
    	var date = Y.one("em");
        //YUI中获取CSS样式的方法是  元素.getStyle(属性名)
    	tag_fontsize = div.getStyle("fontSize");
    	/**pt与px的转换*/
    	var fsLen = tag_fontsize.length;
	    var fstail = tag_fontsize.toString().substring(fsLen-2, fsLen);
	    var maxLength = null;
	    switch(fstail)
	    {
	    	case "pt":
	    		tag_fontsize = parseInt(tag_fontsize)*4/3;
	    		break;
	    	case "em":
	    		tag_fontsize = parseInt(tag_fontsize)*16;
	    		break;
	    	case "px":
	    		tag_fontsize = parseInt(tag_fontsize);
	    		break;
	    }
        //我们已经引入了YUI的Resize模块，现在需要实例化一个接口
    	var resizeDiv = new Y.Resize({
    		node: ".journal-content-article"
    	});
    	/**监听div尺寸改变事件*/
        //resize的事件有很多比如：start、mouseUp、end、resize等
    	resizeDiv.on("resize",function(){
    		/**获取div的宽度*/
    		var divWidth = parseInt(div.getStyle("width"));
		var data_len = date.getHTML().length;
	    	var data_width = tag_fontsize*(data_len);
	    	maxLength = parseInt((divWidth-data_width)/tag_fontsize);//div最多能显示的字符长度
	    	tag_arr.each(function(item,index){
	    		if(tag_lenArr[index]>=maxLength)
	    		{
	    			tag_showStr = tag_strArr[index].substr(0,maxLength);
	    			item.setHTML(tag_showStr);
	    		}
	    	});
	    });
	});
	</script>
 </body>
 </html>