开发进行时...

crazy coder

Avatar

blockQuotes

这个JS源码在自定义标签<blockquote>中的内容后下脚动态的增加一个引用链接,感觉应用不会太普遍,但可以从中学一些DOM的操作和多个onload事件的加载方法。

General
Use this script to dynamic place a citation link after any blockquotes on a page. Use it as many times on a page as necessary.

Note
Created by: Dunstan Orchard
Web Site: http://1976design.com/
Posted: February 23.2007

If the cite element contains a URL, print '- Quote source' below the quote as a clickable link.
If the cite element contains only plain text, print '- [the text]' below the quote.
If the cite element is empty or absent then print nothing below the quote.

Source Code

-Extenal File

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Dunstan Orchard | http://1976design.com/ */
// Altered from original idea by Simon Willison at:
// http://simon.incutio.com/archive/2002/12/20/blockquoteCitations

function extractBlockquoteInfo() {
quotes = document.getElementsByTagName('blockquote');
for (i = 0; i < quotes.length; i++) {
cite = quotes[i].getAttribute('cite');
title = quotes[i].getAttribute('title');
if ((cite) && (cite != '')) {
if ( (cite.match('http://', 'i')) || (cite.match('ftp://', 'i')) || (cite.match('person://', 'i')) ) {
newlink = document.createElement('a');
newlink.setAttribute('href', cite);
newlink.setAttribute('title', ('Go to ' + cite));
title = quotes[i].getAttribute('title');
if ((title) && (title != '')) {
newlink.appendChild(document.createTextNode(title));
} else {
newlink.appendChild(document.createTextNode('Quoted source'));
}
newdiv = document.createElement('div');
newdiv.className = 'source';
newdiv.appendChild(document.createTextNode('\u2014 '));//\u2014表示横线
newdiv.appendChild(newlink);
quotes[i].appendChild(newdiv);
} else {
newdiv = document.createElement('div');
newdiv.className = 'source';
newdiv.appendChild(document.createTextNode('\u2014 ' + cite));
quotes[i].appendChild(newdiv);
}
} else if ((title) && (title != '')) {
newdiv = document.createElement('div');
newdiv.className = 'source';
newdiv.appendChild(document.createTextNode('\u2014 ' + title));
quotes[i].appendChild(newdiv);
}
}
}

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
//多个onload函数
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

addLoadEvent(function(e) {
extractBlockquoteInfo();
});

-CSS


blockquote {
	font-style: normal;
	margin: 20px 40px;
}

blockquote div.source {
	color: #555;
	margin-top: 1em;
	text-align: right;
}

-Head


<script type="text/javascript" src="blockQuotes.js"></script>

-Body



<h2>No <code>cite</code> or <code>title</code></h2>
<blockquote cite="" title="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit. </p>
</blockquote>

<h2>With <code>title</code></h2>
<blockquote cite="" title="Chris Jones">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.</p>
</blockquote>

<h2>With <code>cite</code></h2>
<blockquote cite="http://1976design.com/" title="">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.</p>
</blockquote>

<h2>With <code>cite</code> and <code>title</code></h2>
<blockquote cite="http://1976design.com/" title="Chris Jones">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam erat sapien, sollicitudin et, eleifend eget, aliquam ut, nunc. Integer iaculis tempor velit.</p>
</blockquote>


评论已关闭