Webサイトに様々なサポート機能を実装出来るスクリプト「Website Options」

※このページは十字架ラビアンローズの1コンテンツで、Webサイトに様々なサポート機能を実装出来るスクリプト「Website Options」の動作サンプルになります。

プルダウンから任意のCSSに切り替え

サンプルサンプルサンプル
テストテストテスト

↓この位置にプルダウンが表示されている筈です。

­
ダミーダミーダミー

以下のように設定・マークアップを行っています。


enable : true,
affectOpera : true,
targetElementID : "",
targetElementName : "div",
targetElementIndex : 6,
text : "CSS切り替え",
isBefore : false,
isOut : false,
expdays : 30,
enableNoStyle : true,
noStyleName : "装飾なし"


<link rel="stylesheet"           href="common.css" type="text/css" media="screen">
<link rel="stylesheet"           href="red.css"    type="text/css" media="screen" title="赤パターン">
<link rel="alternate stylesheet" href="blue.css"   type="text/css" media="screen" title="青パターン">


<div>
        <div>サンプルサンプルサンプル</div>
        <div>テストテストテスト</div>
</div>
<div>
        <div>
                <p>↓この位置にプルダウンが表示されている筈です。</p>
                <div>&shy;</div>
        </div>
        <div>ダミーダミーダミー</div>
</div>

外部リンクを自動的に新規ウィンドウ及び新規タブで開く

以下のように設定・マークアップを行っています。


enable : true,
applyByDefault : false,
internalURL : "",
targetElementID : "webopt_blank",
targetElementName : "body",
targetElementIndex : 1,
text : "外部リンクを別窓で開く",
isBefore : true,
isOut : true,
expdays : 30


<ul id="webopt_blank">
        <li>↑この位置にチェックボックスが表示されている筈です。</li>
        <li><a href="http://www.google.co.jp/">Google</a></li>
        <li><a href="http://lver.hippy.jp/website/javascript/webopt.php">本スクリプトの解説ページへ</a></li>
</ul>

今いるページ自身へのリンクの無効化

http://lver.hippy.jp/contents/website/javascript/webopt/

以下のように設定・CSS記述を行っています。


enable : true,
activeClassName : "active"


a
{
        text-decoration:none;
}

a.active
{
        text-decoration:line-through;
}

フォームの送信時・リセット時に確認を取る

ダミーのフォームの為、送信しても何も起こりません。
因みにaction属性を「#」としている為、送信するとURLの末尾に「#」が付加されるようになり、これにより「今いるページ自身へのリンクの無効化」のリンクが有効に変化します。

Internet Explorer6に<abbr>要素を認識させる

HTML

上記の「HTML」を<abbr>でマークアップしています。
Internet Explorer6でも、カーソルを合わせる事により、title属性の内容が、ツールチップでポップアップするようになっています。
※近年のブラウザは、機能のON/OFFに関係なく、もともと<abbr>に対応しています。

引用元のリンクを自動生成する

メロスは激怒した。必ず、かの邪智暴虐（じゃちぼうぎゃく）の王を除かなければならぬと決意した。メロスには政治がわからぬ。

以下のようにマークアップを行っています。


<blockquote cite="http://www.aozora.gr.jp/">
        <div>メロスは激怒した。必ず、かの邪智暴虐（じゃちぼうぎゃく）の王を除かなければならぬと決意した。メロスには政治がわからぬ。</div>
</blockquote>

ステータスバーにページ情報を表示する

ステータスバーが存在するブラウザでは、ステータスバーにページ情報が表示されているかもしれません。

外部サイトからフレーム及びインラインフレーム内に取り込まれた時に警告を表示する

申し訳ありませんが、管理人の環境で確認が取れない為、サンプルはありません。