jQuery – ページ 2 – Acenumber Technical Issues

jQueryに依る自ブログのフィードメニュー表示

idea*ideaは2008年10月20日の記事 HTMLを解析して登録できるフィードのメニューを作ってくれる『jQuery Feed Menu』に紹介されるjQueryのプラグインを実装すれば、実装したWebサイトのHTMLを解析し自動的にフィードを抽出しプルダウンメニューとして表示されるとのことで、開発、提供元のRogie氏に依るブログ komodomedia の2008年10月3日の記事 jQuery Feed Menus より必要スクリプト等をダウンロードし、実際に使用して見たものが下です。

IE6ブロッカー

Google Chromeの登場で悲喜交々の態を為すネット界隈ですが、短期的にはFirefoxのシェアを奪うのではないかと予測される如くに先取的な方々は欣喜雀躍し、扠、悲壮感漂う迄に倦厭の感情を露わにするはWeb製作業者の、又もや対応すべきブラウザの増える予感にある様で、斯くもクロスブラウザ問題はWeb製作者の空しい許りの労力を要求する訳にて、折も折、 phpspot開発日誌 の2008年9月3日のエントリ IE6でのページ表示をブロックする「IE 6 Blocker」中に紹介される CSS-TRICKS の IE 6 Blocker Script を利用すれば、最早レガシーの範疇に入るかも知れぬとは云い過ぎでしょうが、 インターネットエクスプローラー・バージョン6 の呪縛からは最低限逃れられると云うjQueryのプラグインにて、基本的にはjQuery本体に合わせ、本プラグインを読み込むだけで実装がなります。

角丸2／jquery.corner.js

角丸を実現したい許りに其の再初期には、 table タグを用い最早化石となった所謂テーブルデザインで作成したり、将又、画像のみによりてしか実現のならずと曰ふてみたり、次いで数年前よりはCSSの時代とて、 div タグを4つも使用したり、2つに減らして工夫したと放言したり、愈々Ajaxも華やかなりしjavascriptの復権を果たせば、様々なライブラリの登場に欣喜雀躍し、利用した内にも、最も有用だと思われたのが当ブログは2008年3月13日のアーティクル角丸にご紹介の curvycorner でしたが、此処に至り、遂に登場となったのが、 JQuery Corner なるjQueryにて角丸を実現するプラグイン jquery.corner.js の、先ずは百聞は一見に如かずのデモページは驚きの、御本尊は此方Dave Methvin氏による JQuery Corner Gallery にて英文ですが詳細が記されています。
此れを受けてMike Alsup氏が更なるデモを展開するのが、もっとデモページにて、此方では角丸に必須の枠線機能がバラエティー豊かに展開されています。
当情報の紹介されていたIDEA*IDEAの2008年8月28日の記事 jQueryでさまざまな角丸っぽい効果を実現するプラグイン『jQuery Corner』に於いても記法がシンプルであることに触れ

これは超絶便利そう

と表現のされるは全く以て其の通りと肯かされるは以下に実際に使用して見た上からの感想です。

新感覚イメージギャラリー／Spacegallery

田口氏による海外のユニークなドットコムサイトを日替わりで紹介するブログ idea*ideaの2008年6月25日の記事画像が手前にせり出してくるような効果が得られるjQueryのプラグイン『Space Gellery』に紹介されていたのが EYECON に於ける Spacegallery - jQuery plugin にて、イメージを陳列なるはギャラリー的にしても、従来にはなかなか見ることの出来なかった類に思えば其の感覚は浮遊感漂い、 idea*ideaでは SpaceGallery なる名称を讚した上での 逆スターウォーズ なる説明は云い得て妙に感じます。

リストをリンクに変身させるjQuery

JAVAのヘビーユーザーでフレームワークSeasarの先導者でもあるアルファブロガー比嘉氏の手になるものは、少し唐突な感じで意外な感じを受けさえし驚かされもした、氏のブログひがやすを blog でjQueryを使用したTipsの、 jQueryに依れば当該事も可能成る可くを知り、興味深くもあり、少しくチュートリアル的感もありjavascriptの勉強にもなる可く当ブログにてご紹介させていただきます。

上記ブログの2008年7月13日の記事 jQueryでリストをリンクに変える方法が其れに当たり、引用させていただいた上で、赤字部分を当ブログで追加しています。

jQuery UI タブ切り替え機能改訂版

当ブログの2008年5月6日のアーティクル jQuery UI を利用したタブ切り替え機能のコメント欄にてkuroki氏よりご教示いただいたのは、 ui.tabs.jsを使用する際の注意点としてクロスブラウザ用のライブラリui.core.jsを読み込まないと上記アーティクルに於いてFirefoxにて不具合の発生する旨、当該ライブラリを読み込んでいないアーティクル内の高橋登史朗による参照記事 jQuery UI タブでもFirefoxで閲覧するとタブ間にlist-styleと思われる『・』が表示されてしまっています。
早速 jQuery User Interface より最新版の jQuery UI 1.5.2 をDLして適用してみましたが、『・』が表示される類のものではなく、 Firefox3を利用し閲覧をされているkuroki氏のご指摘でもあると考えます、上記アーティクルに於いてはタブの背景画像が表示されないと云う問題は当方環境のFirefox2でも解決に至りませんでした。
此の問題に関してFirefoxの仕様であるのか、 ui.core.jsが未対応であるのか、情けなく悲しい乍、確かめるスキルを有しておりませんので、折角入手した jQuery UI 1.5.2 を使用して対処療法を講じてみました。

七色に輝くブログタイトル

2008年3月9日の映画風タイトル・クローズアップを皮切りに昨日2008年7月10日迄の4ヶ月間は一季節と一月、当ブログを賑々しく飾って来てくれたのは一連の記事ブログタイトルズームアップでの当ブログのタイトルをjQueryで表示と同時に拡大する機能ですが、最早季節も春浅き肌寒ささえ感じた当時より、遠州浜松では梅雨も明けんとす、人によってはエアコン点火なしには過ごせぬ時期なれば、新機能に衣替えすることにしました。

手元のjQuery本2冊を見れば矢張り魅力的なのはアニメーションなのですが、どうもフォント色を変更するアニメーションはjQuery本体には実装されておらず、プラグインで実現する模様にて、早速具々って見れば、 jquery.color.js なるプラグインが相当し、其のサンプルコードが Release:jQuery 1.2/Effects ページ内の Color Animations項目に掲載されており、其れを利用して、当ブログのタイトルをページ表示と共に七色に変化するようにしました。
このアーティクルが存在する間はブログタイトルがトップ頁表示と同時に七色に変化し始める筈です。

実装していた拡大される筈のタイトル表示に変化がなくなるエントリー順は二十度に一度を6度繰り返した jQueryを利用する拡大機能を含む記事が次頁繰り送りの時期となっての衣替え、トップページよりは終に消えてしまう当該機能も、「次のページ」へをクリックして頁遷移すれば以前の記事ブログタイトルズームアップ4 がありますからタイトル拡大機能は其のページでは失われることも無く、更に以降其の先の、[次のページ]へをクリックしても一連のブログタイトルズームアップアーティクルの存在すれば即ちタイトル拡大機能に対する懐旧の思いに駆られれば、トップページよりのアクセスの際は順に「次のページ」へを押下、進んでご覧いただくことが出来ます。

実践！Ajaxフレームワーク jQuery

実践!Ajaxフレームワーク
jQuery

当ブログ2008年7月1日のアーティクル prototype 本と jQuery 本にて本邦初成るjQuery本ではと購入を言及せる jQueryで作る Ajaxアプリケーションの奥付に記されたる初版第1刷が日付の平成20年7月25日なれば、昨日は週末書肆徘徊の賜物、本邦国旗を思わせる紅白の対比も鮮やかさに目も眩み、 jQuery 待望の一冊を操られる如くレジに運びたるは又こそ何時ぞやの既視感なれ、手に重き分財布を軽めたる実践!Ajaxフレームワーク jQuery が奥付の同日付は平成20年6月30日なれば、一週間程後者が早く本邦にて先陣を切りたりし、先のアーティクルにての積読儘にせぬ様にとの願いも、経緯を推測するにどうにも曖昧などうなりますやらの連呼にて、今七夕にては己にしてはまずまずとの手前味噌、全15章が内、1／3が5章を如何にかこうにか閲するのみが状況乍、又もや手にしたjQuery書籍の、取りも直さず、先ずはjQueryの何たるかを知らねばならぬと、全9章からなる内の嚆矢が第1章こそ jQueryによるエレメントへのアクセス とな、基本の基本を取敢えず実践せんとせしが為の当アーティクルがエントリーにて候。

当アーティクルに直接アクセスが方には、背景が総て橙に染まった上に、何やら紹介本区画の怪しく動き、斯くも読み難きは何卒ご勘弁あれ、トップ及びアーカイブからアクセスの方はタイトル若しくは[続きを読む]からお進みあってご覧あれ。

当カラクリの正体こそ何あろう、後者書籍伝授のjQueryが機能の本の僅かを用いたのみ、先ずはjQueryを読み込んで後のjavascriptの記述が以下に御座候。

jQuery(document).ready(function($) {
  $("*").css("backgroundColor", "orange");
  $(function anime(){
    $("div#animate_block_08707").slideToggle(8000, anime);
  });
});

これこそ此のライブラリの特色とは云え、導入部の入門編も初歩的段階の、更には僅か此れだけのスクリプトにて斯くも大きな効果を生み出すjQueryには、全く恐れ入谷の鬼子母神。

テーブル表示ツールjQueryプラグインFlexigrid

IDEA*IDEAの2008年3月24日のエントリー jQueryでテーブルをかなり便利にフォーマットしてくれる『Flexigrid』で

jQueryを使って実に簡単にテーブルをいろいろ便利にしてくれるライブラリ

と紹介されていたのが Paulo P.Marinas 氏に依る Flexigrid にて2008年6月現在BETA版として公開されておられますのを、当ブログにも使用してみたところ、業務にも実に有用に使用可能に成り得るユーティリティ javascript ではないかと感じました。

本ツールはjQueryのプラグインとして作成されており、様々なオプションが使用可能ですので、必要性を鑑みて実装することが出来、当アーティクルでは

テーブル表示・非表示切替機能
列表示選択機能
列幅可変機能

を利用していますが、列をソートする機能は上手く動作させられませんでした。
列幅可変機能につきましては、列幅どころかテーブルの幅自体可変ですのでエッジを摘まんでドラッグして広げてみて下さい。

AjaxらしくJSON形式データを用いて動的データとの通信も可能ですので、利用価値は実に高いと思われ、当該機能の実際のサンプルは上記 Flexigrid 頁内のExample 3 にてご覧いただけ、また当アーティクルにおけるサンプルは、アーティクルに直接アクセスされている方以外は、タイトル若しくは[続きを読む]をクリックしてご覧いただきたいと思います。

データは総務省・統計局の
人口推計 > 月報 > 平成17年国勢調査結果確定人口に基づく改定数値(平成17年10月～18年7月)
全国推計人口－男女，年齢階級別に公開されているものを利用させていただきました。

パズルの一枚の画像に依るブログ上自動生成

屡参照させていただくホームページを作る人のネタ帳の運営者Yamada氏が他にも運営されている海外発情報発信の為のブログ ITquality の2008年4月10日の記事 37の衝撃的jQueryプラグインでの紹介は noupe.com の2008年4月9日の記事 37 More Shocking jQuery Plugins で、当記事中にて紹介されている37のjQueryプラグインの内の一つがBen Nadel氏によるサイト Kinky Solutions 中の記事 jQuery Demo: Creating A Sliding Image Puzzle Plug-In にて公開されている、ページ上に配置した画像にスクリプトを適用すると画像が指定のサイズで分割され、その内の一ピースが欠けた部分に隣り合うピースが移動可能となることにより構成される、街でよく見かけるパズルの体裁を取らせることが出来るプラグインです。

当ブログ上でも実装してみた処、巧く動作しましたので、オリジナルの画像で本アーティクル上に掲載しました。
パズルの正解画面でもあるサンプル画像のパズル化する前のオリジナル元画像を下に示します。

高飛び込み此処はうさ犬の里、裏山の不思議の森の池

[続きを読む]をクリックすると、上記元画像が縦に3分割、横に4分割されたスライドパズルになって表示されます。空白の存在する列の任意のピースをクリックすると、該当するピースがスライドして移動します。残念乍、正解画像を得られても特に変化の無い点は如何かご寛恕いただきたいと思います。