Loading...

htmlコーディング 小棹制作所

この記事がよく読まれてます

tumblrでの企画など、お手伝いします
  • fullPage.js ページスクロールで紙芝居のように魅せるWebページが作れるjQueryプラグイン (33,475Views)
  • 初代から大幅にパワーアップして帰ってきた! Owl Carousel 2の紹介とかんたんな設置方法 (16,763Views)
  • tumblrのオリジナルテーマ作成入門 tumblrの独自タグを理解しよう (15,356Views)
  • wow.jsとanimate.cssを組み合わせると、かんたんに、かっこいい動きがあるWebページを作れます。 (15,090Views)
  • スマートフォンサイトでよく見る横からニョキッと出現するスライドメニューの実装なら「Sidr」で (14,841Views)
  • [メモ]Macのメールアプリで自動転送(もしくはリダイレクト)設定をする方法 (14,232Views)
  • 多分一番簡単!ドロワーメニューを実装するためのjQueryプラグイン「drawer」 (13,673Views)
  • 国産のtumblrポートフォリオ用テーマ “Illustfolio2″ がすごくいい! (11,349Views)
  • シンプルだから機能もデザインもかんたんにカスタマイズできるjQueryのカルーセルプラグイン “Owl Carousel” (10,703Views)
  • Twitter Bootstrapが3にアップグレードして、さらに使いやすくなった (10,280Views)
  • 企業ホームページっぽいレイアウトのTumblrのテーマを作ったので無料配布します (10,179Views)
  • ミュージシャン・バンド・アーティスト用Webサイト作成のためのTumblrテーマを作ったので配布します (10,135Views)
  • tumblrのオリジナルテーマをゼロから作るのは心が折れるので、スターターテーマを使おう (9,157Views)
  • さくっとヘッダー固定のhtmlテーブルが作れるjQueryプラグイン「Fixed Header Table」 (9,004Views)
  • Twitter Bootstrapの基礎 Twitter Bootstrapってなに? からモーダルウィンドウ作成まで (8,884Views)
  • 翻訳機能をWebサイトに埋め込む方法 (8,463Views)
  • 細かいカスタマイズができるCSSフレームワーク、”Gumby FRAMEWORK” (6,805Views)
  • Twitter BootstrapベースのWordPress無料テーマ “Roots” (6,582Views)
  • tumblrのテーマに無限スクロール機能を追加する方法 (4,987Views)
  • 【番外編】フィッシングサイトからの偽メールが来た ~+120563143からのメールはフィッシングサイトへの誘導です~ (4,808Views)
  • Webサイトのフォームにツールチップ状のヒントを表示させるjQueryプラグイン「Progression」

    2015年10月15日(木)

    この記事は執筆から1年以上経過しており、情報が古い可能性があります。

    Progressionとは

    Progressionは、Webサイトのフォーム入力欄に、ツールチップ上のヒントを表示させることができるjQueryプラグインです。


    関連ページ

    公式サイト(デモあり):Progression.js
    githubページ:aarondo/progression.js · GitHub
    jQuery公式サイト:jQuery

    設定方法

    必要ファイルダウンロード

    必要ファイルはprogression.css、progression.js、そしてjquery本体の3つ。

    このうちprogression.cssとprogression.jsは、上記githubページ、Download ZIPボタンからダウンロードします。解凍したzipファイルのsrcフォルダに格納されています。

    jquery本体については、上記関連ページ項目内、jQuery公式サイトよりダウンロードができます。

    必要ファイルのhtmlファイルへの読み込み

    上記3ファイルが入手できたら、それらを読み込ませるための記述を、htmlファイルにしていきます。

    コードサンプルは以下。

    <link href='progression.css' rel='stylesheet' type='text/css'>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="progression.js"></script>
    

    ファイルのパスやjQuery本体のバージョンはご自身の作業環境(フォルダー階層など)に合わせて適宜変更してください。

    フォーム作成

    ファイルの読み込み記述をしたら、htmlファイルにフォームを作成します。

    まずはコードサンプル。

    <form id="myform">
    <p>
    <label for="">Name</label>
    <input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />
    </p>
    </form>

    このプラグインを実装するために必要な記述は以下となります。

    まず、formタグにidをつけること。この例ならformタグにmyformというidを付加しています。

    つづいて、フォーム内の各要素に”deta-progression”という記述をします。これはツールチップにフォーム入力の進捗状況を棒グラフで表示させるためのものです。

    さらに、ツールチップに表示させる文言をフォーム内各要素に、”data-helper=”ここにヒント文言を書く””と記述をします。

    プラグインのイニシャライズ(初期化)

    最後に、下記の記述を、上記した必要ファイルの読み込みより後に記述します。

    $(document).ready(function ($) {
    $("#myform").progression();
    });

    #myformという箇所を、上記「フォーム作成」で記述したformのidと合わせるようにしてください。

    基本的な実装方法はこれにて完了です。

    オプション設定

    上記、イニシャライズ記述にオプションを記述することで、さまざまな設定をすることができます。

    記述方法は下記を参考に。

    $("#myform").progression({
    tooltipWidth: '200',
    tooltipPosition: 'right',
    tooltipOffset: '50',
    showProgressBar: true,
    showHelper: true,
    tooltipFontSize: '14',
    tooltipFontColor: 'fff',
    progressBarBackground: 'fff',
    progressBarColor: '6EA5E1',
    tooltipBackgroundColor: 'a2cbfa',
    tooltipPadding: '10',
    tooltipAnimate: true
    });

    オプションの種類については、上記「関連ページ」項目、githubページ内、「Options」項目にて確認できます。

    まとめ

    この記事のまとめはありません。

    おわりに

    この記事はあなたのお役にたてましたか?
    もしよろしければ・・・

    この記事をみんなに教える?


    筆者に何か教える?

    たとえば、 小棹制作所はこんなこと↓を知りたがっているようです。

    feedlyでブログを購読する?

    follow us in feedly

    筆者にメーッセージを送る?

    なんでもご自由に書いて送ってください。
    ご質問等返信を希望の場合は、メールアドレス等返信先の記載をお忘れなく。

    チェックを入れて送信してください

    Copyright (C) 2012 小棹制作所.
    All rights reserved.