タグ

ブックマーク / html-coding.co.jp (2)

  • 画像を使わない擬似フォームUIの作り方 第02回 「jQueryを使った擬似フォームUIの操作」|クロノドライブ

    前回はCSSを使って擬似フォームUIのデザインを整えるところまでを紹介してきましたが、今回からは擬似フォームUIの肝となる、jQueryを使ったフォーム操作の方法を紹介していきます。 前回の記事はこちら STEP05 jQueryでチェックボックスのチェック状態を操作する この時点でのサンプルを表示する 擬似フォームUIでは、実際のチェックボックスは隠れた状態になるため、jQueryでチェック/未チェックの切り替えを行います。 そのために覚えておきたいのが次の項目です。 input要素のchecked属性 input要素にchecked属性を付けることで、チェック/未チェックの状態を操作することができます。

    画像を使わない擬似フォームUIの作り方 第02回 「jQueryを使った擬似フォームUIの操作」|クロノドライブ
  • 画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」|クロノドライブ

    ブラウザ標準のフォームUI(チェックボックスやセレクトボックス)のデザインは、標準ゆえに「フォーム」だと分かりやすいデザインですが、どうしてもサイトカラーに合わずに野暮ったい印象になるときがあります。そういった場合にデザインを自由に変更できるといいのですが、フォームUIへのスタイル適用は制限があり、自由に変更できません。 そういったときに、実際のフォームUIを隠し独自のフォームUIを表示し、それに対して行ったアクションを隠してあるフォームUIに反映させる手法があります(ここでは擬似フォームUIと呼びます)。 コラムでは主にスマートフォン向けにCSS3とJavaScript(jQuery)を使い、画像を使わない擬似フォームUIの作り方を4回に分けて紹介していきます。 ※PCではGoogle Chromeのみ動作確認をしています。 第01回目の今回はCSS3を使った装飾と後ほどjQueryで

    画像を使わない擬似フォームUIの作り方 第01回 「CSS3を使った装飾」|クロノドライブ
  • 1