リストの利用いろいろ
リストって使い方次第で見た目がだいぶ変わるんですね、と。
htmlソース。とてもシンプルに。
/index.html
<body> <div id="hoge" > <h5>CSSテスト用ページ</h5> <ul> <li><a href="/kensyuCSS/index.html" id="current">ホーム</a></li> <li><a href="">えいご</a></li> <li><a href="">こくご</a></li> <li><a href="">すうがく</a></li> <li><a href="">せいぶつ</a></li> <li><a href="">にほんし</a></li> <li><a href="">せかいし</a></li> </ul> </div> </body>
#hoge h5{ display: none; } #hoge { font-size: 0.7em; font-weight: bold; width: 12em; border-right: 1px solid #666; padding: 0 0 0 0; margin-bottom: 1em; font-family: Verdana, Helvetica, Arial, sans-serif; } #hoge ul { list-style: none; margin: 0; padding: 0; } #hoge ul li { margin: 0; border-top: 1px solid #003; } /* 本ではa:linkだが、Firefoxでは無効になるためaにして回避 */ #hoge ul li a { display: block; padding: 2px 2px 2px 0.5em; border-left: 10px solid #369; border-right: 1px solid #69c; border-bottom: 1px solid #369; background-color: #003366; color: #ffffff; text-decoration: none; width: 100%; } html>body #navsite ul li a{ width: auto; } #hoge ul li a:hover { border-left: 10px solid #036; border-right: 1px solid #69c; border-bottom: 1px solid #369; background-color: #69f; color: #fff; }
↓こんな感じになる。
SS撮ったらポインタ消えたけど、「せいぶつ」にポインタのっけてます。
同じリストをタブっぽくするのも出来る。
#hoge h5 { display: none; } #hoge ul { padding: 3px 0; margin-left: 0; border-bottom: 1px solid #669; font: bold 12px Verdana, sans-seri; } #hoge ul li { list-style: none; margin: 0; display: inline; } #hoge ul li a { padding: 3px 0.5em; margin-left: 3px; border: 1px solid #669; border-bottom: none; background: #ccf; text-decoration: none; } #hoge ul li a:link { color: #339; } #hoge ul li a:visited{ color: #666; } #hoge ul li a:link:hover, #tub ul li a:visited:hover { color: #000; background: #AAE; border-color: #336; } #hoge ul li a#current { background: white; border-bottom: 1px solid white; }
両方ともCSSだけで実現できちゃうもんとは思ってなかった…。
元ネタは
CSSクックブック ―Webデザインのための活用テクニック集
- 作者: Christopher Schmitt,株式会社ドキュメントシステム
- 出版社/メーカー: オライリージャパン
- 発売日: 2005/02/28
- メディア: 大型本
- 購入: 3人 クリック: 27回
- この商品を含むブログ (29件) を見る
他にも試してみよぅ。
HatenaNotationConverter(勝手に命名)
JAVAで正規表現を使う方法はjava.util.regexをimportするか
org.apache.oro.text.perlをimportする2種類あるらしー。
今回はperlの正規表現にも慣れておこうと後者で実装。
入力してある文章を表示させるときに噛ませたいだけなので
getAsObject()は放置(こっちは入力時のConverter)して
getAsString()のみいぢくることに。
まずはスーパープレ記法にちゃれんじ。
一番悩んだのが正規表現でmatchした文字列の中のさらに特定の字を指定すること。
とりあえずはこんな風にしてみた。
public String getAsString(FacesContext context, UIComponent component, Object value) throws ConverterException { String entryBody = (String) value; Perl5Util reg = new Perl5Util(); while (reg.match("/>\\|\\|([^\\|]*)\\|\\|</s", entryBody)) { MatchResult mr = reg.getMatch(); String pre = reg.preMatch(); String post = reg.postMatch(); String superPre = mr.group(0); superPre = reg.substitute("s/</</g", superPre); superPre = reg.substitute("s/\"/"/g", superPre); superPre = reg.substitute("s/>/>/g", superPre); superPre = reg.substitute("s/>\\|\\|/<pre class='superPre'>/g", superPre); superPre = reg.substitute("s/\\|\\|</<\\/pre>/g", superPre); entryBody = pre + superPre + post; } }
>||〜||<の中の「<」と「>」を指定したかったわけですが、コレ一文づつじゃ無理なのかなあ。
次の課題はリスト記法だ…。
focus()
ログイン画面に来たときに、
最初からカーソルがテキストボックスにあるようにしたいなーと思い。
師匠に相談したらJavaScriptだねってことで手を染めてみることに。
しかし
onLoad="document.formName.fieldName.focus()"
とゆーのが簡単にいかないのがJSF…。
なぜならテキストボックスのid属性、name属性が固定じゃないから。
そこで
document.forms[0].elements[0].focus();
とするがなぜかエラーになる。
一番上に配置してるのにおかしー。
ここでFireFox様の「ページの情報を表示」とゆー機能がとっても便利だと気づく。
これを見ると自分で書いた覚えのないhiddenが配置されていることに。
document.forms[0].elements[3].focus();
で無事カーソル初期位置設定できましたー。
このhiddenはどこから来た子なんだろう?
dataScrollerの複数使用
メインになるテーブルの上下にスクローラがあるってのは
よく見るものなので試してみました。
ひとつのページで配置する分には
<t:dataScroller for="entry" /> <t:dataTable id="entry" /> <t:dataScroller for="entry" />
超簡略化してみました。
で問題なく挙動するんですよ。
しかーしこれにページ遷移を絡めると、
上のスクローラだけ動きがオカシイ。
直前に表示していたtableのrowCountが引き継がれてしまうよーで。
遷移の時に明示的にrowCountをいじってやってもJSF側のどこかで保持してるらしい?
binding設定すると上だけ消えるとかも、よくわかりません…。
で、結局。
<t:dataTable id="entry" /> <t:dataScroller for="entry" /> <t:dataScroller for="entry" />
として、片方のスクローラをCSSで無理やり上にもってく!
とゆーあんまりな方法になりましたとさ。
あんまりいい方法じゃないとは自分でも思うんですがー。
研修覚え書き
やっとこさ初期機能実装ですよ。
最後の3%がまた色々あったので書いておこー。