2009年06月10日

はてなの引用ブロックを真似てみた


「>>」だけの行と、「<<」だけの行で段落をはさむと、その部分が引用文だということを示すことができます。


はてなの引用ブロックが良いなーっと思ったので、<blockquote>をjQueryで似たような感じにパクろうと実装してみようと。

◆script(javascript,css)

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3");</script>
<style type="text/css">
blockquote {
background:#AADDAA;
border:1px solid #228822;
color:#232323;
margin:2.5em 3.5em;
padding:0;
}
blockquote p{
margin:0.75em;
}
blockquote cite{
background-color:#FFFFFF;
border-top:2px dashed #667766;
color:#232323;
font-style:normal;
margin:1em 0 0;
padding:0.1em 0.3em;
display:block;
text-align:right;
}
</style>
<script type="text/javascript">
$(function (){
$("blockquote").each(function(){
//元の文章を段落で囲む
$(this).html("<p>"+$(this).html()+"</p>");

//-----引用先を表示-----//
var strCite = "<cite>";
strCite += "<a href='"+ $(this).attr("cite") + "' target='blank'>";
strCite += $(this).attr("title");
strCite += "</a>";

if(($(this).attr("bookmark")==undefined)||$(this).attr("bookmark")=="ON")
{
strCite += "<img src='http://b.hatena.ne.jp/entry/image/normal/";
strCite += $(this).attr("cite") + "'>"
}
strCite += "</cite>";
$(this).html($(this).html()+strCite);
});
});
</script>

◆html

<blockquote title="はてなダイアリーのヘルプ:引用ブロックを作る(引用記法)" cite="http://hatenadiary.g.hatena.ne.jp/keyword/%E5%BC%95%E7%94%A8%E3%83%96%E3%83%AD%E3%83%83%E3%82%AF%E3%82%92%E4%BD%9C%E3%82%8B%EF%BC%88%E5%BC%95%E7%94%A8%E8%A8%98%E6%B3%95%EF%BC%89" bookmark="ON">
「>>」だけの行と、「<<」だけの行で段落をはさむと、その部分が引用文だということを示すことができます。
</blockquote>

◆<blockquote>の指定
要素
title引用部にリンク付きで表示される
cite引用先のURL。titleのリンクに使用
bookmark"ON"または未記述で、はてブの数を表示("OFF"で未表示)


posted by purigen at 00:07| Comment(1) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2009年05月21日

javascriptでタグ生成手順の覚書

超今更ですが、javascriptでタグ生成手順の覚書。

◆実行結果


 →に作成されます:

◆独自リンク作成

 リンク文字列:

 リンク先URL:

 

↓に作成されていきます。

◆ソース

<html>
<head>
<title>javascriptタグ生成</title>
<script type="text/javascript">
//リンク作成
function createLink(strTag,strLink,strURL)
{
//<a>タグ作成
var a = document.createElement('a');

//<a>ヤホー!</a>
a.appendChild(document.createTextNode(strLink));

//<a href="http://www.yahoo.co.jp/">
a.href = strURL;

//<a target="blank">
a.target = 'blank';

//<body>タグに追加(最後尾に追加される)
document.getElementById(strTag).appendChild(a);
}

//動的リンク作成
function createOriginalLink()
{
createLink('your_a',document.your_form.str.value,document.your_form.url.value);
document.getElementById('your_a').appendChild(document.createElement('br'));
}
</script>
</head>

<body>
<input id="yahoo_btn" type="button" value="ヤホーリンク作成" onclick="createLink('yahoo_a','ヤホー!','http://www.yahoo.co.jp/');">
<div id="yahoo_a"> →に作成されます:</div>
◆独自リンク作成
<form name="your_form" action="#">
 リンク文字列:<input name="str" type="textarea"><br>
 リンク先URL:<input name="url" type="textarea"><br>
 <input type="button" value="作成" onclick="createOriginalLink()">
</form>
↓に作成されていきます。
<div id="your_a"></div>
</body>
</html>

 要点は、
 ・タグの生成
 

//<a>タグ作成
var a = document.createElement('a');
 

 ・テキストノードを追加

//<a>ヤホー!</a>
a.appendChild(document.createTextNode(strLink));

 ・プロパティの設定

//<a href="http://www.yahoo.co.jp/">
a.href = strURL;
//<a target="blank">
a.target = 'blank';

 ・指定タグ内に、aタグを追加

//<body>タグに追加(最後尾に追加される)
document.getElementById(strTag).appendChild(a);

 という所でしょうか。
posted by purigen at 02:08| Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2009年05月12日

始めてのjQuery on Google AJAX API

  
AJAX開発を行う時に、javascriptライブラリを使用する必要があるのですが、
「開発環境が一箇所ではない時」には、

 『複数のPCに同じ環境を整えなければいけない』
 
という手間がかかり、開発する気が減退します。 それを解決してくれるのが、
AJAX Libraries API というGoogleのサービスだったりします。
これはざっくりと言えば、
 「HTMLアクセスがあった時に、Googleサーバーからjavascriptライブラリを取得できる」
というサービスです。

1.使い方
 例えばjQueryを使用した場合は、内に
 

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1.3");</script>
 

 と記述すればOK。
 
 「google.load("jquery","1.3");」は、指定してあるバージョンレベルの最新版をロードします。
  ・「google.load("jquery","1.3");」
   jQueryの1.3系の最新版
  ・「google.load("jquery","1.");」
   jQueryの1系の最新版
  ・「google.load("jquery","1.3.7");」
   jQueryの1.3.7系の最新版(これより下位レベルは無いので、実質バージョンを特定)
   
2.なんかやってみる
 jQueryを使った簡単なサンプルを動かしてみます。
 

  <html>
  <head>
  <title>jQueryテストページ</title>
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">google.load("jquery","1.3");</script>

  <script type="text/javascript"><!--
  function hello(){
   $("#hello").html("<strong>Hello jQuery World!</strong>");
   $("#btn1").html("<input type=\"button\" name=\"btn1\" value=\"GoodByte!\" onclick=\"goodbye()\">");
   }
   function goodbye(){
   $("#hello").html("<strong>goodbye prototype World!</strong>");
   $("#btn1").html("<input type=\"button\" name=\"btn1\" value=\"Hello!!\" onclick=\"hello()\">");
   }
   function hide(){
   $("#hello").slideUp();
   $("#btn2").html("<input type=\"button\" name=\"btn2\" value=\"Show\" onclick=\"show()\">");
   }
   function show(){
   $("#hello").slideDown();
   $("#btn2").html("<input type=\"button\" name=\"btn2\" value=\"Hide\" onclick=\"hide()\">");
   }
  --></script>
  </head>
  <body>
   <div id="hello">ココが変化します。</div><br>
   <div id="btn1"><input type="button" name="btn1" value="Hello!" onclick="hello()"></div><br>
   <div id="btn2"><input type="button" name="btn2" value="Hide" onclick="hide()"></div>
  </body>
  </html>
 

 ボタンを適当に押して試してみて下さい。
  
ココが変化します。

  

  


追記:
HTMLメタ文字→エスケープ文字変換javascriptの変換が動かなかったのを直しました。
ラベル:jquery
posted by purigen at 02:42| Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。