そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
そのまま使ってもよし、アイデアに刺激されインスパイアされてもよし、の工夫をこらした素晴らしいアイデアのスクリプトを紹介します。
割と頻繁に使うので備忘録。 jQueryを使用して「チェックボックスにチェックされたら送信可能にするボタン」と「文字が入力されたら送信可能にするボタン」をそれぞれ実装する方法です。 特にチェックボックスの方は利用規約などに同意してもらったかの部分で用いたりと使う場面が多いのではないかと思います。 チェックボックスにチェックされたら送信可能にするボタン ページが表示された際はイメージ左のようにボタンにはdisabledが指定されて送信できない状態になっています。 それを「利用規約に同意します」というテキスト横にあるチェックボックスにチェックが入ったら、ボタンに指定してあるdisabledを解除して送信可能にするというものです。 実装にはjQueryを使用するので予め読み込ませおき、それぞれ下記のように記述をします。 <input type="checkbox" id="check" /><l
EasyDropDown - A Drop-down Builder for Styleable Inputs and Menus フラットでカッコいいselectボックスを作成できるjQueryプラグイン「EasyDropDown」 次のようなフラットなselectボックスが実装できます。スタイルが色々選べるようです 関連エントリ Bootstrapのselectをカッコよくできる「Bootstrap-select」 selectボックスをカッコよくスタイリングできるjQueryプラグイン「Selectric」 BootstrapのselectボックスをよりリッチにするjQueryプラグイン「bselect」 オシャレなSelectボックスが実装できる「FancySelect」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 selec
そこそこユーザビリティの高いフォームを作った 入力内容の検証とか、郵便番号変換を備えた、そこそこ使いやすいフォームのテンプレートを作りました time2014/01/18 hatenabookmark- 去年末実家に帰省していた時に、jQueryの練習&業務で使うために、フォームバリデーションとか郵便番号変換とかを備えた、そこそこユーザビリティの高い入力フォームをコーディングしていたので、ここで公開しておきます。 フォームサンプル ソースお持ち帰り用 (Github) ここで"そこそこ"と言っているのは、もともと業務でユーザビリティ改善案として使うことが目的であって、ベストを目指してもサーバ制約やコスト的な観点で使えないことがあるから、そこは目指さないよという意味です。そもそも、フォームは必要悪ですし、ベストはフォームが存在しないことですね。 フロントエンド実装だけです(サーバ側スクリプト
ページをスクロールすると、左側に固定したナビゲーションメニューがアニメーションで隠れ、コンパクトに収納されるJavaScript(以下、js)「hidenavi.js」を作りました。 jsの動作にはjQueryが必要です。 せっかく作ったので、ブログで公開しようと思います:) 1.動作の説明とデモ2.ダウンロード3.使い方4.ご利用にあたって 1.動作の説明とデモ hidenavi.jsは、ページをスクロールすることで、ページの左側に固定したナビゲーションメニューが、にゅーっとアニメーションし、隠れます。 隠れたナビゲーションメニューの代わりに、ナビゲーションメニューの位置を示す要素が表示されます。 その要素にマウスを乗せると、隠れたナビゲーションメニューが再びアニメーションで表示されます。また、スクロール位置を一番上まで戻しても、ナビゲーションは再表示されます。 デモページを作りましたの
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
Justified Gallery 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」。 PinterestというよりはFlickrの最近変わった新しいギャラリーっぽいギャラリーが簡単に実装できます 次のようにタイル上に敷き詰められ、カーソルを合わせるとキャプションがでるというものです。 高さやマージンの調整等、色々と細かなカスタマイズもできるみたい。 関連エントリ レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 PCでもスマホでもスワイプできるギャラリー実装プラグイン「jQuery.swapgallerywithdots」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 Google画像検索っぽい画像ギャラリーが作れるjQuer
WebデザイナーのためのjQuery入門 — Presentation Transcript Webデザイナーのための jQuery入門 - 始動編 -jQueryのコードを自分で考えて書けるようになろう! 今回の目標 jQueryが何なのかを知る 最終的な目標 日々の業務にjQueryを取り入れて、 自分で何かを作れるようになる。 今回の大まかな内容0. jQueryって何?1. なぜjQueryが使われるのか2. jQueryを始めよう 0 jQueryって何? 0-1jQuery?JavaScriptのライブラリの一つ。非常に多くのサイトで使われている。JavaScriptで書くと非常に長くなるコードがjQueryなら短いコードで簡単に書ける。海外のとある統計では、トラフィックの多いサイトのうちの約4割で使われていることがわかっている。しかも年々増え続けている! ※2,011年
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く