jQuery | 秋山ブログ

JavaScriptからCSSファイルに書かれた定義を取得する

JavaScriptからCSSの値を取得するには、たいていの場合はjQueryのcssメソッドを使えばOK.

$('#item').css('background-color');

ただし、これがCSSファイルに書かれたmax-widthやmax-heightの場合だとChromeやFirefoxごとに実装が違っていて、%で返ってきたり計算済みのpxで返ってきたりと面倒くさい。こうなる前のCSSファイルに書かれた最初のCSSの値をとる方法について書く。

続きを読む JavaScriptからCSSファイルに書かれた定義を取得する

jQueryのnavbar-toggleをクリックしてメニューを閉じられるようにする

$(document).ready ()->
  $('.navbar-toggle').click (e)->
    if $('.navbar-collapse.in').is(':visible')
      $('.navbar-collapse.in').collapse('hide')
      e.stopPropagation()

Rails + HAMLの環境で、URL Helperを使いながらjQuery Templateを使う

JavaScirptで利用できるテンプレートエンジンに「jQuery Templates」がある。これにはjquery-tmpl-railsというgemも用意されていて、すぐに使い始めることができる。使い方のチュートリアルとしてはブログ記事”jQuery公式のテンプレートplugin 「jQuery Templates」-JavaScript Library Archive“が分かりやすい。

railsのurl helperを使うと、routes.rbに書かれた内容に沿ってURLを自動で生成してくれる。例えば、routes.rbにresource :booksと書いていた場合、指定のIDのBookのページのURLを取得するにはbook_path(:id)と書けばよい。詳しくは以下参照。
2.3 Paths and URLs – Ruby on Rails Guides: Rails Routing from the Outside In
この時、:idに相当する部分は自動でURLエンコードされる。ここをjQuery Templatesで書き換えたい場合、ダラー( $ )と波括弧( { と } )がエスケープされてしまう。それを避ける方法。

あまり綺麗な書き方ができなかったので、もっとベターな方法(例えばURLHelperの機能を使う時にURLエンコードを禁止するような方法)があったらどなたか教えてください。

-# 以下はダミーコードで、動作検証はしていません

%ul#user-list

%script#profile-template(type="text/x-jquery-tmpl")
  %li
    != link_to('${user.name}', user_path('---1')).sub('---1', '${user.id}')

:coffee
  users = [
    {
      id: 1
      name: 'John'
    }, {
      id: 2
      name: 'Tom'
    }
  ]
  ($ "#user-template").tmpl(users).appendTo( "#user-list" )

[jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った

textareaに表示されているキャレット位置(カーソル位置)の画面上のXY座標(ページの一番左上からの位置)を取得したいと思って検索したけれど、キャレットの文字列内の位置(何文字目)を取得するライブラリばかりで、画面上からの位置を取得できるライブラリがなかった。なので、テキストエリアを指定するだけで簡単に現在のキャレット位置の座標が分かるライブラリをつくった。サジェストを表示するWebアプリケーション(EclipseのようなIDEとか？)を作りたい時に便利。jQueryがなくても使えるし、jQueryがあっても使える。

githubにアップロードしているので、そちらも参照。
http://akiroom.github.com/caretposition.js/

以下、使い方の解説。

続きを読む [jQuery対応] textareaのキャレット座標(XY座標)を取得するjavascriptライブラリを作った