タグ

WEB制作と*jQueryに関するkana321のブックマーク (2)

  • 第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう | gihyo.jp

    jQueryプラグインの魅力は、JavaScriptの知識がなくても簡単に色々な機能を実装できることですね。今回は「誰でも簡単に実装できるツールチッププラグイン」を作成してみましょう。 ツールチッププラグインの要件は以下の通りです。 titleまたはalt属性がある要素を対象 titleとalt属性両方を持っている場合はtitleを優先 対象要素にマウスオーバーでツールチップをフェードイン 対象要素からマウスアウトでツールチップをフェードアウト 対象要素上ではツールチップはカーソルに追従 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード // ここからツールチッププラグイン $.fn.easyToolTip = function(options){ // toolTipを生成してbodyに追加しておく var toolTip = $('<div id="toolTip"

    第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう | gihyo.jp
    kana321
    kana321 2015/01/08
    jQueryで楽々実装できるツールチッププラグインを作ってみよう
  • 第12回 jQueryでセレクトボックスをデザインする | gihyo.jp

    デザインされたセレクトボックスを実装する セレクトボックスはCSSでほとんどスタイルを当てることができないので、フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は、HTMLCSS、そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。 作成方法はとても簡単なので、覚えておけば色々なシーンで流用できるでしょう。 まずは、完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。 疑似セレクトボックス そもそもデフォルトのセレクトボックスの挙動は クリックするとプルダウンが表示 プルダウンの項目をクリックする セレクトボックスの中身が選択した項目に置き換わる というようになっているのでこれを実装していきます。 セレクトボックスはselect要素とそれに内包されるoption要素(プルダウン部分)で構成されるので、それらを代替要素で構成し、プル

    第12回 jQueryでセレクトボックスをデザインする | gihyo.jp
    kana321
    kana321 2014/12/22
     jQueryでセレクトボックスをデザインする
  • 1