jQuery



2014年 9月 25

2014/9/20に開催されたGunma.web #17で話してきました。

発表スライド

コードはgithubに置いてあります。

jquery-vimize

webサイトをvim化するjQueryプラグインです。一応このブログに導入しているので動作確認出来ます。

コマンドはこの辺に書いてあります。

書いたキッカケ

もともと自分が書いたコードがあったのですが、ページトップに移動するコマンドがgだったのをとある方に「ggじゃないんですか?」って言われたのでちゃんと動くように書いてみました。

補足など

初めてのjQueryプラグイン作成なので勢いで書いた感じになっています。作法とかイマイチ分からないのですが、動けばいっか的な感じです。LTネタ思いついた時には1週間前だったのもあってあまり調べていません。

  • 移動はともかく / (or ?) で検索出来るの便利
  • 向いているサイトとあまり向かないサイトが有る
  • :cmdとgコマンドが使えるとやっぱりvimっぽい(気がする)

:cmdはスキなコマンドを追加できるようになっています。

今後

とりあえず :cmd を入力する時に画面には何も表示されないのでそれを直したいですね。あと、ブログのprev next に何かコマンド割り当てたい。

疑問

ところで、JavaScriptで enterキーの動作を他のキーで出来るように書けるのかな? oキーでリンク開けるようにしたい。

よく考えるとスマホファーストの昨今、時代遅れな感も…


Filed under: jQuery,勉強会,雑記

Trackback Uri






2012年 8月 15

確認バージョン:Twitter Bootstrap 2.0.4

bootstrap.cssで

.row-fluid [class*="span"]:first-child {
  margin-left: 0;
}

このようになっており、最初の<li>要素だけ margin-left:0 になるため、2段目からのサムネイルにズレが生じる。

サンプルコード

  • html5 – In bootstrap, how make the thumbnails fluid resize well – Stack Overflow
  • thumbnail of row-fluid

    解決策

    今のところCSSに追記するか、jQueryで操作するスクリプトを追記する方法が取られている模様。下記リンクにコードが載っている。

  • Issue #3494: Fluid Thumbnails Broken After First Row · twitter/bootstrap
  • CSSで対応する場合は、

    .row-fluid ul.thumbnails li.span12 + li { margin-left : 0px; }
    .row-fluid ul.thumbnails li.span6:nth-child(2n + 3) { margin-left : 0px; }
    .row-fluid ul.thumbnails li.span4:nth-child(3n + 4) { margin-left : 0px; }
    .row-fluid ul.thumbnails li.span3:nth-child(4n + 5) { margin-left : 0px; }

    となっているけど、それに付け加えて、

    .row-fluid ul.thumbnails li.span2:nth-child(6n + 7) { margin-left : 0px; }

    にしておくといい感じ。

    2.0.5で対応するのか…な?

    追記

    CSSで対応した場合、iOSシミュレータ(バージョン 4.3)で確認したところ、iPhone&iPadで反映されないみたい。jQueryの場合だと反映されるみたいだけど、実機だとどうなんだろ??
    iOSシミュレータが古いだけかなぁ。

    2012/8/22 追記

    祝バージョンアップ!
    Bootstrap 2.1.0になりましたが…相変わらずズレます…
    公式ページでソースを変えてみた(リストの要素を増やしただけ)けどダメポ。
    Bootstrap fluid thumbnail


    Filed under: CSS,jQuery

    Trackback Uri






    2011年 2月 18

    忘れそうなのでメモ。

    jQueryのappendで追加したdivにclickイベント | OKWave

    jQueryのappendで追加したdivにclickイベントは使用できるのでしょうか?
    〜〜略〜〜
    最初からあるdivでは正常に動作するので、appendで後付したからだと思います。
    これをうまく行う方法はないでしょうか?

    こんな質問(↑では解決していない)

    $('.btn').click(function(){alert('oh!');});
    $('#id').append('<a href="#" class="btn">ボタン</a>');

    こんな感じだとうまくいかない。
    ボタンというテキストにリンクが貼られて表示されてもクリックイベントが起こらない。
    .. continue reading ..


    Filed under: jQuery

    Trackback Uri