nyatla＠Hatena::Diary

グローバルリンクリストの作り方講座５ タイトル表示設定編

01:15 |

タイトル表示についての説明です。

NavigationRingのタイトル表示方法には何通りかパターンがあります。

以下はその一例です。

タイトルの表示例

パネルモード+テキストデータ

パネルモード+innerHTMLデータ

背景モード+innerHTMLデータ

設定を行うには？

タイトルの設定を行うには拡張設定のカーソル画像の設定にチェックを入れます。

とりあえずタイトルを出してみる

とりあえずパネルモード+テキストデータタイトルを表示してみましょう。

まずはリンク先と画像の設定に以下のように適当な画像アドレスを設定します。

次に拡張設定→タイトル表示設定に次のように設定してください。

そして動きをプレビューボタンを押すと、下の様なリングコマンドが出来ます。

タイトルパネルの色は何も設定していないため、透過度90%の黒色です。

アイコン毎にタイトルが設定したものに切り替わる事を確認できます。

何が設定できるのか？

設定項目の詳細な説明です。

設定:タイトル表示位置

タイトルのパネルDIV（矩形）を画面上のどの位置に配置するかを設定します。

表示位置は、タイトルの表示位置種類とタイトル表示のパラメータ値の組合せで決まります。

表示位置の計算方法は、図を参考にしてください。

タイトルを表示しない

タイトルを表示しません。

クライアント領域全体

背景モードの一種です。ブラウザの画面全体をタイトル表示領域にします。

タイトル表示のパラメータ値に値を設定する必要はありません。

左上座標(left[px],top[px])を基点にwidth[px] x top[px]の矩形領域

背景モードの一種です。ブラウザ画面の左上の基点から、left(px)とtop(px)だけ右下にずらした位置に、width(px)×height(px)の範囲を限定したタイトル表示領域を作ります。

リング中心からleft[px]離れた場所に、width[px] x top[px]の矩形領域

パネルモードの一種です。リング表示位置を中心に、left(px)横に離れた位置を中心に、width(px)×height(px)のタイトル表示領域を作ります。

リング中心からtop[px]離れた場所に、width[px] x top[px]の矩形領域

パネルモードの一種です。リング表示位置を中心に、top(px)縦に離れた位置を中心に、width(px)×height(px)のタイトル表示領域を作ります。

リング中心からleft[px] x top[px]離れた場所に、width[px] x top[px]の矩形領域

パネルモードの一種です。リング表示位置を中心に、、left(px)横top(px)縦に離れた位置を中心に、width(px)×height(px)のタイトル表示領域を作ります。

設定:タイトルパネルdivタグのCSS

タイトルのパネルDIV（矩形）の表示スタイルを変えるCSSテキストを指定します。CSSテキストはタイトルのパネルDIVのstyle属性にそのまま指定されます。

※CSSテキストの内容によっては、CSS補正値に補正値を指定する必要があります。また、px以外の単位で座標値を指定することは出来ません。

サンプル1

青色パネル+白色文字

タイトルCSS TEXT	background-color:blue;color:white
補正値x	0
補正値y	0

サンプル2

赤色パネル外枠付き

タイトルCSS TEXT	background-color:red;border-style:solid;border-color:black;border-width:1px;
補正値x	2
補正値y	2

補正値は、イメージサイズを指定ピクセルだけ大きく見積もって座標計算をさせるために使います。NavigationRingはCSSでの幅値設定を自動で計算できないため、border-width,margin値を使用するときには、補正値を指定しなければなりません。

この例では、border-widthの値×2を設定します。（xは両側のborder幅をイメージ幅に加算し、yは両側のborder幅をイメージ高さに加算しています。）

本当は自動化できればいいんですけどね。

サンプル3

緑パネルに透過処理を追加

タイトルCSS TEXT	color:white;opacity:.80;filter:Alpha(opacity=80);padding:5;background-color:green;
補正値x	0
補正値y	0

透過度設定をする場合には、opacity:.80;filter:Alpha(opacity=80)のように２種類指定する必要があります。

タイトル文字列

タイトル文字列には、テキストのほかに、Htmlフラグメントを指定することが出来ます。

htmlフラグメントには、tableやdiv等、好きなhtmlを書くことが出来ます。

例えば、次のようなhtmlをタイトル文字列に指定すると…

<table border='1' style='color:white'><tr><td><img width='50px' src='http://nyatla.jp/ws/nr/wp/img/topimg.png'></td><td><b>テーブルの表も出せますよ</b></td></tr></table>

こんな感じになります。

注意

バグのため、タイトル用htmlの属性値にダブルクォーテーション'"'を使うことが出来ません。シングルクォーテーション"'"を使ってください。