网站开发JS学习总结

标签：javascript   项目开发   工作小结   网站开发   iframe   

近期使用Yii开发了一个网站,前台使用了大量的Js交互效果，由于之前一直研究php,对javascript使用不多，导致项目进行中，进度缓慢，JS调试频频出错，不过，最后还是通过几天的努力，将问题解决了，现在对这段时间工作小结一下，以便后续项目开发时，可以借鉴，快速完成任务。

1. 项目使用了colorbox插件，在使用该插件过程中，出现了一个iframe高度自适应的问题，这个问题花了本人接近半天的时间才搞定。所以有必要记录下来。

   a. 去网站(http://www.jacklmoore.com/colorbox/)下载colorbox包，参考里面的示例，可以发现colorbox功能比较全面，刚好我的项目中需要iframe模式的弹出框，就选择用iframe.且不带滚动条，因此可以设置

   
   

   $(".iframe").colorbox({

               iframe:true,           

               scrolling:false,

               innerWidth:‘898px‘,

               innerHeight:‘445px‘,

               overlayClose:false,               

           });

   如果希望iframe页面的高度自适应，便在子页面添加代码如下:

   
   

   <script type="text/javascript">

   jQuery(document).ready(function (){  

    jQuery(window).bind("load", function () {  

    var frameWidth = jQuery(document).width();  

    var frameHeight = jQuery(document).height();   

    parent.$.fn.colorbox.resize(frameWidth, frameHeight);  

    });  

   }); 

   </script>

   设置这两步，就可以达到自己想要的效果了。

   
   

本文出自 “皮爱吃皮” 博客，请务必保留此出处http://piaipi.blog.51cto.com/9387252/1619813

网站开发JS学习总结

标签：javascript   项目开发   工作小结   网站开发   iframe   

原文地址：http://piaipi.blog.51cto.com/9387252/1619813