1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
4 <title>Rico Grid Styles</title>
5 <link href="ricoDocs.css" rel="Stylesheet" type="text/css">
11 <p>Rico LiveGrid と SimpleGrid のスタイルをカスタマイズすることは、非常に簡単です。
12 実際に、LiveGrid と SimpleGrid は同じクラス名と DOM 構造の多くを共有するので、
13 一方にあてはまるスタイルは他方に適用されることが出来ます。
15 <h2>あらかじめ構成されたスタイル</h2>
17 <p>Rico には、LiveGrid のためのいろいろなスタイルシートが付属します。
18 PHP、ASP、.net または Perl のセクションの、最初の LiveGrid の実例を選択する事によって、
19 それらがどのように見えるのかを知る事が出来ます。
20 実例のページのトップで、あなたの気に入るものを見つけるために、
21 それぞれの "style" セレクションを試して下さい。
22 実際のスタイルシートは src/css ディレクトリにあります。
24 <p>ここに、"Cursor Row" が設定される "highlight" を持つ、それぞれのスタイルのスクリーンショットがあります。
26 <p><strong>greenHdg.css</strong>
27 <br><img src='images/gridsamples/greenHdg.png'>
29 <p><strong>tanChisel.css</strong>
30 <br><img src='images/gridsamples/tanChisel.png'>
32 <p><strong>grayedout.css</strong>
33 <br><img src='images/gridsamples/grayedout.png'>
35 <p><strong>coffee-with-milk.css</strong>
36 <br><img src='images/gridsamples/coffee-with-milk.png'>
38 <p><strong>warmfall.css</strong>
39 <br><img src='images/gridsamples/warmfall.png'>
41 <p><strong>iegradient.css</strong> <em>(Internet Explorer のみで動作します)</em>
42 <br><img src='images/gridsamples/iegradient.png'>
44 <p>これらのスタイルのいくつかは、<a href="http://icant.co.uk/csstablegallery/index.php">CSS Table Gallery</a>
46 そのギャラリーは LiveGrid のスタイルのためのインスピレーションとして用いる事が出来ますが、
47 ギャラリーの CSS は直接 LiveGrid に適用する事は出来ません。
51 <p>利用出来るあらかじめ構成されたスタイルの種類でさえ、
53 必然的にいくつかのスタイル宣言がオーバーライドされる必要があります。
54 以下は、スタイルがオーバーライドされる事を必要とするいくつかの一般的な状況と、
55 その問題を解決するために提案される CSS スタイルです。
60 一般的に 2 または 3 行のテキストとして語句を送る事を認めたいです。
64 .ricoLG_top div.ricoLG_cell {
71 .ricoLG_top div.ricoLG_cell {
78 <p>同様に、長い内容を表示するために、グリッドボディのそれぞれの行を、
81 <p>2 行のテキストによるボディ行の表示。
83 .ricoLG_bottom div.ricoLG_cell {
90 <p>デフォルトで、ワードラップはそれぞれのグリッドセルで利用可能にされます。
91 しかし、時にはワードラップをオフにする事は意味をなします。
93 <p>見出しとボディでワードラップをオフにする。
100 <p>ボディのみでワードラップをオフにする。
102 .ricoLG_bottom div.ricoLG_cell {
109 <p>時々、あなたはスタイルをグリッド全体に適用したいかもしれません。
110 それぞれのグリッドは "ricoLG_outerDiv" クラスと共に <div> で囲まれ、
111 id は "_outerDiv" を追加された LiveGrid コンストラクタに渡した id と等しい id です。
112 (すなわち、最初の実例のグリッド id は "ex1_outerDiv" です)。
113 このように、ページ上ですべてのグリッドにスタイルを適用する時はセレクタとして ".ricoLG_outerDiv" を、
114 ex1 グリッドにのみスタイルを適用する時は "#ex1_outerDiv" 利用する事が出来ます。
118 div.ricoLG_outerDiv {
119 background-color:aqua;