jQuery 応用 - user000422/0 GitHub Wiki

複数クラスの値を取得

// クラスをループさせ、thisで取得
$('.sample').each(function(){
  console.log($(this).text());
});

show（またはhide）命令が止まらなくなる問題の解決
アニメーション中の要素に対し、show（またはhide）命令を実行すると起こる

// アニメーション中ではない要素にのみアニメーションを実行
$('#sample:not(:animated)').show();

【汎用】フォーム生成 & 送信

var html = '<form method="post" action="sample.php">';
    html = '<input type="hidden" name="sample" value="sample">';
    html = '</fome>'
$('body').append(html); // 生成したフォームを設置

placeholder 消去 & 設定（表示）

$('#sample').removeAttr('placeholder'); // 消去
$('#sample').attr('placeholder', 'ここに表示したいテキスト'); // 設定

ライブラリ

jquery-ui.js（jQuery UI）… UIウィジェット作成支援
$("#sample").resizable(); … 対象要素をリサイズ（縁をドラッグで）可能な要素にする

<!-- 基本型 -->
<script>
$(function() {
  $("#sample").resizable();
}
</script>

jquery.layout.js（jQuery UI Layout Plug-in）… ページを分割しアプリケーション風に表示
jquery.jsを読み込ませる必要がある（ZIPでダウンロードしたら入ってる）
画面を5分割にレイアウトするプラグイン（上、右、下、左、中）
class="ui-layout-center" は必須

<!-- 基本型 -->
<script>
  var sampleLayout;
  $(document).ready(function() {
    sampleLayout = $('body').layout({
      applyDefaultStyles: true, // 分割基本型
      north__size: 100, // 北要素の高さ変更
      spacing_open: 10, // 要素ごとの隙間の幅を変更
    }
  }
</script>

⚠️ **GitHub.com Fallback** ⚠️