タグ

2013年3月9日のブックマーク (5件)

  • まさに忍者...JavaScriptの関数は第一級オブジェクト - maeharinの日記

    JavaScriptの関数は「ファーストクラスオブジェクト(第一級オブジェクト)」である。なので、変数に代入したり、配列にセットしたり、他の関数にわせたりできる。この変幻自在っぷりはすごい。newでコンストラクタになるところなんて変化の術のようだ。無名関数の即実行は影縫いの術みたいだし、callやapplyでthisの値を変えるとこなんて口寄せの術を彷彿とさせる。正に忍者 |--)ノシュッ==卍 変数に代入する var foo = function() {console.log('foo');}; foo(); 配列にセットする var fnList = [ function() {console.log('foo');}, function() {console.log('bar');}, function() {console.log('piyo');} ]; for(var i =

    まさに忍者...JavaScriptの関数は第一級オブジェクト - maeharinの日記
    Yukarigohan
    Yukarigohan 2013/03/09
    まさに忍者...JavaScriptの関数は第一級オブジェクト
  • 【jQuery】長いリストを短くして「もっと見る」をつける at softelメモ

    リストで、あまりに長くなって邪魔な場合があると思います。 例えば、WorPressの年月日のアーカイブの一覧が、3年ぐらいたつと36個もできてしまう。 普段は上10個ぐらいあれば十分。でも件数制限して画面から消してしまうのはなんだかもったいない。 そこで、下図のようなことをしてみます。 スクリプトが動くPCなどの環境ではリストがコンパクトになり、スクリプトが動かない環境では通常通りの表示をします。 JavaScript $(function(){ $("#list").each(function(){ $(this).find("li:gt(10)").each(function(){$(this).hide();}); $(this).append('<p>» もっと見る</p>'); $(this).find("p:last").click(function(){$(this).par

    【jQuery】長いリストを短くして「もっと見る」をつける at softelメモ
    Yukarigohan
    Yukarigohan 2013/03/09
    長いリストを短くして「もっと見る」をつける
  • [続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」

    「jTruncate」は、長くなってスペースをとってしまう文章を[続きを読む]などであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.jtruncate.js" type="text/javascript"></script> 実装 対象の要素にidもしくはclassを指定して、オプションを設定します。 <div id="div627">折りたたみする文章</div> <script type="text/javascript"> $().ready(function() { $('#div627').jTruncate({ length: 200, // 表示す

    Yukarigohan
    Yukarigohan 2013/03/09
    jQuery: [続きを読む]でテキストを省略、開閉できる「jTruncate」
  • jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験|BLACKFLAG

    TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示(読み込み)しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では<a>リンクを張った<img>画像タグを <span>タグで囲った構成のまとまり ———————————————————- <span><a><img></a></span> ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-

    jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験|BLACKFLAG
    Yukarigohan
    Yukarigohan 2013/03/09
    jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験
  • CSSだけで幅を超えた文字列を...で省略する - Qiita

    ある幅に合わせて文字列を省略したいときがありますが、 レンダリングされる文字によって幅が違うので、文字数で制御するのは割と面倒ですね。 ですが以下のようにcssを書いておけばきっちり決めた幅であふれた部分を「...」で省略してくれます。 p{ width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -o-text-overflow: ellipsis; /* Opera9,10対応 */ }

    CSSだけで幅を超えた文字列を...で省略する - Qiita
    Yukarigohan
    Yukarigohan 2013/03/09
    CSSだけで幅を超えた文字列を...で省略する