人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

YouTubeのクイックリストのように、ログインしていない状態でもサイト内ブックマークのようなことができるJQueryのプラグインなどはありませんか?中身はクッキーを使っているのか、 Flashクッキーなのかは分かりませんが、なんとなくイメージは湧きますがよくありそうな機能なので既に誰かがつくったいいライブラリやプラグインがあるような気がします。

JQueryに限らず、Javascriptなどで容易に実装できるものがあれば教えてください。

●質問者: dingding
●カテゴリ:インターネット ウェブ制作
✍キーワード:Flash JavaScript jQuery YouTube イメージ
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● typista
●60ポイント

jQueryとjQueryのcookie用プラグインをダウンロードし、HTML記述例のようにするとユーザごとに最近読んだ記事(最近クリックしたリンク)をcookieに保存します。

動作サンプルは、http://typista.xii.jp/をご覧ください。左(メイン)領域のトップに薄い青枠で「あなたが最近読んだ記事」として表示するようにしました。

サイト内ブックマークがご希望の場合、今回のサンプルは、ページ内のすべてのリンククリックで動作してしまいますので、ユーザアクションでcookieに追加するような修正が必要です。あとはhrefの内容によって外部リンクの場合は、追加しないなども必要ですよね。たぶん。

ポイントは、cookieに追加したいサイト内リンク(オブジェクト)をaddCookieLinks()にbindしてあげるか、addCookieLinksを少し改造して、パラメータ渡しにするといった感じでしょうか。説明難しいですか?

◆jQuery

http://docs.jquery.com/Downloading_jQuery

◆jQueryのcookie用プラグイン

http://plugins.jquery.com/project/Cookie

◆HTML記述例

<script type='text/javascript' src='jquery.cookie.js'></script>
<script type='text/javascript' src='previewRecent.js'></script>
<div id="previewRecent"></div>

◆最近読んだ記事を保存&取得するJS

jQuery(function($){
var previewRecentMax = 10;
var previewRecent = getPreviewRecent( previewRecentMax );
$('#previewRecent').html( previewRecent );
$('#previewRecent').css( {
'position' : 'relative',
'top' : '0px',
'left' : '0px',
'width' : '450px',
'background-color' : '#EEEEFF',
'border' : 'dotted 1px #9999FF',
'z-index' : '100000',
'opacity' : '0.8',
'padding' : '8px'
 } );


function getPreviewRecent( recentMax ) {
var ret = "<strong>あなたが最近読んだ記事</strong><br />";
var linkList = $.cookie('linkList');
var labelList = $.cookie('labelList');
if ( ( linkList == null ) || ( labelList == null ) ) {
ret += "最近の閲覧はありません。";
} else {
var linkArray = linkList.split( '\n' );
var labelArray = labelList.split( '\n' );
for ( var i = 0; ( i < linkArray.length && i < recentMax ); i++ ) {
ret += '<a href="' + linkArray[ i ] + '">' + labelArray[ i ] + '</a><br />\n';
}
}
return ret;
}

 $('a').each( function() {
 $(this).bind( "click", addCookieLinks );
 } );
 function addCookieLinks() {
 var linkList = $.cookie('linkList');
 var labelList = $.cookie('labelList');
 if ( linkList == null ) {
 linkList = "";
 } else {
 linkList = "\n" + linkList;
 }
 if ( labelList == null ) {
 labelList = "";
 } else {
 labelList = "\n" + labelList;
 }

 linkList = $(this).attr('href') + linkList;
 labelList = $(this).text().replace( /\n/g, '' ) + labelList;

 $.cookie( 'linkList', linkList );
 $.cookie( 'labelList', labelList );
 }
});
◎質問者からの返答

大変詳細に教えていただきましてありがとうございます!

是非こちらで試し見てます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ