[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
入力欄に "" を入れて、その間に入力のカーソルが入る、みたいな状態を作りたかった。次のようになる。
とりあえず jQuery を読み込む。別に jQuery を使わなくても input に使っている DOM が取れればなんでもいい。jQuery が簡単、というだけの話。
さらに、入力欄を作る。実行ボタンはとりあえずトリガーになるものが欲しいから入れているだけ。実際に使うとしたらショートカットボタンとかにバインドすることになりそう。
<input type="text" id="js-cursor-position-control-sample-input" /> <input type="button" id="js-cursor-position-control-sample-button" value="実行" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
JS を仕込む。やることは以下の4つ
var $button = $("#js-cursor-position-control-sample-button");
var $input = $("#js-cursor-position-control-sample-input");
$button.click(function(e){
$input.val('""');
$input.focus();
$input.get(0).setSelectionRange(1, 1);
});
この記事を書いている時点ではHTMLInputElement.setSelectionRange() - Web API インターフェイス | MDN も日本語訳されてなかった。あまり使われてないのだろうか。3つの引数をとる関数である。
今回の使い方では第三引数は関係ない。第三引数は文字列の先頭/終端のどっち側から選んで選択されたかを示す。わかりやすい例では Shift キーを押したまま選択する場所を変えるとどう挙動するか、があるだろうか。
特定文字列を選択させてコピペを促したりするのに便利そうである。
こんな。
とりあえず HTML をかく。
フェードインで出したいテキストを1行ずつ p 要素で囲って書いていく。その上でフェードインで出したいテキストを div 要素で括り、適当な ID を振る。
<div id='fade-in'> <p>ある日突然、あなたに１２人もの妹ができたらどうしますか？</p> <p>それも……とびっきりかわいくて</p> <p>とびっきり素直で</p> <p>とびっきり愛らしくて</p> <p>とびっきりの淋しがりや。</p> <p>しかも、そのうえ……</p> <p>彼女達はみんなみんな、とびっきり！</p> <p>お兄ちゃんのコトが大好きなんです……</p> </div>
JS を追加する。今回重要な仕事をするのは http://shunshun94.web.fc2.com/lib/scroll-fadein.js に配置された jQuery プラグイン。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://shunshun94.web.fc2.com/lib/scroll-fadein.js"></script>
<script>
$('#fade-in').scrollFadeIn();
</script>
後はページを開けば上記の HTML がスクロールに合わせてちょっとずつ表示されるはず。
上記の $('#fade-in').scrollFadeIn(); がトリガーになっている。これにより、 $('#fade-in') 直下の各要素がフェードインするようになる。なお、 p 要素以外もフェードインするようになっているので、画像とかうまく使ったら面白いかもしれない。途中まで進めると背景画像が上書きされるとか。
いくつ要素があるかわからないリストに対し、”リストの要素をクリックしたらその要素に応じた何かが発生する”、というようにする。この際、リストの各要素にイベントをバインドしてもよいが、もっと楽にやれる方法がある。
<ul id="animals"> <li>こぶた</li> <li>たぬき</li> <li>きつね</li> <li>ねこ</li> </ul>
$('#animals').click(function(e) {
alert($(e.target).text());
});
こうすると、クリックした動物の名前が出てくる。親要素にイベントをバインドした上で e.target で実際にクリックされた要素を取得することで各 li にイベントバインドするよりも単純に書ける。
クリックされてイベントが発生してほしくないものがクリックされた場合の対処は以下がある。
以下の html で class ='noAlert' のものをクリックしても出ないようにすることを考えてみよう。
<ul id="animals"> <li class='noAlert'>おに</li> <li>こぶた</li> <li>たぬき</li> <li>きつね</li> <li>ねこ</li> <li class='noAlert'>かいじゅう</li> </ul>
$('#animals').click(function(e) {
if($(e.target).hasClass('noAlert')) {
return;
}
alert($(e.target).text());
});
きわめて単純。 noAlert クラスを持つ場合は途中で return してしまう。多分こちらの方が直感的だと思う。
$('#animals').click(function(e) {
alert($(e.target).text());
});
$('.noAlert').click(function(e){
e.stopPropagation();
});
stopPropagation を使うとイベントが伝播しなくなる。そのため、 li がクリックされたことはわかっても ul がクリックされたことをキャッチできなくなる。
noAlert の要素にイベントをバインドする、という面倒があるが……
UI Events Specification にもう少し詳しい話がある。
スマートフォンから Drag & Drop をちゃんと使えるウェブアプリケーションをを作りたかったのだが、色々やってもうまくいかなかった。が、この jquery.pep.js だとうまくいったので紹介。
Copyright © Brian Gonzalez
Pep is licensed under the https://opensource.org/licenses/MIT
gihub リポジトリからコードを入手し、 src ディレクトリ内の jquery.pep.js を使う。
<div id="pep-js-try" style="width:20px;height:20px;background-color:red;"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.pep.js" type="text/javascript"></script> <script src="callPep.js" type="text/javascript"></script>
// callPep.js
$('#pep-js-try').pep();
内部の座標処理を調べた。どうも CSS の transform プロパティを使って実現しているようだ。そのため、例えば次のようにすると将棋のようなマス目にそってコマを動かすインタフェースのゲームを作るときに便利かもしれない。
function normalizePosition($pepedElement) {
var blockSize = 32; // 例えば 1辺 30px+border 1px のマス目
$pepedElement.pep({
// stop を使うとドロップした際に発生するイベントを設定できる。
// 他にもプロパティがあるので詳細は https://github.com/briangonzalez/jquery.pep.js#usage
stop: function(event, object) {
var $elem = this.$el; // this.$el にドラッグアンドドロップ対象のオブジェクトが格納されている
var position = $elem.position(); // 親要素からの相対位置取得
// 何番目のマスにいるのか計算
var coordinateX = Math.floor((position.left + (blockSize / 2)) / blockSize);
var coordinateY = Math.floor((position.top + (blockSize / 2)) / blockSize);
var normalizedX = (coordinateX * blockSize) - Number($elem.css("left").replace("px", ""));
var normalizedY = (coordinateY * blockSize) - Number($elem.css("top").replace("px", ""));
$elem.css("transform", "matrix(1, 0, 0, 1," + normalizedX + "," + normalizedY +")");
}
});
}
こんな感じのコードを実際に過去に作ったアプリケーションで使っている。
http://sy17.sakura.ne.jp/shunshun/tofChatProto.html
jQuery プラグインの notify.js が何かに使えそうなのでメモがてら紹介。開発者ツールを使えば書いてある JavaScript はすぐに試せるようにしてある。
Copyright © Jaime Pillora <dev@jpillora.com> Released under the MIT license https://opensource.org/licenses/MIT
Notify.js は jQuery のプラグイン。ポップアップで警告や指示などを出すことができる。
<input type="button" id="notify-js-try"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script> <script src="lib/notify.min.js" type="text/javascript"></script> <script src="callNotify.js" type="text/javascript"></script>
// callNotify.js
// jQuery オブジェクトに notify 関数が追加されるので以下のように書ける
$.notify("このように書くと画面右上にポップアップが出る");
$("#notify-js-try").click(function(e){
$("#notify-js-try").notify("#notify-js-try に吹き出しの形でポップアップが出る");
});
デフォルトだと赤いもの (エラー) が出るが、第二引数でコントロールできる。
$.notify("緑","success");
$.notify("青","info");
$.notify("黄","warn");
$.notify("赤","error"); // デフォルトはこれ
第二引数に文字列ではなく連想配列を与えることで様々な設定ができる。
$.notify("色々カスタマイズされている",{
className: "success", // 上記のポップアップの種類
position: "right top", // left, center, right 及び top, middle, bottom。両方書かなくてもいい
autoHide: true, // 自動で消えるか否か
clickToHide: true, // ポップアップをクリックしただけで消えるか否か
autoHideDelay: 3000, // 自動で消えるのにかかる時間。ミリ秒で入れる。デフォルトは5秒。これだと3秒
arrowShow: false, // ポップアップが吹き出しになるか否か。デフォルトは true。
arrowSize: 5, // ポップアップが吹き出しな場合の矢印のサイズ。px 単位
showAnimation: 'slideDown', // ポップアップが出てくるときのアニメーション。faceIn とかでも。
showDuration: 400, // ポップアップが出てくるときのアニメーションにかかる時間
hideAnimation: 'slideUp', // ポップアップが出てくるときのアニメーション。
hideDuration: 200, // ポップアップが消えるときのアニメーションにかかる時間
gap: 2 // ポップアップ元になる要素とポップアップの距離。 px 単位
});
次のようにすると第二引数で指定しなくてもポップアップの種類を指定できる
$.notify.defaults({className:"info"});
$.notify("これは info (青) で出る");
さらにスタイルを拡張したりできるが、それはまた今度書く。