JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

このサンプルは、jQueryの各種ライブラリを利用してポートレットを表示します。[Expend][Collapse]をクリックするとすべてのコンテンツが展開および折りたたまれます。[Invert]をクリックすると展開/折りみを繰り返します。右端に表示されている[x]をクリックするとコンテンツを消します。[+]をクリックすると表示します。

    $(function() {
      // Toggle Single Portlet
      $('a.toggle').click(function() {
        $(this).parent('div').next('div').toggle();
        return false;
      }
		);

      // Invert All Portlets
      $('a#all_invert').click(function() {
        $('div.portlet_content').toggle();
        return false;
      }
		);

      // Expand All Portlets
      $('a#all_expand').click(function() {
        $('div.portlet_content:hidden').show();
        return false;
      }
		);

      // Collapse All Portlets
      $('a#all_collapse').click(function() {
        $('div.portlet_content:visible').hide();
        return false;
      }
		);

      // Open All Portlets
      $('a#all_open').click(function() {
        $('div.portlet:hidden').show();
        $('a#all_open:visible').hide();
        $('a#all_close:hidden').show();
        return false;
      }
		);

      // Close All Portlets
      $('a#all_close').click(function() {
        $('div.portlet:visible').hide();
        $('a#all_close:visible').hide();
        $('a#all_open:hidden').show();
        return false;
      }
		);

      // Controls Drag + Drop
      $('#columns td').Sortable(
			{
			  accept: 'portlet',
			  helperclass: 'sort_placeholder',
			  opacity: 0.7,
			  tolerance: 'intersect'
			}
		);
    }
  );  

コメント・提案の投稿！

名前
メール
件名
本文

送信中です...