λ-wiki

λ-wiki :: styles_2

www!k! v.20120610

λ-wiki :: éditeur

{h1 inline styles 2 & {a {@ href:?view=styles;}1}}

{p Styles can be stored in variables and applied to a container in one clic on button "Apply the styles". Defining the id of this container as "onload_code", it's also possible to have the styles automatically applied when the page is loaded. This functionality is desactivated for now. Such a functionnality opens a lot of possibilities comming later.

}
{pre {@ id:code; border:1px solid grey;}°°
// 1) define the styles :
var title     = 'font:bold 6em Georgia; color:red; text-align:center; background:#ccc; margin:10px 0;';
var leftside  = 'float:left; width:48%; border:1px solid grey; background:magenta;';
var rightside = 'float:right; width:48%; border:1px solid grey; background:cyan;';
var foot      = 'font:bold 3em Georgia; color:blue; text-align:center; background:#ccc;';
// 2) apply the styles in one call. 
$('thecontent').innerHTML = $('thecontent').innerHTML
.replace( /id="title"/g,        'style="'+title+'"' )
.replace( /class="leftside"/g,  'style="'+leftside+'"' )
.replace( /class="rightside"/g, 'style="'+rightside+'"' )
.replace( /id="foot"/g,         'style="'+foot+'"' ); 
°°}

{div  {submit {@ code:code; value:Apply the styles;}}}

{div {@ id:thecontent; background:#ffe;}

{h1 {@ id:title;}LE TITRE}

{div {@ class:leftside;}
{h6 SOUS TITRE}
{p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}
}

{div {@ class:rightside;}
{h6 SOUS TITRE}
{p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.}
}

{div {@ clear:both;}}

{div {@ id:foot; text-align:center; border-top:1px solid grey;}THE END}

}