top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1301

jquery3技術:ベロ出しスペースで、サイトに評価もらう機能を用意。jQueryの3つの技術に、ありがと ・・・ 【jQuery】

 2010-03-17
 前から実装したかったのだが、
 (よくある)レーティングの機能
       (レイティング?)
 ・創ったmetaboy に用意。

 最初は頁下部によくある形式で
 置いたのだけど・・・
 ちょっと欲出して、せっかく用意するなら。


 ・(前に訪問して)印象的だった
  ・経済産業省アイディアボックス で
   利用されていた、
   「上部タブが マウスオーバーですっと出てくる」やつ
    上部タブが マウスオーバーですっと出てくる


 ・レーティングはよくある「★画像」のものではなく
  jQueryで、ラベルや表示方法を変えていって
  実現するタイプ
   (仕組み、再確認したいし、ね)


 ・データ登録は、同じく jQueryから
  Ajaxで送信登録するスタイル


 これら整理して実装。

  追記に  ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎  ベロ出しスペースで、サイトに評価もらう機能 の巻
                 :jQuery 素敵

************************************************


 まず、


 ■ベロ出しの機能
  ※最近良く使われてますね。

  jQueryでは、次のプラグインが使い易かった。


jQuery ‘Tab Slide Out’ Plugin
jQuery ‘Tab Slide Out’ Plugin ほんと
 使い易い。



 【実装】


  □jsプラグイン取得>組み込み
   ・Download the plugin
<script type="text/javascript" src="/js/jquery.tabSlideOut.v1.3.js"></script>

 


  □js設定部分
window.onload = function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will become your tab
pathToTabImage: '/images/top_tab.gif', //path to the image for the tab *required*
imageHeight: '32px', //height of tab image *required*
imageWidth: '167px', //width of tab image *required*
tabLocation: 'top', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'hover', //options: 'click' or 'hover', action to trigger animation
topPos: '70px', //position from the top/ use if tabLocation is left or right
leftPos: '670px', //position from left/ use if tabLocation is bottom or top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
}

 

  で、表示部分は・・・
  □js設定部分
<div class="slide-out-div">
<a class="handle" href="http://www.metaboy.net/contact">Content</a>
<h3 id="rating_result">ご利用、ありがとうございます!</h3>
「創ったmetaboy」<br />
<p>
</p>
</div>
 で、

 


  □CSSは、
.slide-out-div {
background:#FFFFFF;
padding: 20px;
width: 250px;
border: #29216d 2px solid;
top: -81px;
z-index:99999;
}
 とするのだが・・・

  ※マウスオーバーで オープンしてくる。


 その内容は,
 ■シンプルなレーティング機能
  こちらに、
  (よく使われる)★画像タイプもあるけれど、
  ・jQuery Ajax Rater Plugin


 

  細かく設定して、jQueryだけで実現する、

somedirection » jQuery Ratings – A Progressive Enhancement Approach
somedirection  » jQuery Ratings – A Progressive Enhancement Approach こちらを利用させていただく。
 日本語の頁で、
 ・Progressive Enhancement: jQuery Rating
  こちらに丁寧な解説が・・・



 【実装】


  □紹介されている部分に、
   ・jquery.timer.js を使って
    文字表示切り替え も入れて、
$("input#btn_vote").hide(); // ボタンを隠して
$("form#rate_this input[type='radio']").hide(); // ラジオボタンを隠して
$("form#rate_this label").addClass("selector"); // ラベルをクリックしやすいように
// マウスオーバーした時ラベルをハイライト表示
$("label.selector, #rating_scores a").hover(
function(){
$(this).addClass("selector_h");
}, function() {
$(this).removeClass("selector_h");
});
/* クリックしたラベルの値を取得して表示 */
$("form#rate_this input[type='radio']").click(function() {
data = $("form").serialize();
$.ajax({
type: "POST",
url: "/cgi/jquery/jquery_rater/set_pagerating.php",
data:data,
success: function(evt, request, settings) {
//$("#rating_result").text(evt);
$("#rating_result").hide().fadeOut(1 * 1000);
$("#rating_result").css({color:"#3D70E6"});
$("#rating_result").text("ありがとうございました!");
$("#rating_result").hide().fadeIn(3 * 1000);
// 一定時間後
myTimer = $.timer(2 * 1000,function() {
// メッセージエリア初期化
$("#rating_result").hide().fadeOut(3 * 1000);
$("#rating_result").css({color:"#FF3366"});
$("#rating_result").text("ご利用、ありがとうございます!");
$("#rating_result").hide().fadeIn(3 * 1000);
});

},
error: function(msg) {
alert("申し訳ございません。うまく送れませんでした。"); }
});
});
 とする。

  これで、


  □実際の表示部分には、
<p><form id="rate_this" action="*****/set_pagerating.php" method="post">
<fieldset id="rating_scores">
<legend>ぜひ、この頁を評価してください</legend>
<label for="r1"><input id="r1" type="radio" value="1" name="rating" />★</label>
<label for="r2"><input id="r2" type="radio" value="2" name="rating" />★</label>
<label for="r3"><input id="r3" type="radio" value="3" name="rating" />★</label>
<label for="r4"><input id="r4" type="radio" value="4" name="rating" />★</label>
<label for="r5"><input id="r5" type="radio" value="5" name="rating" />★</label>
<input type="submit" id="btn_vote" value="投票" />
</fieldset>
</form></p>
 と準備。

 

 ■クリックして,Ajax
  phpアクセスする部分は、
data = $("form").serialize();
$.ajax({
type: "POST",
url: "*****/set_pagerating.php",
data:data,
success: function(evt, request, settings) {
//$("#rating_result").text(evt);

},
error: function(msg) {
alert("申し訳ございません。うまく送れませんでした。"); }
 このきれいな書き方を 改めて習得しよ。

 ・・・というわけで、
 「創ったmetaboy」にいらっしゃった際は
 どうぞよろしくお願いします。

commentsコメント
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1301-4d424acd
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。