cubeLabo PHP,Javascript,Web標準などWeb制作覚書 [Javascript]ライブラリ

Ajaxを用いた星評価システム Unobtrusive AJAX Star Rating Bar

Ajaxを用いた星型評価システムをご紹介します。このスクリプトはMySQLを利用します。
»Unobtrusive AJAX Star Rating Bar
ajaxstarrater_v122.zip

詳しい設置方法は下記のサイトでとても詳しく解説されています。
»Ajaxによる投票をやってみる - MovableType備忘録

本ブログはWordPressの個別記事(シングルポスト:single.php)にUnobtrusive AJAX Star Rating Barを設置する方法をご紹介します。

ダウンロードしたスクリプトを解凍。DB設定など必要な変更を行い、WordPressテーマディレクトリ_※1へアップロード。

※1:thema/○○○ → ○○○は個別のテーマディレクトリ。

WordPressの各記事(single.php)に投票コードを挿入しましたが、正常に動作しないためrating.jsファイルの65行目付近を変更。

xmlhttp.open('get', 'rpc.php?j='+vote+'&q='+id_num+'&t='+ip_num+'&c='+units); rpc.php?・・・ ⇒ /○○○/rpc.php?・・・_※1

※1:/○○○/rpc.phpはルート(/)からの絶対パス指定へ

スポンサードリンク

スポンサーサイト

JQueryはprototype.jsと競合するようです。あとから読み込んだものは正常に動作しますが、他方はエラーが発生するようです。

スポンサードリンク

リンクにマウスを当てるとリンク先のサムネイルを表示するAjaxライブラリをご紹介します。

とても簡単に導入することができます。

ダウンロード/解凍: arc90 lab : tools : Link Thumbnail; ダウンロードしたファイルを解凍します。linkthumbフォルダのarc90_linkthumb.js,linkpic_shadow.gifをアップロードします。
スクリプトファイルの読み込み: <script language="JavaScript" type="Text/JavaScript" src="○○○"></script>
<style type="text/css" media="screen">.arc90_linkpic { display: none; position: absolute; left: 0; top: 1.5em; } .arc90_linkpicIMG { padding: 0 4px 4px 0; background: #FFF url(/tools/c/images/linkpic_shadow.gif) no-repeat bottom right; }</style>; ○○○はarc90_linkthumb.jsへのパス。
linkthumbクラスを設定: サムネイルを表示したいリンク要素のクラス属性にlinkthumbを指定します。

スポンサードリンク