0

ポートレット/サイズ変更可能な jQuery UI を使用する HTML ページがあります。

私の質問は、JS コードを作成するためのベスト プラクティスは何ですか?

  1. HTMLのようにスクリプト参照を使用します
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js "></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

それはより良いアプローチですか、それとも自分の JS フォルダー内に 2 つの JS を含めて参照する必要がありますか?

2. ポートレット/サイズ変更可能の jQuery UI 構成コードはどこに記述すればよいですか? このコードを HTML ファイル自体に記述する方が良いですか、それとも別の JS ファイル (jquery-ui-config.js など) に記述する必要がありますか?次のコードがあります。

$(function() {
$( ".column" ).sortable({
connectWith: ".column"
});
$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
.end()
.find( ".portlet-content" );
$( ".portlet-header .ui-icon" ).click(function() {
$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
});


 var maxBorderCellWidth = 350;
    var minBorderCellWidth = 200;
    var resizeCenter = function () {
        var clientWidth  = $(window).innerWidth();
        var leftWidth = $( ".left" ).outerWidth(true);
        var rightWidth = $( ".right" ).outerWidth(true);
       $('.center').width(clientWidth-leftWidth-rightWidth);
    }

    $( ".left" ).resizable({
      maxWidth: maxBorderCellWidth,
      minWidth: minBorderCellWidth,
      handles: 'e',
      resize: function (event, ui){
          resizeCenter();
      }
    });
    $( ".right" ).resizable({
      maxWidth: maxBorderCellWidth,
      minWidth: minBorderCellWidth,
      handles: 'w',
      resize: function (event, ui){
          resizeCenter();  
      }
    });



});
4

1 に答える 1

0

  1. あなたのやり方が実践基準です。Google を使用して jQuery ファイルを CDN するだけで、サイトを高速化できます。ご存じのように、Google は世界中にサーバーを持っています。

  2. jsコードを別のファイルに入れる必要があると思います。コードのセレクターのほとんどは HTML クラス要素を処理するためです。通常、クラス要素は一般的に使用されるため、このコードは HTML ページだけでなく実行される可能性があります。したがって、個別に配置すると、簡単に変更できます。

于 2013-03-10T11:05:15.233 に答える