jQuery | You Look Too Cool https://stabucky.com/wp ゆるくつくる stabuckyのブログ Thu, 29 Jan 2026 13:08:09 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://stabucky.com/wp/wp-content/uploads/2024/05/cropped-stabucky-32x32.png jQuery | You Look Too Cool https://stabucky.com/wp 32 32 jQueryで指定した箇所までスクロールする方法 https://stabucky.com/wp/archives/12694 https://stabucky.com/wp/archives/12694#respond Tue, 17 Dec 2019 23:56:56 +0000 https://stabucky.com/wp/?p=12694 ブログなどに自動的に目次をツールを作ろうとして挫折しました。その際に調べたことをメモしておきます。
HTMLでは見出しの部分にh2やh３などのタグを使います。このタグをめがけてスクロールする方法です。

次のように書くと「２番めのh３タグ」までスクロールします。

obj = $("h3:nth-of-type(2)");
y = obj.offset().top;
$("body").animate({scrollTop:y}, "slow");

“h3:nth-of-type(2)”の部分が「２番めのh３タグ」を表します。
この部分の書き方はCSSのセレクターと同じです。

というタグであれば”#abc”とします。
書き換えれば色々使えます。

]]> https://stabucky.com/wp/archives/12694/feed 0 長い文字列を省略して表示する方法 https://stabucky.com/wp/archives/12666 https://stabucky.com/wp/archives/12666#respond Sat, 09 Nov 2019 00:56:01 +0000 https://stabucky.com/wp/?p=12666 HTMLで長い文字列を右端で切って省略して表示する方法です。
下の図のように長い文字列を切って右端に省略記号を付けます。

基本

CSSで対応できます。
下のとおりとします。classがsampleであるものに対して適用するケースです。

.sample {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

応用

省略した部分を元に戻したい場合はJavaScript(jQuery)を使います。

HTML

<p class="long">123456789012345678901234567890123456789012345678901234567890</p>

CSS

.long {
  word-wrap: break-word;
  cursor: pointer;
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

JavaScript(jQuery)

$(".long").click(function() {
  $(this).toggleClass("ellipsis");
});

classをlongとします。
longとellipsisというclassに対するstyleを用意します。
toggleClassは指定したclassがなければ追加、あれば削除します。
このようにすると最初は省略されて表示されますがクリックすると全体が表示されます。

サンプル

詳しくはサンプルを見てください。

]]> https://stabucky.com/wp/archives/12666/feed 0 jQueryでダイアログを表示する方法 https://stabucky.com/wp/archives/12049 https://stabucky.com/wp/archives/12049#respond Sat, 16 Feb 2019 02:38:20 +0000 https://stabucky.com/wp/?p=12049 jQueryUIを使うとダイアログを取り扱うことができますが、小さなプログラムなので、jQueryUIは使わずjQueryだけでダイアログを表示させてみようと思いました。
意外と苦労したので、メモとして残しておきます。

やりたいことは次の2点でした。

クリックした位置の右にダイアログを表示。
ダイアログの範囲外をクリックするとダイアログを非表示。

この非表示のところで苦労しました。
ダイアログと言いながら中身は空っぽです。

CSS

#dialog {
  border: solid 1px silver;
  background-color: aliceblue;
  display: none;
  position: absolute;
  width: 200px;
  height: 200px;
}

HTML

<div id="base">ここをクリックして表示</div>
<div id="dialog">ダイアログ</div>

JavaScript

$("#base").click(function(event) {
  $("#dialog").show();
  $("#dialog").css({ top: event.pageY, left: event.pageX });
  event.stopPropagation();
});
$(document).click(function() {
  $("#dialog").hide();
});

サンプル

]]> https://stabucky.com/wp/archives/12049/feed 0 jQueryで「以外全て」を指定する方法 https://stabucky.com/wp/archives/11599 https://stabucky.com/wp/archives/11599#respond Sun, 07 Oct 2018 02:23:22 +0000 https://stabucky.com/wp/?p=11599 jQueryのセレクターで、全てを指定する場合は「*」を使います。
また、ある要素以外を指定する場合は「:not」を使います。
「:not(.apple)」とするとappleというクラスを使用している要素以外が指定されます。

appleというクラスを使用している要素の配下全てを指定する場合は「:not(.apple *)」とします。
ある部分を除外して処理したいときに使える方法で、例えば「$(“:not(.apple *)”).each(function(){}」のように使います。

]]> https://stabucky.com/wp/archives/11599/feed 0 jQueryでtextareaの値はvalで取得する https://stabucky.com/wp/archives/8055 https://stabucky.com/wp/archives/8055#respond Sat, 09 Apr 2016 02:10:22 +0000 http://stabucky.com/wp/?p=8055 HTMLのtextareaは

<textarea>abc</textarea>

と書きます。
jQueryでは、このようにタグで挟む場合は.html()で値を取得できます。
しかしtextareaの場合は.val()で取得します。

実際に試してみたところ、.val()、.text()、.html()のいずれでもtextareaの値を取得することができました。
しかし、textareaの内容を書き換えてから取得すると、書き換えた後の値を取得できるのは.val()だけでした。

一方、値のセットについては、やはりいずれの場合でもセットすることができました。
しかし、.text()と.html()では、一度、セットした後、再度セットしようとすると正しく動作しませんでした。.val()ならば意図通り動作します。

jQueryでtextareaの値を取得したりセットしたりする場合は.val()を使うのが確実です。

なおChromeとFirefoxでは上述のような動作をしますが、IEでは.text()と.html()でも.val()と同じ動作をします。

]]> https://stabucky.com/wp/archives/8055/feed 0 目次を自動的に生成するjQueryプラグイン https://stabucky.com/wp/archives/6640 https://stabucky.com/wp/archives/6640#comments Wed, 20 Aug 2014 09:11:12 +0000 http://stabucky.com/wp/?p=6640 HTMLで書いたページに目次を自動的に追加するjQueryプラグインです。
h1-h6で記載した見出しを抽出し、目次を作成します。
目次には見出しへのリンクが設定されます。
このプラグインは二つのコードからできています。

プラグイン本体

プラグイン本体です。h1-h6を抽出し配列に格納します。またh1-h6にidを追加してリンク先にします。

jQuery.fn.toc = function(depth) {
  return this.each(function() {
    var headers, re, i;
    headers = [];
    re = new RegExp("h([1-" + depth + "])", "i");
    i = 0;
    $("*").each(function() {
      var ms;
      ms = $(this).get(0).tagName.match(re);
      if(ms) {
        $(this).prop("id", "header" + i);
        headers.push([
          parseInt(ms[1]),
          "<a href='#header" + i + "'>"
          + $(this).html() + "</a>"
        ]);
        i++;
      }
    });
    $(this).append(array2ul(headers));
  });
}

配列をリストに

プラグイン本体で抽出した配列をulのリストにします。階層を反映します。

function array2ul(a) {
  var t, exlevel, level, i, j;
  t = "";
  exlevel = 0;
  for(i = 0; i <= a.length; i++) {
    level = i < a.length ? a[i][0] : 0;
    for(j = 0; j < Math.abs(exlevel - level); j++) {
      t += exlevel < level ? "<ul>" : "</ul>";
    }
    t += i < a.length ? "<li>" + a[i][1] + "</li>" : "";
    exlevel = level;
  }
  return t;
}

使い方

HTMLを次のようにします。
h1-h6を適切に使います。
目次をセットする箇所に「<div id="mokuji"></div>」などと書きます。bodyの先頭がよいでしょう。
スクリプトに「$(“#mokuji”).toc(3);」などと書きます。数字は見出しの深さです。「3」ならばh1からh3について目次を作成します。

<body>
<div id="mokuji"></div>
<h1>見出しＡ</h1>
<h2>見出しＢ</h2>
<p>本文。</p>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.toc.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#mokuji").toc(3);
});
</script>
</body>

サンプル

サンプルとプラグインは次の通りです。

サンプルページ

jquery.toc.js

]]> https://stabucky.com/wp/archives/6640/feed 2 複数のテキストボックスの値を結合 https://stabucky.com/wp/archives/5668 https://stabucky.com/wp/archives/5668#respond Fri, 11 Oct 2013 21:24:08 +0000 http://stabucky.com/wp/?p=5668 テキストボックス(inputタグ)が大量にあって、これらをパラメータとしてPHPのファイルに送信する必要に迫られました。
一つずつnameを付けるのが基本ですが長くなるので、CSVとして渡し、配列化して使いたいと思います。

input

  1. HTML
  2. jQuery

HTML

<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="text" class="abc">
<input type="button" id="mybtn" value="実行">

このようにinputタグが大量にあります。
実行ボタンを押すとそれぞれのテキストボックスの値をカンマ区切りで結合して、「test.php?q=val0,val1,val2,val3,val4」のような形で送信したいのです。
JavaScript(jQuery)で処理する方法を考えました。

jQuery

$(document).ready(function(){
  $("#mybtn").click(function(){
    var arrs = [];
    $("input.abc").each(function(){
      arrs.push($(this).val());
    });
    var url = document.location + "?q=" + arrs.join(",");
    document.location.href(url);
  });
});

このようにして「abc」というクラスのテキストボックスを全て配列に取得します。配列をカンマ区切りで結合します。
ここでは現在のファイル自身にパラメータを追加します。ファイル自身は「document.location」で取得できます。URLをセットすることもできます。

詳細は省略しますが、PHPとしては「$_get[‘q’]」としてCSV(“val0,val1,val2,val3,val4”)を取得し、explodeで配列に分割して使います。

]]> https://stabucky.com/wp/archives/5668/feed 0 ピボットテーブルを表示するjQueryプラグイン https://stabucky.com/wp/archives/4835 https://stabucky.com/wp/archives/4835#respond Tue, 19 Feb 2013 13:43:10 +0000 http://stabucky.com/wp/?p=4835 Excelにはピボットテーブルという機能があります。クロス集計と呼ぶ人もいます。
これをHTMLのテーブルで再現するjQueryプラグイン「jquery.pivot.js」を作りました。

使い方

  1. プラグイン(jquery.pivot.js)をダウンロードします。
  2. HTMLを書きます。後述のサンプルを参考にしてください。
    • 元となるテーブルを書きます。idを設定します。1行目は見出しです。合計欄はセットしません。
    • ピボットテーブルを表示する箇所を「<div id=”gokei”></div>」のように書きます。
    • スクリプトを書きます。「$(表示先のid).pivot(対象テーブルのid,行ラベル(左側),列ラベル(上側),値,区分);」のように書きます。
      • 表示先のidは「#gokei」のように書きます。「#」を付けます。
      • 対象テーブルのidは「mytable」のように書きます。「#」を付けません。
      • 行ラベル、列ラベル、値は見出しの文字列をセットします。
      • 区分は合計ならば「sum」、カウントならば「count」もしくは空文字列にします。
  3. これらを同じフォルダに保存します。
  4. ページを開くとピボットテーブルが表示されます。


sample

サンプル

<table id="mytable">
  <tr>
    <th>日付</th>
    <th>商品</th>
    <th>支店</th>
    <th>売上</th>
  </tr>
  <tr>
    <td>1月1日</td>
    <td>スキャナ</td>
    <td>千葉</td>
    <td>20000</td>
  </tr>
  <!--省略-->
</table>
<p>合計</p>
<div id="gokei"></div>
<p>個数</p>
<div id="kosu"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pivot.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function () {
  $("#gokei").pivot("mytable", "商品", "支店", "売上", "sum");
  $("#kosu").pivot("mytable", "商品", "支店", "売上", "count");
});
//-->
</script>
]]> https://stabucky.com/wp/archives/4835/feed 0 jQueryでチェックボックスを操作 https://stabucky.com/wp/archives/4830 https://stabucky.com/wp/archives/4830#respond Tue, 19 Feb 2013 13:12:18 +0000 http://stabucky.com/wp/?p=4830 前にも書いたことがあるかもしれませんが、jQueryでチェックボックスを操作する方法をまとめます。

次のHTMLのようなチェックボックスがあったとします。

<input type="checkbox" id="c0">
<input type="checkbox" id="c1">
<input type="checkbox" id="c2">
<input type="checkbox" id="c3" checked>
<input type="checkbox" id="c4" checked>

次のjQueryを実行します。

$("#c0").prop("checked", true);
$("#c1").prop("checked", "checked");
$("#c2").prop("checked", "dog");
$("#c3").prop("checked", false);
$("#c4").prop("checked", "");

上から3行はチェックを入れます。「checked」に「true」をセットするのが基本のようです。
3行目は「dog」とありますが、要するに空でない文字列ならば「true」と判断されるので何でもよいようです。

下から2行はチェックを外します。「checked」に「false」をセットするのが基本のようです。
最下行は空文字ですが「false」と判断されるため、これでも外れます。

※Chrome24、IE6、jQuery1.9.1で確認しました。

]]> https://stabucky.com/wp/archives/4830/feed 0 jQueryでattrの代わりにpropを使う https://stabucky.com/wp/archives/4829 https://stabucky.com/wp/archives/4829#comments Tue, 19 Feb 2013 13:07:05 +0000 http://stabucky.com/wp/?p=4829 jQueryの1.9の変更点を調べていて大事なことに気付きました。
jQueryでclassなどを書き換えるときには「attr」を使っていましたが、実は1.6から非推奨になっていました。
代わりに「prop」を使います。使い方は同じようです。

次のようなHTMLがあったとします。

<div id="mydiv">test</div>

jQueryで次のようにするとclassをセットできます。

$("#mydiv").attr("class","apple");

※jQuery1.9.1で確認しました。

]]> https://stabucky.com/wp/archives/4829/feed 2