頭脳外部メモリー　SINCE 2008/3

Just another WordPress site

Home » Archive by category 'Wordpress » jQuery'

スポンサードリンク
　

サーチ

注意書き

当ブログの内容は管理人の覚え書がメインです。書き間違い勘違いもあるでしょう。なので、一切の責任を持ちません。各自の責任で行ってください。答えられることは、お答えします。
ペコリ(o_ _)ｏ))

スポンサードリンク

カテゴリ

open all | close all

アーカイブ

open all | close all

ページ

open all | close all

メタ

スポンサードリンク

2009

7/21

「jquery.tablesorter.js」設置説明

Created: 2009年7月21日（火）　 am 6時51分
modified: 2009年8月21日（金）　 am 11時46分
Posted by jun Published in jQuery

▼

久しぶりにスクリプト設置の説明です。　今回は、テーブル（<table>）の並べ替え（’ソート　昇順　降順）ができるスクリプトです。

どうしてもテーブルの並べ替えがしたくて最初は、データベースを作成してやってみようかともったのですが・・・面倒なので断念。　次に javascript で、できるのでは？？　と、探してみると、色々ありました。　とりあえず最初に見つけた tablesort.js を試してみたのですが・・・　こちらのスクリプトは、テーブル内のタグが無視されるという弱点が・・・　さらに私の環境では競合のせい（スクリプト入れすぎ！）でうまく動きませんでした・・・　(T^T)

仕方がないので、どうせ競合があるのなら解決している jQuery を使用した jquery.tablesorter.js 使うことにしました。
そのほかにも、Prototype を使用した Sortable Table や、mootools を使用した sortableTable や、超軽量なのに行の交互の色分けや表示件数を選択できる TinyTable JavaScript Table Sorter などなど色々ありました。

色々試してみたいところではありましたが、jquery.tablesorter.js は、気に入ったので設置しました。
(⌒^⌒)ｂ　うん

2008

5/9

画像表示系のスクリプトの各種サンプル

Created: 2008年5月9日（金）　 am 12時35分
Posted by jun Published in java script, jQuery

▼

画像表示系のスクリプトが非常に増えてきたので、画像系スクリプトのサンプルをまとめた、こんなページを作って見ました。　（＾∀＾）

どれを設置しようか迷っている人の参考になればと・・・・　ペコリ(o_ _)ｏ))

no comment

▲

Previous Top

2008

4/19

「jQuery Lightbox Plugin」 (balupton edition) 設置説明

Created: 2008年4月19日（土）　 pm 11時55分
modified: 2008年5月9日（金）　 pm 5時40分
Posted by jun Published in jQuery

▼

しばらく前に、こちらページで「 jQuery Lightbox Plugin 」を設置しましたが・・・なんと、もう1種類 (balupton edition)　なるものが存在すると知り早速試してみることに・・・・

2008

4/13

prototype.js と jQuery の競合（コンフリクト）解決！　＆　共存方法

Created: 2008年4月13日（日）　 pm 11時00分
modified: 2020年1月28日（火）　 pm 5時17分
Posted by jun Published in java script, jQuery, 解決済＆解決法

▼

やったよ！！　ついに見つけたよ～～！！　何個かのページに書きましたが、前々から、「prototype.js」系のスクリプトを入れると「jQuery」シリーズが動作不能に陥る解決方法が判りましたよ！！　(*ﾟ oﾟ*) オオー！

2008

3/29

「jQuery Sliding Panels」　設置説明

Created: 2008年3月29日（土）　 pm 9時42分
modified: 2020年1月29日（水）　 pm 12時03分
Posted by jun Published in jQuery

▼

無駄な長い前置きを見る

またまた、とあるサイトでステキなプラグインを見かけてしまった（moreタグの「続きを読む」の下に下がる時の動きが・・・うにょ～～んって感じで下がるやつ）・・・またまた、それが何なのか探しまくって何とか発見！！・・・実は、自分もすでに使っていたプラグイン（Content with show/hide javascript for "more"）のカスタマイズ品でした・・・σ(^◇^;)ヒヤアセ　
早速、自分もまねてやってみると・・・！！ｏ（＾＾ｏ）（ｏ＾＾）ｏ　おおおぉ！！
すてきだぁ～

続きを読む ≫

最近そんなことばかりで気が付けばプラグインがいっぱい・・・そのうち、何が入っているか書いてみよう・・・・

・・・その後事件はおきました、(T^T)　ふと画像を表示させて見ると・・・・（￣□￣；）！！　lightbox　が（「jQuery」シリーズ全て）！！・・・動作不能になってるではありませんか～～！！！　｡･ﾟﾟ･(×_×)･ﾟﾟ･｡

また相性みたいな問題発生ですか・・・・喧嘩はいけません・・・・その後なんとかならんか？？と非常にがんばって見るも、無駄に時間を費やしただけでした・・・・(TOT)
結局、重要な方の「jQuery」シリーズを残すことに・・・lightbox　のみなら　highside　もステキだなぁ～と思っていたので良かったのですが・・・・thickbox & corner は絶対外せないので折角の「うにょ～～ん」はまた取り外す羽目に・・・・

・・・その後しばらく考える・・・

諦めきれん！！！　(」゜ロ゜)」(」゜ロ゜)」(」゜ロ゜)」オオオオオッッッ
代替品になるものは無いかと探してみた・・・見つけたのは　Ajax Spoiler　・・・しかしこれも「jQuery」シリーズが使えなくなる・・・対策があったが、やってもダメでした・・・・（Ｔ＿Ｔ）
はぁ～・・・

・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・(T^T)

さらに諦めずに探すと、使用目的はなんか違うが何とかなリそうなものを発見！！　しかもこれなら多分大丈夫そうだ！！・・・なぜならば～「jQuery」シリーズだからさぁ～！！

早速設置してみる・・・・あら？　あっさり何も問題なく設置完了　σ(^◇^;)ヒヤアセ
後はこれを more　に使えるようにカスタマイズすればいいのであった・・・・

・・・・ながぁ～～～い、前置きでしたが

設置方法

こちらのページから「jQPanels」をダウンロード
・・・もちろん、jquery.js　も入手してください。
そして、すべてのファイルを適当なフォルダ（ここでは、jquery-panels）に入れFTPで任意の場所（ここではwp-admin等と同じ最上層にします）にアップロード。
※ちなみに　jQuery シリーズを設置済みの場合は、「jquery.js」は使い回しができるのでいりません。

使用例

上記の緑の文字を「'.test'」とした時の例

<p class="test">サンプル　１</p>
<div>隠れる文字列</div>

と、本文に記載すると

サンプル　１

隠れる文字列

と、表示されます。
ちなみに、「pタグ」じゃ無くてもOKです。

その他オプションとして下記みたいな事も出来ます。

サンプル　２

<script type="text/javascript">
$(document).ready(function(){
$('.class名').slidePanel({status:'open'});
});
</script>

最初が開いた状態

サンプル　３－a

<script type="text/javascript">
$(document).ready(function(){
$('.class名').slidePanel({role:'accordion'});
});
</script>

ここは最初開いてる
（３－A＆B＆Cそれぞれ要素に同じclass名を付ける。）

サンプル　３－b

ここは最初閉じてる
３－Bをクリックすると
他は閉じて
ここだけが開く

サンプル　３－c

ここも最初閉じてる
３－Cをクリックすると
他は閉じて
ここだけが開く

サンプル　４

・・・本当はデフォルトではBGカラーが表示されるのですが、私の事情により消されています・・・見にくくてごめんなさい。　ペコリ(o_ _)ｏ))

無駄な後置き？を見る

・・・そして自分はこれを設置後、四苦八苦しながら改良を重ね？このページの一番最初の「続きを読む　＆　続きを隠す」を作成しましたとさ・・・・σ(^◇^;)ヒヤアセ　・・・・「続きを読む」で開いた時に、一番下にも「続きを隠すを」出来るようにしたく、がんばったのですが自分の知識では無理でした・・・・(T^T)

誰か教えて～～～～～

追記・・・その後「prototype.js と jQuery の競合」が、こちらで解決したため使用しなくなってしまいました。　　・・・しかし使わないのは勿体無いので、標準テーマ（コルベット）のサイドバーに使用してみました。　（＾∀＾）　　・・・このページのサイドバーは違います。　（＾∀＾2）、　ちなみに、ここのサイドバーは、「Dockingbox」です。

2008

3/19

「jQuery　Drop Shadow」　設置説明

Created: 2008年3月19日（水）　 pm 4時08分
modified: 2008年6月8日（日）　 pm 6時44分
Posted by jun Published in jQuery, 愛犬

▼

今度は「jQuery　Drop Shadow」の設置方法です。
・・・最初に言っておきますと、自分の環境だけかもしれませんが「IE」では綺麗に表示されません。

2008

3/18

「jquery roundcorners canvas」　と　「jquery curvycorners」　の設置説明

Created: 2008年3月18日（火）　 pm 10時48分
modified: 2020年1月29日（水）　 pm 4時05分
Posted by jun Published in jQuery

▼

・・・なぜか最近　jquery　にはまっているようだ？？　まぁ～それは置いといて、角丸を作成できる　jquery　プラグインを付けてみたいと思った・・・・なんとなく。調べた所、2種類発見、それがタイトルの2種類です。

早速、どちらが良いか試してみた所・・・・う～～～ん、一長一短？2種を比較した感想
jquery.curvycorners　は、「角丸が綺麗」　「角丸の角度が選べる」　「ボーダーも付けれる」　「ちょっと重い」　「ブラウザによって表示が違う時がある？設定のせいかも・・・」
jquery-roundcorners-canvas　は、「角丸がちょっと荒い」　「角の種類がいっぱいある」　「軽い」　

2008

3/17

「jQuery thickbox plugin」設置説明

Created: 2008年3月17日（月）　 pm 7時24分
modified: 2008年5月9日（金）　 pm 6時00分
Posted by jun Published in jQuery

▼

このページで設置した　jQuery lightBox plugin　に続いて今度は、　jQuery　plugin　の　thickbox　を設置します・・・・なぜかと言うと、前回の設置ページで試した「wp-lightpop」がHTMLファイルを表示できたのが素敵に思え羨ましかったからです・・・・(;^_^A アセアセ　そこで検索してみつけたのが、thickbox　でした。　では早速設置・・・・

2008

3/16

「jQuery lightBox plugin」　設置説明　＆　「wp-lightpop」　を試す

Created: 2008年3月16日（日）　 pm 10時21分
modified: 2008年5月9日（金）　 pm 8時19分
Posted by jun Published in jQuery, プラグイン, 愛犬

▼

つい最近このページで「Thumbnail Viewer」を設置して感動していたのですが・・・・浮気しようと思いますσ(^◇^;)ヒヤアセ　さらにステキなものを見つけてしまいました！！　それは、「jQuery lightBox plugin」・・・本当は、WPプラグインの「lightview」に浮気したのですが、ヘッダー部分の書き込みがうまくされないようで、どうがんばっても使えませんでした・・・(T^T)　そこで、他にないものかと探した所「jQuery lightBox plugin」を見つけこれは超ステキ～(゜゜)(。。)(゜゜)(。。)ウンウン　・・・と思い、早速設置！！

続きを読む ≫