タグ

web制作とサンプルに関するkashi57moveのブックマーク (3)

  • 第17回 「その場編集」を実装する | gihyo.jp

    「その場編集」を実装 前回はツールチップの実装方法をご紹介しました。 今回「Edit In Place」や「その場編集」と呼ばれる、テキストをクリックすると、その場で編集できるようにする仕組みを実装してみます。 今回の仕組みを考える この「その場編集」の仕組みを考えてみましょう。今回の要件は以下の通りにします。 最初はただのテキスト クリックをすると、テキストがinput要素に置き換わり編集可能に。 input要素からフォーカスが外れたら、input要素が編集後の文字に置き換わる。 フォーカス外れた時、valueの値が空なら最初の値に戻す。 来であれば、上記の仕組みの4の後に、PHPなどでデータベースに編集後の情報を送信し、保存するという仕組みになるのですが、今回はその前のところまでの実装方法のご紹介とします。 まずは完成サンプルとソースコードを見てみましょう。 完成ソースコード jQu

    第17回 「その場編集」を実装する | gihyo.jp
  • jQueryカルーセルプラグインいろいろ

    jQuery Infinite Carousel... / CarouFredSel 5.5.0 / WOW Slider他...全10件

    jQueryカルーセルプラグインいろいろ
  • いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!

    面白法人カヤックがサイトリニューアル! いきなり手前みそで恐縮ですが、今年の夏、面白法人カヤックがコーポレートサイトを2年ぶりにリニューアルしました。 「世界一更新頻度が高く、カヤックの活動がひと目で分かるコーポレートサイト」をコンセプトに、可読性が高く容量も軽いサイトに仕上げました。 ひと目見るだけで、最近のカヤックの動向が分かるようにニュースでTOPページを構成し、日々リアルタイムにカヤックの最新の情報を発信します。 技術的には、ブラウザのウィンドウサイズによって拡縮する画像はベクターファイルであるSVGScalable Vector Graphics)画像で置き換えたり(SVGはベクトル形式の画像のため、拡大してもボケない)、CSS3を用いることで画像の使用を極力控えたりするなど、ページの軽量化を実現しています。 カヤックサイトのCSSテクニックを丸ごと伝授! 稿では、サイトリニ

    いますぐ使えるCSS3テクニック集! コピペ用サンプル付き!
  • 1