TITLE:リスト系書式のスキーン変更
#indent
// / L318x L323x L352x L373
//-- default.ini.php / 特殊シンボル
////////////////////////////////////////////////////////////////
* 方針 [#m982063f]
- リストの左マージンや階層間間隔は Skin として指定すべき。
- タグ中に style 属性を直に指定されると、外部CSSが優先順位で負けるために都合が悪い。
////////////////////////////////////////////////////////////////
* 改造 [#ude0b949]
- ##lib/convert_html.php## の ##class ListContainer## にて、
#code(diff){{{{
class ListContainer extends Element
{
var $tag;
var $tag2;
var $level;
- var $style;
- var $margin;
- var $left_margin;
}}}}
- 同クラスの ##function ListContainer## にて、
#code(diff){{{{
function ListContainer($tag, $tag2, $head, $text)
{
parent::Element();
- $var_margin = '_' . $tag . '_margin';
- $var_left_margin = '_' . $tag . '_left_margin';
- global $$var_margin, $$var_left_margin;
-
- $this->margin = $$var_margin;
- $this->left_margin = $$var_left_margin;
}}}}
- 同クラスの ##function setParent## にて、
#code(diff){{{{
function setParent(& $parent)
{
global $_list_pad_str;
parent::setParent($parent);
$step = $this->level;
if (isset($parent->parent) && is_a($parent->parent, 'ListContainer'))
$step -= $parent->parent->level;
$margin = $this->margin * $step;
if ($step == $this->level)
$margin += $this->left_margin;
-
- $this->style = sprintf($_list_pad_str, $this->level, $margin, $margin);
}
}}}}
- 同クラスの ##function toString## にて、
#code(diff){{{{
function toString()
{
- return $this->wrap(parent::toString(), $this->tag, $this->style);
+ return $this->wrap(parent::toString(), $this->tag, ' class="list'.$this->level.'"');
}
}}}}
-- 階層毎に異なるスタイルを指定する場合は、従来のまま ##.list1##、##.list2##と##.list3## を利用。
-- 全階層に共通のスタイルを指定する場合は、タグ名を利用すれば良い。そのスタイルを上書きするスタイルは削除済み。
- ##default.ini.php## にて、
#code(diff){{{{
-/////////////////////////////////////////////////
-// リスト構造の左マージン
-$_ul_left_margin = 0; // リストと画面左端との間隔(px)
-$_ul_margin = 16; // リストの階層間の間隔(px)
-$_ol_left_margin = 0; // リストと画面左端との間隔(px)
-$_ol_margin = 16; // リストの階層間の間隔(px)
-$_dl_left_margin = 0; // リストと画面左端との間隔(px)
-$_dl_margin = 16; // リストの階層間の間隔(px)
-$_list_pad_str = ' class="list%d" style="padding-left:%dpx;margin-left:%dpx"';
}}}}
- 一例として、##skin/default.css## にて、次のように纏めて指定可能。
#code(css){{
ul li, ol li, dl dd
{
line-height :130%;
margin-left : 1em;
padding-left: 0em;
}
}}
////////////////////////////////////////////////////////////////