タグ

jQueryとCSS3に関するkiyokichiのブックマーク (3)

  • jQueryで入力フォームの上にテキストを表示する「プレースホルダ(placeholder)」を作ってみる|BLACKFLAG

    入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ(placeholder)」。 入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。 HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますが HTML5に対応していないブラウザではJSなどを使って実装しなくてはいけません。 このプレースホルダを表示するjQueryプラグインも多々ありますが シンプルなスクリプト構成で実装できないか、試しにやってみたので紹介してみます。 まずは実装サンプルから。 下記の入力フォーム(INPUTテキスト、パスワード、テキストエリア)にフォーカスすると 表示されているテキストが消えます。 入力フォームからフォーカスが外れた際に、 フォーム内に何か任意のテキストが入力されていると プレー

    jQueryで入力フォームの上にテキストを表示する「プレースホルダ(placeholder)」を作ってみる|BLACKFLAG
    kiyokichi
    kiyokichi 2012/06/26
    placeholderでinput[type="password"]実装しようとすると初期テキストが●●●になっちゃうので、これで代用。IE8~で実装確認済み。
  • 文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO

    通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPRubyJavaなどサーバサイドで表示する文字列を加工することが多いかと思います。 しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。 そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。 実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。 尚

    文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO
    kiyokichi
    kiyokichi 2012/06/13
    表示領域から文字列がはみ出さないように省略して「…」とする方法について。CSSで対応する場合(1行のみ)は包括BOXにwhite-space:nowrap/width:XXpx;/overflow:visible以外/text-overflow:ellipsisを指定すればOK
  • IE で border-radius を使う方法 - それはBooks

    CSS3 から使えるようになった border-radius を IE でも使う方法です。IE でも使うと言っては語弊がありますが、IE でも角丸を表現する方法です。それは Blog で使っている方法をメモ。 IE で角丸を表現する方法 ご存じの通り、IE6、IE7、IE8 では CSS3 の border-radius を使って角丸を表現することはできません。んじゃ、どうやって角丸を実現するのかというと次のような方法があります。 border-radius.htc を使う VML を利用して、behavior を使って border-radius を実現する方法 border-radius.js を使う JavaScript を使って border-radius を実現する方法 JQuery Corner を使う jQuery Corner という jQuery プラグインを使って bo

    kiyokichi
    kiyokichi 2011/02/03
     IE6~8でborder-radiusを対応させる手段の比較とまとめ。ありがたや~~
  • 1