jqueryに関するchi7777のブックマーク (6)

  • 一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました - Cyokodog :: Diary

    かゆいとこだらけの Ex Flex Fixed (サイドメニューなどを一定の範囲でのみ position:fixed させる jQuery Ex Flex Fixed)を作り直しました。 改善内容 fixed 要素の幅を自動調整するようにした リキッドレイアウト(可変幅)でちゃんと表示するようにした fixed 要素がコンテナからはみ出ないようにした fixed 要素がウィンドウ高さに収まらない状態でのスクロール時の表示を見やすくした 動的にレイアウトサイズが変更されても、ちゃんと表示されるようにした カラム高さを揃えるプラグインと併用できるようにした という訳で半年も放置しておいてあれですが、ちょくちょく問い合わせもあるので、ご利用の際には新バージョンでどうぞ。 動作確認 以下のレイアウトのデモページで、新旧それぞれのバージョンの動作を確認してみます。 <div class="heade

    一定範囲で position:fixed させる Ex Flex Fixed がかゆいとこだらけだったので作り直しました - Cyokodog :: Diary
    chi7777
    chi7777 2013/11/24
    ついてくるナビゲーション
  • フォームの入力内容をチェックするjQueryバリデーションプラグイン「JQuery Form Validation And Hints」

    twitter facebook hatena google pocket フォームに入力された内容を送信前にチェックするバリデーションの紹介です。 これにより、ユーザーの入力間違いを簡易的に防ぐことが可能です。 JQuery Form Validation And Hints sponsors 使用方法 JQuery Form Validation And Hintsからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script type="text/javascript" src="jquery.form-validation-and-hints.js"></script> 次に通常通りフォーム部分を記述したら、内容に応じてクラスを付与すれば完成です。 <for

    フォームの入力内容をチェックするjQueryバリデーションプラグイン「JQuery Form Validation And Hints」
    chi7777
    chi7777 2013/11/22
    フォームのバリデーション
  • jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote

    社内システムだったら必ずフォームのPost送信は多用するし、Webサイトであっても入力画面が存在するところには必ずフォームは必要となる。そんなとき、簡単にオシャレで機能的なフォームが設置できたら重宝するだろう。bootstrapなどのcssフレームワークを使っても、当たり前だが楽をできるのはデザイン面だけである。 そんなことを思っていた矢先、formlyというjQueryプラグインに出会ったので使用方法のメモを残す。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL) 作者: 西畑一馬出版社/メーカー: アスキー・メディアワークス発売日: 2013/03/07メディア: 大型 クリック: 4回この商品を含むブログ (6件) を見る 1. ダウンロード 以下からダウンロード http://thrivingkings.com/read/Forml

    jQueryでオシャレかつ機能的なフォーム画面を実装 formly.js - TechNote
    chi7777
    chi7777 2013/11/21
    バリデーション付きフォームの実装
  • jQueryでフィルタ(フィルタリング)機能をシンプルに実装する方法|BLACKFLAG

    写真の一覧ページなど、Webページ上でたくさん並べられたコンテンツ要素に対して カテゴリ分けした括りなどで、絞り込んだ状態で表示するフィルタ機能。 ページ上に表示する要素が数多くある場合に有効な機能になったりしますが そんなフィルタ機能をjQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 まずは動作のサンプルから。 下記画面の上部にあるカテゴリリンクをクリックすると そのカテゴリの種類で絞り込まれた状態で画像が表示されます。 フィルタ用のリンクをクリックすることで サイズの縮小とフェードのアニメーションが付いた形で 画像がフィルタリングされます。 このフィルター機能の全体構成について、 まずはHTMLから。 ◆HTML <div id="filter"> <a href="javascript:void(0);" class="allitem">ALL</a>

    jQueryでフィルタ(フィルタリング)機能をシンプルに実装する方法|BLACKFLAG
    chi7777
    chi7777 2013/11/20
    フィルタリング
  • Webサイトのフォトギャラリーを美しくするjQueryプラグインおすすめ20選 | IDEAHACK

    多機能・高機能なjavascriptライブラリ『jQuery』。 世界中で利用され、リッチなサイトを制作する上では欠かすことの出来ないライブラリのひとつといっても過言ではないでしょう。 現在ではjQueryを使った様々なプラグインが公開されており、例えばちょっとしたギャラリーを作るだけでも探し始めたらキリがないほど。 ということで、フォトギャラリー制作にオススメな20個のjQueryプラグインをご紹介。 メモ程度にどうぞ。 Swipebox

    Webサイトのフォトギャラリーを美しくするjQueryプラグインおすすめ20選 | IDEAHACK
  • jQueryでロールオーバーのスクリプトを組んでみた - Wataame Frog

    ちょっと仕事の状況が落ち着いたので、以前より興味のあったjQueryを真面目にやってみようということで、色々と試しておりました。 で、まずは「何か使えるものを作ってみよう」ということで、マウスオーバーしたら画像が入れ替わるスクリプトを組んでみました。 最終的に作りたかったのは、マウスオーバーで画像を切り替える際にパラパラさせるのではなく、フェードイン、フェードアウトをしながらふんわり変化するスクリプト。通称、ふんわりロールオーバー。 そこに行きつくために経た段階通りに記事を書いてみましたので、「jQueryなんてよくわからないよ!」なんて方もひと通り読んでみれば少しは理解できるかもです。 toogie自身も javascript は苦手でしたが、徐々にですが理解できてきています。眺めるだけでなく書くことは大切ですね、やはり。 あとは慣れ。 習うより慣れろとはよく言ったものですね・・・。 <

  • 1