bangzhu

以前对于Flex网页布局还不是很明白，基本上没有什么修饰。但是做完了一个仿“115网盘”的页面后，对页面控制有了一个基本的了解，现总结一下。

     本人一开始接触的就是Flex4，据说Flex3的css布局很脊椎，也不知道是不是这样。但是Flex4的网页布局很牛X，再配上各种事件，可以实现需要写很多JavaScript/Ajax代码才能实现的效果。

     好了，言归正传。

      在Flex4中使用css控制样式，既可以直接在mxml文件中写样式，也可以新建一个css文件在这个文件里写样式，更重要的是这样便于管理。

       如果直接在mxml中写样式的话，我们可以直接在想要控制的控件里直接写css元素，比如：left,right,top等。如果要控制的元素非常多的话，这样是不便于管理的建议写在一个css文件里。

       好了，现在好好说说利用css文件控制样式。

      首先新建一个css文件，这个很简单，就不多说了。

      新建了一个css文件后需要将此文件引用到被控制的mxml文件里，具体如下所示：

      <fx:Style source="css文件路径" />

      在css文件里获得想要控制的对象可以通过在被控制对象里设置id来进行，如控制如下canvas需要设置id：

       <mx:Canvas  width="98"height="110" id="disk_canvas"   />

      在css文件里通过“#”获取，如：

      #disk_canvas{

             focusColor:#D6E0ED;

             top:89;

      }

     我们也可以像在html设置类来进行，即设置styleName属性，如：

      <mx:Canvas  width="98"height="110" styleName="disk_canvas"   />

      在css文件里通过如下所示的“.”来进行设置：

     .disk_canvas{

          focusColor:#D6E0ED;

          top:89;

       }

    然后mxml文件中用到和这一样的样式时，只需要写上此styleName就可以了。

    总体上就是这样，但是上述不是很适合在“动态”的状态下设计样式，我们可以通过“setStyle”来设置样式：

     id.setStyle(“css属性”,”css值”);

     如下图当鼠标通过左侧的“网盘”时，中间的图片切换如下所示：

       当鼠标经过“消息”时中间的图片切换如下所示：

       不仔细看看，还是挺像的哈！这就是通过事件进行切换的，(*^__^*) …

       上述方法很合适在事件中动态的设置样式。

       设置样式就是这么简单。在html页面中我们是通过“div+css”控制样式，但是在flex中我们可以通过“canvas+css”控制样式。使用过多的Hbox,Vbox等会影响性能，但是canvas是一个比较小的容器，可以满足大部分的需求。

     dest是要整合的空间可以使{} 或者不写

    src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等...

 我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发 

在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的

 一、Jquery的扩展方法原型是:　　　

 extend(dest,src1,src2,src3...);

     它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用：

 var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3...进行合并，然后将合并结果返回给newSrc了。如下例：

 var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"}) 

      那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}

      也就是说后面的参数如果和前面的参数存在相同的名称，那么后面的会覆盖前面的参数值。

      二、省略dest参数
      上述的extend方法原型中的dest参数是可以省略的，如果省略了，则该方法就只能有一个src参数，而且是将该src合并到调用extend方法的对象中去，如：
 　　1、$.extend(src)
 　　该方法就是将src合并到jquery的全局对象中去，如：

  $.extend({   hello:function(){alert('hello');}   });

 　　就是将hello方法合并到jquery的全局对象中。
 　　2、$.fn.extend(src)
 　　该方法将src合并到jquery的实例对象中去，如:

 $.fn.extend({   hello:function(){alert('hello');}  }); 

　　 就是将hello方法合并到jquery的实例对象中。

 　　下面例举几个常用的扩展实例：

 $.extend({net:{}}); 

　　 这是在jquery全局对象中扩展一个net命名空间。

   $.extend($.net,{    hello:function(){alert('hello');}   })

  　　这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

 　　三、Jquery的extend方法还有一个重载原型：  

 extend(boolean,dest,src1,src2,src3...)

      第一个参数boolean代表是否进行深度拷贝，其余参数和前面介绍的一致，什么叫深层拷贝，我们看一个例子：

 var result=$.extend( true,  {},       { name: "John", location: {city: "Boston",county:"USA"} },       { last: "Resig", location: {state: "MA",county:"China"} } ); 

      我们可以看出src1中嵌套子对象location:{city:"Boston"},src2中也嵌套子对象location:{state:"MA"},第一个深度拷贝参数为true，那么合并后的结果就是： 

 result={name:"John",last:"Resig",         location:{city:"Boston",state:"MA",county:"China"}} 

       也就是说它会将src中的嵌套子对象也进行合并，而如果第一个参数boolean为false，我们看看合并的结果是什么，如下：

 var result=$.extend( false, {},   { name: "John", location:{city: "Boston",county:"USA"} },   { last: "Resig", location: {state: "MA",county:"China"} }                       ); 

     那么合并后的结果就是:

  result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

　　以上就是$.extend()在项目中经常会使用到的一些细节。