jQuery ある要素のテキストをタイプライターのようにしてみる

まずは、説明よりも見てもらう方が早いので例のごとく埋め込んでみます。

もしページの読み込み中に上記のスクリプトの処理が完了してしまっていたら、resultをクリックすることで再度見ることができます。同様にして、JavaScript、Html、Cssをクリックするとどのような内容になっているのかを見ることができます。

元のスクリプトはおそらく、ghostType jQuery Pluginこちら。
※ 2015/04/24追記 オリジナルのページが今日現在DNSエラーで表示できません。

仕組みとしては、文字列中の文字をspanで囲んで、hideで消してからfadeInして表示することでタイプライターのような表示にすると言う感じです。

文字列の中に「^」を入れるとその部分は表示処理無くただの遅延となります。これによって例えば人がしゃべっているような感じにもすることができます。

実際使用するには、

とするだけなんですが、例えば文字列の中に改行文字があった時にもそのまま通常の文字として処理をしてしまうようなので(「div#test2の中身」の部分)、もし改行を含む文字列の場合は予め処理をしておく必要があります。方法はいろいろ考えられますが、今回はdiv#test1をコピーしてdiv#test3に表示すると言うようなことをしてみました。

div#test1をdiv#test3にコピーするに際して、元の文字列を改行文字の所で分割して配列にした後、

と言うようにtestと言う名前のclassを付けてブロックで囲むようにしました。ここらは色々加工できる部分です。

さて、jQueryでの $.fn.何かしらの名前 = function() と言うのは、例えばPHPやらでいうところのclassみたいなもので、

PHPやらではこんなふうに書きます。一方Javascriptでは、

こんな感じとなり、つまりは、

こんな感じになります。いわゆるjQueryのプラグインと言うのはPHPやらでいうオブジェクト指向、つまりはclassを作ってそれを利用すると言うことなんですが、jQueryやJavascriptの場合は、どちらかというと関数とイメージするとわかりやすいかも知れません。

通常は、今回のjavascript部分を1つのファイルに(圧縮させたりして)保存して、htmlのヘッダやフッダあるいは、body直後で呼び出したりします。が、別にそんなことしなくても、そもそもが関数なんですからどこに書いても良いわけです。とりあえず早く読み込みたいのであればヘッダがいいのでしょうが、まぁ処理する前に書いてあればいいんじゃないでしょうか。

さて、使い方は色々とあると思うのですが、今回のghostType();はallabout48G(仮)のajaxで各カラムを読み込んだり、あるいはajaxの動作をする時に、画面の右上で状況をお知らせする部分に利用しています。元々Youtubeのローディング・プログレスバーみたいな表示がするようにしてあるのですが、気が付きにくいので入れてみた次第です。

その際の設定的には、

こんな感じで利用しています。

ajaxStopはajaxの未処理の処理があるかどうかをチェックして、無い場合は発火します。もしajaxStopを入れずにajaxCompleteだけであると、ajaxの処理が終わるたびにajaxCompleteが呼び出されるので、ワンクッション入れるのに入れてます。おそらくもっとスマートなやり方があるのではないかと思うのですが、ひとまずの所これでだましだまし使っている次第です。

ちなみに、例のdiv#test3の部分でtest1の部分をクローンしてうんぬんとありますが、普通に参照しているだけです。というのも文字をクローンして、元の文字を消してからうんぬんとかと考えていたのですが、別にしなくてもイケると気づいたのでそのままになってます。

スポンサーリンク

シェアする

フォローする