jQueryの基本的な書き出し比較とまとめ

2015/11/17 JavaScript/jQuery  このエントリーをはてなブックマークに追加
社内でJavaScript職人の地位が確立されてきた僕です。
元々コーディング大好きマンなので楽しい限りです。
PHPを忘れそうですがw

今回は後輩(デザイナー)から、jQueryの書き出し(書き始め方?)が色々あってよくわからないと言われたので、比較とまとめをしていきます。
おそらく、後輩に限らず、デザイナーやコーダーの方がよく使うものは下記辺りではないかと。印象も参考までに載せておきます。


1)$(function(){...});←多分1番使う

2)$(document).ready(function(){...});←次によく使う

3)jQuery(function($){...});←あまり使わないけど、検索したら見かける

4)jQuery(document).ready(function($){...});←WordPressでよく見る

5)(function($){...})(jQuery);←使わないけどプラグインの中に書いてある


こんな感じらしい。
おそらく日常的に使っている人でも、正確に比較と説明ができるという方は少ないかもしれません。わからなくても書けますし。順に解説します。

Chart.jsの棒グラフ(Bar)で、数値(data)を常時表示にする方法

2015/11/10 JavaScript/jQuery  このエントリーをはてなブックマークに追加
Chart.js

Chart.js

かわいい感じのグラフをcanvas上に生成してくれるChart.js。
以前「Chart.jsの円グラフ(Pie)で、項目名(label)を常時表示にする方法」という記事を書いたのですが、質問が来ました。


「bar chartでもデータをグラフ上に表示させたいのですが同じやり方でしょうか?」


残念ですが全く別です。


しかも棒グラフの方がややこしいです。何でこんな仕様にしたのか、開発者に問いたい……まぁなんとなく理由はわかりますが。ということで、質問への回答ということで、今回は棒グラフ編です。

CKEditorのサーバブラウザ機能で選択した画像URLをカスタマイズする

2015/11/06 JavaScript/jQuery  このエントリーをはてなブックマークに追加
ckeditor


WYSIWYGエディタ「CKEditor」と、相変わらず格闘させられています。
今回困ったのは下記のようなカスタマイズ依頼です。


・CKEditorの画像埋め込み時に、サーバブラウザ機能で画像一覧を表示。

・サーバブラウザで画像を選択すると、選択した画像のURLをフォームに挿入。

・この「選択した画像のURL」を希望する形式にカスタマイズしたい。


普通に考えたら、サーバブラウザ側を調整して……という話なんですが、この案件ちょっと特殊でして、CKEditor側を調整せざるをえなかったんです。途中で気づいて血の気が引きましたけど。

ということで、忘備録がてら書いておきます。CKEditorの画像埋め込みプラグインをカスタマイズするので、変更するファイルは、 ckeditor/plugins/image/dialogs/image.jp です。

【jQuery】valやpropで変化させた際にchangeイベントを実行させる方法

2015/06/11 JavaScript/jQuery  このエントリーをはてなブックマークに追加
jQuery

input要素が変更された時に処理を実行するとして、

$('input[name=radio1]').change(function(){
    $('.radio_caption').html('値が'+$(this).val()+'になりました');
});


のように書いている人も多いと思います。自分もよく書きます。
さて、これが下記のようになった場合どうでしょうか?


// child_radioの値が変更されたら実行
$('input[name=child_radio]').change(function(){
    $('.radio_caption').html('値が'+$(this).val()+'になりました');
});

// 親ラジオボタンparent_radioが変更されたら、child_radioに値を引き継ぐ
$('input[name=parent_radio]').change(function(){
    $('input[name=child_radio][value='+$(this).val()+']').prop('checked','checked');
});



この場合、$('input[name=child_radio]').change();は実行されません。何でよ?値(選択)はpropで変わってるのに?と思うかもしれませんが、変わらないんです。この場合は下記のようにします。

【jQuery】valueを指定してラジオボタン(input:radio)を選択状態にする

2015/06/10 JavaScript/jQuery  このエントリーをはてなブックマークに追加
jQuery

jQueryでラジオボタン(input:radio)を選択状態にするのは

$('#radio_test1').attr('checked','checked');

が上手くいかない時は

$('#radio_test1').prop('checked','checked');

にするといいよ!というのを前社内で言ったことがあるのですが、「じゃあ入ってきた値に応じて変更するのはどうすればいいんだよ(よくあるのは他フォームの値をinput:radioの選択値に設定するとか)」というのがあったので、メモしておきます。

続きを読む >>