2014.9.29.Mon. 14:31
「プルダウンから任意のCSSに切り替え」「外部リンクを自動的に新規ウィンドウ及び新規タブで開く」等、様々なサポート機能を実装する事が出来るスクリプトを紹介します。
<head>
〜</head>
内にて、「weboptxxx.js」を外部ファイルとして読み込みます。
(xxx … バージョンの数値)
<script type="text/javascript" src="weboptxxx.js"></script>
本スクリプトでは、以下に挙げる実装可能な機能のうち、任意の採用したい機能のみを選択し実装する事が出来ます。
実装にあたっての設定やマークアップ等のしかたは、機能ごとにそれぞれ異なります。
項目設定箇所はJSファイル内の103〜140行目になります。
詳細はサイト閲覧者が任意のCSSに自由に切り替えられるようにする方法も併せて参照して下さい。
※近年のブラウザのバージョンアップ展開が早い事もあり、一部の先進ブラウザでは機能しないようです。
enable : boolean, |
true にすると、閲覧者が任意のCSSに切り替える事の出来るプルダウンが表示されるようになります。false にした場合は、以下の項目は設定しても特に意味を成しません。
|
---|---|
affectOpera : boolean, |
XHTML+Operaという組み合わせでもCSS切り替え機能を使用する場合はtrue 、使用しない場合はfalse とします。上記組み合わせで不具合が生じる為に補助的に設けられた項目であり、XHTMLでマークアップしていない場合は true /false どちらでも構いません。
|
targetElementID : "xxx", |
閲覧者が任意のCSSに切り替える事の出来るプルダウンを、ページ内のどの位置に表示させるのか、その任意のIDを指定します。 空にすると、次の targetElementName で指定した内容が適用されるようになります。
|
targetElementName : "xxx", |
閲覧者が任意のCSSに切り替える事の出来るプルダウンを、ページ内のどの位置に表示させるのか、その任意のHTMLタグ名を指定します。< や> は不要です。targetElementID でIDを指定している場合には、この項目を設定しても特に意味を成しません。
|
targetElementIndex : n, |
targetElementName で指定したHTMLタグ名について、ページ内に登場するうちの何番目の要素の位置にプルダウンを表示させるのか、その順番の数値(1〜)を指定します。targetElementID でIDを指定している場合には、この項目を設定しても特に意味を成しません。
|
text : "xxx", |
プルダウンの直前に表示させるラベルの文言を設定します。 全角文字も使用可能です。 |
isBefore : boolean, |
targetElementID 及びtargetElementName にて指定した要素の開始タグの箇所に表示させたい場合はtrue 、終了タグの箇所に表示させたい場合はfalse とします。
|
isOut : boolean, |
targetElementID 及びtargetElementName にて指定した要素の外側に表示させたい場合はtrue 、内側に表示させたい場合はfalse とします。targetElementName にてbody と設定している場合は文法上、必ずfalse として下さい。
|
expdays : n, |
閲覧者が設定した内容を保持する日数を設定します。0 とするとブラウザを終了するまで有効となります。
|
enableNoStyle : boolean, |
true にすると、優先CSS・代替CSSを一切適用させないスタイルが、選択肢に追加されるようになります。false にすると追加されません。
|
noStyleName : "xxx" |
enableNoStyle をtrue とした場合の、スタイルのタイトルを設定します。全角文字も使用可能です。 false にした場合は、設定しても特に意味を成しません。
|
enable : true
とすると、以下のようなソースが動的に出力されるようになります。
<div id="WOSSS">
<label for="WOSSSBOX">[text]</label>
<select id="WOSSSBOX">
<option class="enable">優先CSSのタイトル</option>
<option class="disable">代替CSSのタイトル</option>
<option class="disable">[noStyleName]</option>
</select>
</div>
targetElementID
にて指定したIDが<ul>
もしくは<dl>
に振られている場合には、上記ソースの外側に<li id="WOSSS_PARENT">〜</li>
もしくは<dd id="WOSSS_PARENT">〜</dd>
というソースが補填されます。<option>
のクラス名が動的にenable
になり、それ以外の<option>
のクラス名が動的にdisable
になります。項目設定箇所はJSファイル内の66〜101行目になります。
enable : boolean, |
true にすると、外部サイトへのリンクをクリックした際に、リンク先が自動的に新規ウィンドウ及び新規タブで開くようになります。<a> にtarget="_blank" が指定されている時と同様の挙動になります。false にした場合は、以下の項目は設定しても特に意味を成しません。
|
---|---|
applyByDefault : boolean, |
true にすると初期状態で機能がON、false にすると初期状態で機能がOFFになります。ユーザビリティを考えて、 false にしておくのが賢明でしょう。
|
internalURL : "xxx", |
http:// から始まるパスを指定する事で、このパスから始まるリンク先は内部コンテンツとして認識され、機能がONであってもリンク先が新規ウィンドウ・新規タブで開かなくなります。空でも構いません。 複数のサーバーを併用して1つのサイトを構築している場合等にどうぞ。 |
targetElementID : "xxx", |
閲覧者が機能のON/OFFを設定する事が出来るチェックボックスを、ページ内のどの位置に表示させるのか、その任意のIDを指定します。 空にすると、次の targetElementName で指定した内容が適用されるようになります。
|
targetElementName : "xxx", |
閲覧者が機能のON/OFFを設定する事が出来るチェックボックスを、ページ内のどの位置に表示させるのか、その任意のHTMLタグ名を指定します。< や> は不要です。targetElementID でIDを指定している場合には、この項目を設定しても特に意味を成しません。
|
targetElementIndex : n, |
targetElementName で指定したHTMLタグ名について、ページ内に登場するうちの何番目の要素の位置にチェックボックスを表示させるのか、その順番の数値(1〜)を指定します。targetElementID でIDを指定している場合には、この項目を設定しても特に意味を成しません。
|
text : "xxx", |
チェックボックスの直後に表示させるラベルの文言を設定します。 全角文字も使用可能です。 |
isBefore : boolean, |
targetElementID 及びtargetElementName にて指定した要素の開始タグの箇所に表示させたい場合はtrue 、終了タグの箇所に表示させたい場合はfalse とします。
|
isOut : boolean, |
targetElementID 及びtargetElementName にて指定した要素の外側に表示させたい場合はtrue 、内側に表示させたい場合はfalse とします。targetElementName にてbody と設定している場合は文法上、必ずfalse として下さい。
|
expdays : n |
閲覧者が設定した内容を保持する日数を設定します。0 とするとブラウザを終了するまで有効となります。
|
enable : true
とすると、以下のようなソースが動的に出力されるようになります。
<div id="WOSWITCH" class="enable">
<label>
<input type="checkbox" value="on" id="WOSWITCHBOX">
[text]
</label>
</div>
targetElementID
にて指定したIDが<ul>
もしくは<dl>
に振られている場合には、上記ソースの外側に<li id="WOSWITCH_PARENT">〜</li>
もしくは<dd id="WOSWITCH_PARENT">〜</dd>
というソースが補填されます。<div id="WOSWITCH">
に付加されるクラス名は、機能がONの際には動的にenable
になり、OFFの際には動的にdisable
になります。項目設定箇所はJSファイル内の60〜64行目になります。
enable : boolean, |
true にすると、今いるページそのものへのリンクの<a> 要素からhref 属性が動的に削除され、リンクが無効化されます。同一ページのページ内ジャンプに関してはこの限りではありません。 |
---|---|
activeClassName : "xxx" |
上記項目がtrue の際、該当するリンクに自動的に付加される任意のクラス名を設定します。false の際には、設定しても特に意味を成しません。
|
項目設定箇所はJSファイル内の49〜50行目になります。
enable : boolean |
true にすると、フォームでの送信時・リセット時に、「OK ?」というアラートを表示するようになります。「OK ?」の部分の文言は、JSファイル内の169行目にて変更する事も出来ます。 |
---|
<abbr>
要素を認識させる項目設定箇所はJSファイル内の31〜32行目になります。
useFixAbbr : boolean, |
true にすると、IE6でも<abbr> を認識出来、title 属性の内容がツールチップで表示されるようになります。しかしIE7以降では <abbr> を認識出来、またIE6はもはや完全に廃れてきている為、現代となっては特に意味はないでしょう。
|
---|
項目設定箇所はJSファイル内の34〜35行目になります。
useBlockquoteCitation : boolean |
true にすると、<blockquote> のcite 属性から、引用元のリンクが自動的に生成されるようになります。
|
---|
useBlockquoteCitation : true
とすると、</blockquote>
の直前に、以下のようなソースが動的に出力されるようになります。
「→ Source」の部分の文言は、JSファイル内の1296行目にて変更する事も出来ます。
<div class="blockquotesource"><a href="cite属性で指定したURL">→ Source</a></div>
項目設定箇所はJSファイル内の37〜38行目になります。
enable : boolean |
true にすると、[URL] - タイトルというフォーマットで、ステータスバーにページ情報が表示されるようになります。しかしステータスバーの表示がデフォルトでOFFになっているブラウザも少なくなく、またステータスバーにページ制作者からの私的なメッセージが表示されて本来表示される筈の情報が表示されなくなってしまう事を嫌う閲覧者も多い為、この機能については false としておいた方が賢明でしょう。
|
---|
項目設定箇所はJSファイル内の40〜47行目になります。
※近年のブラウザのバージョンアップ展開が早い事もあってか、管理人の確認環境では、いずれのブラウザでも動作しませんでした。
enable : boolean, |
true にすると、ページがフレームやインラインフレームの中に取り込まれた際に、警告が表示されるようになります。これにより、外部サイトから、あたかもそのサイトのコンテンツであるかのように表示されてしまう問題を予防します。 しかし、スクリプト利用者のサイト自体がそもそもフレーム・インラインフレームを採用している場合は、自分のサイト内で警告が表示されるようになってしまいますので、その場合は false にする必要があります。
|
---|---|
address : "xxx" |
サイトのルートディレクトリを、http:// で始まる形式で指定します。空でも構いません。 |
項目設定箇所はJSファイル内の52〜58行目になります。
HTMLファイルとJSファイルとを別々のサーバーに置いている等の特殊な事情がない限り、項目は空(デフォルトから設定変更せず)で構いません。
任意のCSSに切り替える事の出来るプルダウンや、機能のON/OFFを設定する事が出来るチェックボックスは、設定内容に応じて以下のような箇所に表示されます。
(例としてtargetElementID : ""
,targetElementName : "div"
,targetElementIndex : 4
と設定した場合)
isBefore : true,
isOut : true,
<body>
<div>
<div>テストテストテスト</div>
<div>
<!-- here --><div>ダミーダミーダミー</div>
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>
isBefore : true,
isOut : false,
<body>
<div>
<div>テストテストテスト</div>
<div>
<div><!-- here -->ダミーダミーダミー</div>
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>
isBefore : false,
isOut : true,
<body>
<div>
<div>テストテストテスト</div>
<div>
<div>ダミーダミーダミー</div><!-- here -->
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>
isBefore : false,
isOut : false,
<body>
<div>
<div>テストテストテスト</div>
<div>
<div>ダミーダミーダミー<!-- here --></div>
<div>サンプルサンプルサンプル</div>
</div>
</div>
</body>