1

コントロールの親要素の幅のサイズが変更されるタイミングを決定するスクリプトが必要です。これは、Windowsのサイズ変更イベントで決定されます。必要なのは、親が以前よりも小さいか大きいかを瞬時に知ることだけです。実用的な例を残してください-感謝されます

JavaScript：

(function ($) {
   $.fn.quicklist = function () {
      var _this = this;
      var config = {   
         quicklistParentWidth: $(_this).parent().width(),    
      }                

      var parentWidth = config.quicklistParentWidth;
      $(window).resize(function (event) {
         var currWidth = config.quicklistParentWidth;
         $(_this).parent().css('width', config.quicklistParentWidth);

         if (currWidth > parentWidth) {
            $('#width').text('greater');    
         } else if(parentWidth < currWidth) {
            $('#smaller').text('smaller');
         }
         parentWidth = currWidth;
      });
   };
})(jQuery);

$(document).ready(function () {            
   $('#quicklist').quicklist();
});

HTML：

<table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr style="height:34px">
        <td style="background:url(images/classic/quicklink_bar.png) 0px 0px; background-repeat:repeat-x; width:100%;">
            <ul id="quicklist">
                <li><a href="#">List Goes here</a></li>
           </ul>
        </td>
        <td style="background:url(images/classic/quicklink_bar.png) 0px 0px; background-repeat:repeat-x; ">
            <a id="link" href="#">Link</a>
        </td>
    </tr>
</table>
<span id="width"></span>
4

1 に答える 1

1

これがjavascriptの動作バージョンです。http://jsfiddle.net/ZhG8N/

<div style="width:50%; background:#F00">not yet resized
    <div id="child"></div>
</div>

<script>
var parent = document.getElementById('child').parentNode,
    lastSize = parent.offsetWidth,
    newSize, timer;


window.onresize = function(){
    newSize = parent.offsetWidth;
    if(lastSize > newSize){
        parent.innerHTML = 'smaller';
    }
    else if(lastSize< newSize){
        parent.innerHTML = 'wider';
    }
    lastSize = newSize;
}
</script>
于 2012-11-27T02:08:37.937 に答える