Automatic Anchor Links from Headers
1.jpg

2.jpg

3.jpg

4.jpg

5.jpg

6.jpg

7.jpg

8.jpg

9.jpg

10.jpg

11.jpg

12.jpg

13.jpg

14.jpg

15.jpg

16.jpg

17.jpg

18.jpg

19.jpg

20.jpg

21.jpg

22.jpg

23.jpg

24.jpg

25.jpg

26.jpg

27.jpg

28.jpg

29.jpg

30.jpg

ホーム へ サンプルページ ブックマーク 3 book_mark3.htm
カスタムヘッダー(ページ内アンカー)からリンクテーブルを自動生成。 jQuery、DHTML。 カスタムヘッダー(ページ内アンカー)などのカスタマイズはテキストエディターなどで可。 all 対応。 コピー、編集し、簡単にWebで応用できまっ、(^ ^)。
関連・詳細情報 :
ブックマーク、ブックマーク2
デモは、Header Editなどをクリック、ページ内ジャンプで。 先頭行へは”Home”キーで。
< ご使用方法 >
・ ローカル(=PC)への保存は、book_mark3/をクリック、開いたホルダーでbook_mark3.htm、0044411101477.js を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。 ※: 変わってしまった、ファイル名や、*.html 中のパスは要修正。
・ このDHTMLの実装方法は、book_mark3.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに
<body> 〜 </body>の任意の行間に (*2) をペーストします。
・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。 下記の(例) (*1) と、(*2)、(*3) を参考に太字部分の編集を任意に行います。
※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。
・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 10.x〜 などで開いて。
更新の確認は、[F5]キー を押し、最新データ読み込み、で。 あるいは、Internet Explorerを全て閉じ、再起動を行い、閲覧履歴の削除後や、【Internet Explorer】- [ツール] - [インターネット オプション] -
[閲覧の履歴] - [削除] などでも。
・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.js なども転送/配置し実施。 ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。 FTPなどで変わってしまったファイル名は要修正。 スクリプト構文中への改行混入は非作動原因。
・ 関連情報 :
色記号5、〃6、スタイルシートリファレンス、ホームページ開設入門。 Web Development、Web開発、IE10
互換性クックブック、〃開発者向けガイド、IE
API リファレンス、IE 開発
> HTMLとCSS、開発ツールでサイトを修正、スクリプト デバッグの概要、HTMLとCSSのサポート、CSSの改良点、XML、〃リファレンス、DHTML。
Header Edit
(*1)
: book_mark3.htm (例) 挿入先の <head> 〜 </head> の、〜 部分にペーストします。
|
HTMLの編集方法 |
(*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
シフトJIS使用(削除不可)
ieなどに表示するアイコンファイル名(削除可)
<style type= 〜
</style>は(削除可)
(*1)〜(*3)表タイトル背景
body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント
リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)
リンクテーブル幅
〃 背景色
〃 枠色
jQuery
|
<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">
<link REL="SHORTCUT ICON" href="favicon.ico">
<style type="text/css"><!--
.xxx0
{ background: #F9F8F9 url('wttec.gif');
}
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFF; }
body { color:#000000; background: #F9F8F9
url('wttec.gif'); text-decoration:none;
}
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4;
text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2;
text-decoration:underline; }
font {font-size:12px;
line-height:13px;}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
--></style>
<base target="_blank">
<title>サンプルページ ブックマーク 3</title>
<!-- ☆ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<style>
/* Demo styles. Remove if desired */
#tocbox{
max-width: 500px;
background: #FFFFFF;
border: 1px solid #CDC4F7;
}
</style>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="0044411101477.js"></script>
<!-- ☆ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
|
Body Edit
(*2)
: book_mark3.htm (例) 挿入先の <body> 〜
</body> の、〜
部分にペーストします。
|
HTMLの編集方法 |
(*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。 |
|
〔この列ペースト不要〕
リンクテーブル位置
インデックス・見出し 〃 ID 〃 テキスト
以下、同様。
カスタムヘッダー 〃 ID 〃 テキスト
|
<body>
<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<div id="tocbox"></div>
<p><h1 class="h1"><span id="Automatic Anchor Links from
Headers"></span>Automatic Anchor Links from Headers</h1></p>
<h1 class="h1"><span id="1.jpg"></span>1.jpg</h1>
<p><img src="../win7a/1.jpg" title="↑ 先頭行へは”Home”キーで。" width="1600"/></p>
<h1 class="h1"><span id="2.jpg"></span>2.jpg</h1>
<p><img src="../win7a/2.jpg" title="↑ 先頭行へは”Home”キーで。" width="1600"/></p>
<h1 class="h1"><span id="3.jpg"></span>3.jpg</h1>
<p><img src="../win7a/3.jpg" title="↑ 先頭行へは”Home”キーで。" width="1600"/></p>
<h1 class="h1"><span id="4.jpg"></span>4.jpg</h1>
<p><img src="../win7a/4.jpg" title="↑ 先頭行へは”Home”キーで。" width="1600"/></p>
<h1 class="h1"><span id="5.jpg"></span>5.jpg</h1>
==== この間、説明を省略。 ====
<p><img src="../win7a/28.jpg" title="↑ 先頭行へは”Home”キーで。"
width="1600"/></p>
<h1 class="h1"><span id="29.jpg"></span>29.jpg</h1>
<p><img src="../win7a/29.jpg" title="↑ 先頭行へは”Home”キーで。" width="1600"/></p>
<h1 class="h1"><span id="30.jpg"></span>30.jpg</h1>
<p><img src="../win7a/30.jpg" title="↑ 先頭行へは”Home”キーで。" width="1600"/></p>
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->
==== この間、説明を省略。 ====
<p><h2 class="h2"><span id="Header Edit"></span>Header Edit</h2></p>
==== この間、説明を省略。 ====
<p><h2 class="h2"><span id="Body Edit"></span>Body Edit</h2></p>
==== この間、説明を省略。 ====
<p><b class="customheader"><span
id="Supplement"></span>Supplement</b></p>
==== この間、説明を省略。 ====
|
JavaScript Edit
(*3)
: 0044411101477.js (例) テキストエディターで開き、編集しhogehoge.htmlと同ディレクトリーに転送・配置します。
|
*.js の編集方法 |
(*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。 |
|
〔この列ペースト不要〕
|
/*
Automatic Anchor Links from Headers- By Jon Muller
Author Site: http://ergonomictrends.com/
*/
jQuery(function($){
var targetels= ['h1', 'h2', 'h3', '.customheader']
var outputdivid = 'tocbox' // id of empty element to house TOC links
var headerlength = 70 // max length of each header link
var trailingmark = '...' // trailing text to add to each of header link if
necessary
var animated = true // animate scrolling?
var uloutput = '<ul class="tableofcontents">\n' // UL and classname to use
for the generated TOC container
var $output = $('#' + outputdivid)
var $headers = $(targetels.join(', '))
var anchortxtarray = []
if ($output.length == 0 || $headers.length == 0)
return
$headers.each(function(i){
var $header = $(this)
var headertext = $header.text()
var defaultheaderlength = headertext.length
headertext = headertext.substr(0, headerlength)
var anchortext = headertext.replace(/ /g, "_") // replace space with _ to
generate anchor link text
anchortext = anchortext.replace(/\W/g, "") // Remove weird characters for
jQuery selector sake
if (jQuery.inArray(anchortext, anchortxtarray) != -1){ // check if this
anchor link already exists (happens if two headers have the same exact text)
anchortext += '_' + (i+1) // if so, append a number to this anchor text to
make it unique
}
anchortxtarray.push(anchortext)
$header.prepend('<span id="' + anchortext + '"/>')
uloutput += '<li><a href="#' + anchortext + '">' + headertext +
(headertext.length < defaultheaderlength? trailingmark : '') + '</a></li>'
})
uloutput += '</ul>'
$output.html( uloutput )
if (animated === true){
$output.bind('click', function(e){
var $target = $(e.target)
if ($target.is('a') && $target.attr('href').indexOf('#') != -1){
var $header = $($target.attr('href'))
$('html,body').animate({scrollTop: $header.offset().top}, 'normal',
function(){
location.hash = $target.attr('href')
})
return false
}
})
}
})
|
< 補足 > 適時参照あれ!。
・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。