フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法



要素自体の点滅を指定回数分繰り返しアニメーションを行う方法や、
フォーム等の要素において、枠の部分の影を滑らかに表示・非表示させるアニメーションの
実装方法をサンプルコードを交えて解説します。

JavaScript部分の実装では、ネイティブなJavaScriptに加え、jQueryを使用した
記述もあります。

サンプルはユーザ定義関数として実装されていますので、
そのままコピペで使うか、ご自身のライブラリに組み込む等してお使い下さい。

  1. 要素自体を指定回数点滅させよう
  2. テキストフォーム等の枠(輪郭部分)を点滅させよう
『フォームの枠や要素自体を滑らかに点滅!指定数繰り返し行う方法』を続きを読む »

2013年7月16日(火)のツイート履歴

  • 【jQuery】グレーアウトさせてポップアップを出す方法! http://web-terminal.blogspot.jp/2013/07/jquery_17.html
  • Androidにおいて、Viewの表示状態を指定するには『setVisibility』メソッドにより定数を指定します『View.VISIBLE:表示』『View.INVISIBLE:非表示(領域はそのままで見た目上非表示)』『View.GONE:非表示(領域も無くす)』
  • 「Apache HTTP Server 2.0.65」が公開されました。この先、Apache 2.0系で新しいバージョンのリリース予定は無く、今回のバージョンを最後に、Apache 2.0系のサポートが終了されます。
  • 『Google AdSense』に新しい広告コードとして『非同期型広告コード』が選択可能になりました。従来の『同期型広告コード』コードとは違い、非同期通信にて広告を読み込むのでページの読み込み速度に影響しません。ページの読み込みが遅くなる事による機会損失を防ぐ事が出来ます。
  • 【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法 http://web-terminal.blogspot.jp/2013/07/jquery_16.html
  • 2013年7月15日(月)のツイート履歴 http://web-terminal.blogspot.jp/2013/07/2013715.html

【jQuery】グレーアウトさせてポップアップを出す方法!



インジケータを回して何かを作業中に画面操作を防止する時や、
ポップアップを表示させる時などに使用するグレーアウト方法と、
グレーアウト上に表示するポップアップやインジケーター。
その他、作業領域等を表示させる方法をサンプルコードと共に解説します。

主に、JavaScript部分ではjQueryを使用し、HTMLCSSを操作して実現させます。
それでは早速、次章より具体的な実装方法について解説します。


  1. グレーアウト用の半透明パネルを予め用意しておこう
  2. グレーアウトを表示させよう
  3. グレーアウトを終了させよう
『【jQuery】グレーアウトさせてポップアップを出す方法!』を続きを読む »

【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法



表題の通り、タブ風のボタンを作成し、ボタンをクリックでコンテンツの内容を
表示・非表示と切り替える方法をサンプルコード付きで解説します。

今回のタブ風のボタンでは、選択状態となっているタブに色をつけ、
他のタブを未選択状態の状態とし、選択されたタブと対になっている
コンテンツを表示させます。

タブの種類は何個でも可能ですので、用途によってカスタマイズしてください。
基本的なレイアウトはCSSHTMLにて行い、コンテンツやタブの選択状態を切り替えるのに
簡単なjQueryを使用しています。

勿論、jQueryの部分はネイティブのJavaScriptを使用しても問題ありません。
ちょっとしたフェード効果をつけるのに、jQueryでは楽でしたので、
今回のデモにて使用させて頂きましたが、
基本的な処理ロジック、考え方は簡単ですので、使い慣れたクライアントプログラミングにて
実装して下さい。


  1. タブ風のボタンを作成しよう
  2. 未選択状態のタブのスタイルを定義しよう。
  3. 選択状態のタブを作成しよう。
  4. タブ選択で表示されるコンテンツを用意しよう。
  5. タブ選択イベントとコンテンツ切り替え処理を実装しよう。
『【jQuery】タブ風のボタンでコンテンツの内容を切り替える方法』を続きを読む »

2013年7月15日(月)のツイート履歴

  • Linux Mintの最新版「Linux Mint 15 "Olivia" Xfce」が公開されました。http://blog.linuxmint.com/?p=2391
    13:58
  • 【jQuery】ファイル選択フォームデザインのカスタマイズ方法 http://web-terminal.blogspot.jp/2013/07/jquery.html?utm_source=dlvr.it&utm_medium=twitter
    07:03
  • Androidに脆弱性。2013年7月以降に出荷されたAndroid搭載デバイス殆どに影響がある脆弱性が発見さされました。詳細は、「99%の Android端末に影響する脆弱性 - トレンドマイクロ製品、既に対応」http://blog.trendmicro.co.jp/archives/7526
    03:48

【jQuery】ファイル選択フォームデザインのカスタマイズ方法



基本的に、ファイルのアップロード等で使用するフォーム要素として
『input』要素の『type="file"』がありますが、
ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは
基本的にブラウザ依存で、中々デザインを当て込むのは困難です。
デフォルトで適用されるデザインは、
IEFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、
ChromeSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。
ファイル未選択字のデフォルトメッセージ(『ファイルが選択されていません』等)も
言葉が異なっていたり、そもそも表示が無い等まちまちです。
これだけブラウザによって異なれば、
そのままデフォルトで使用すると
他のデザインとのバランスが悪くなったりして、
どうしてもデザインを入れたいパターンが出てくる場合があります。

また、ブラウザ依存のデザインなので、ブラウザによってデザインが異なるため、
UI的に迷いが生じる等を危惧して、全端末同じ様な見た目にする為に
デザインを適用する場合もあります。

今回は、そんなブラウザ依存のデザインが入ってしまっている
『input』要素の『type="file"』をカスタマイズして、好きなデザインに変えてしまう方法を
サンプルコード付きで解説します。

イベント起動などでは、分かりやすいのでjQueryを使用していますが、
勿論ネイティブのJavaScriptでも同じ事が出来ますので、
適当に置き換えて読み進めて下さい。
実際、jQueryを使用しているイベント駆動の部分でも、
そこまで複雑な事はしていないので、セレクタをドキュメントから書く必要がある程度の違いです。

要望があれば、ネイティブのJavaScriptへ書き直したものを追記しますので、
コメント頂ければ幸いです。


  1. まずは普通に『input』要素の『type="file"』を設置しよう。
  2. ファイル選択を起動させよう。
  3. ファイル選択状況表示エリアを実装しよう。
  4. 忘れがちなテキストボックス選択イベント
  5. Internet Explorer 対策
『【jQuery】ファイル選択フォームデザインのカスタマイズ方法』を続きを読む »

2013年7月12日(金)のツイート履歴

人気の投稿

Category

Algorithm (2) Android (8) ASP/aspx (1) Blogger (2) C/C++ (1) Chrome (5) CSS (9) Firefox (4) Fortran (1) Google (9) GoogleMap (2) HTML (12) IE (3) Information (4) iOS (2) iPhone/iPad/iPod (2) Java (6) JavaScript (16) jQuery (9) JSP (1) LifeRecipe (5) Linux (2) Macintosh (2) MapKit (4) Marketing (7) MySQL (3) NAMAZU (2) Objective-C (7) Other (7) Perl (1) PHP (9) Python (1) RSS/Atom (2) Ruby (1) Safari (2) SEO (11) Smarty (2) SQL (2) Tex (1) Three.js (1) Twitter (1) TwitterLog (313) UIKit (5) Unix (1) VBA/VBS (1) Windows (5) WordPress (3) Writing (5) XAMPP (1) XML (1) Yahoo (2) ZendFramework2 (14)