Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen
Aus Stupidedia, der sinnfreien Enzyklopädie!
K |
(Markierung: Widget installiert) |
||
| Zeile 9: | Zeile 9: | ||
== Formular == | == Formular == | ||
<html> | <html> | ||
| + | <span id="dummy" style="display: none;"></span> | ||
<form action="rein_damit();" id="pStyleGenerator-form"> | <form action="rein_damit();" id="pStyleGenerator-form"> | ||
<table class="valign-top" id="pStyleGenerator-table"> | <table class="valign-top" id="pStyleGenerator-table"> | ||
| Zeile 71: | Zeile 72: | ||
<input type="checkbox" name="font-variant" value="small-caps" id="pStyleGenerator-font-variant" /> | <input type="checkbox" name="font-variant" value="small-caps" id="pStyleGenerator-font-variant" /> | ||
<label for="pStyleGenerator-font-variant" style="font-variant: small-caps;">Kapitälchen</label> | <label for="pStyleGenerator-font-variant" style="font-variant: small-caps;">Kapitälchen</label> | ||
| + | <br /> | ||
| + | <input type="checkbox" name="text-shadow" value="3px 3px 5px rgba(68, 68, 68, 1)" id="pStyleGenerator-text-shadow" /> | ||
| + | <label for="pStyleGenerator-text-shadow" style="text-shadow: 3px 3px 5px rgba(68, 68, 68, 1);">Textschatten</label> | ||
</td> | </td> | ||
<td></td> | <td></td> | ||
| Zeile 78: | Zeile 82: | ||
--> | --> | ||
<tr> | <tr> | ||
| − | <th colspan="3">Hintergrund</th> | + | <th colspan="3">Hintergrund und Kastenschatten</th> |
</tr> | </tr> | ||
<tr> | <tr> | ||
| − | <td> | + | <td>Hintergrund:</td> |
<td> | <td> | ||
<input type="radio" name="bg" id="bground1" checked=true /><label for="bground1">Farbe</label> | <input type="radio" name="bg" id="bground1" checked=true /><label for="bground1">Farbe</label> | ||
| Zeile 87: | Zeile 91: | ||
<input type="radio" name="bg" id="bground3" /><label for="bground3">Hintergrundbild</label> | <input type="radio" name="bg" id="bground3" /><label for="bground3">Hintergrundbild</label> | ||
<div id="bg1s"> | <div id="bg1s"> | ||
| − | <input type="text" name="background-color" /> | + | <table><tr> |
| + | <td>Farbe:</td> | ||
| + | <td><input type="text" name="background-color" /></td> | ||
| + | </tr></table> | ||
</div> | </div> | ||
<div id="bg2s" style="display: none;"> | <div id="bg2s" style="display: none;"> | ||
| Zeile 103: | Zeile 110: | ||
</div> | </div> | ||
<div id="bg3s" style="display: none;"> | <div id="bg3s" style="display: none;"> | ||
| − | + | <table> | |
| + | <tr> | ||
| + | <td>Datei:</td> | ||
| + | <td><input type="text" class="backpic" /></td> | ||
| + | </tr><tr> | ||
| + | <td></td><td><input type="button" value="Nach Dateien suchen" class="picsearch" onclick="var dname = prompt('Wie soll die Datei heißen?');if(dname!=='')window.open('http://www.stupidedia.org/stupi?title=Spezial:Dateien&ilsearch=' + encodeURIComponent(dname) );" /></td> | ||
| + | </tr><tr></table> | ||
</div> | </div> | ||
</td> | </td> | ||
| Zeile 616: | Zeile 629: | ||
display: none; | display: none; | ||
} | } | ||
| − | |||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Zeile 626: | Zeile 638: | ||
return false; | return false; | ||
}); | }); | ||
| − | $('#pStyleGenerator-form input, #pStyleGenerator-form select, #pStyleGenerator-form option, #pStyleGenerator-form label').on('click change keyup keydown', pStyleGenerator.refresh); | + | //$('#pStyleGenerator-form input, #pStyleGenerator-form select, #pStyleGenerator-form option, #pStyleGenerator-form label').on('click change keyup keydown mouseover mouseout blur active', pStyleGenerator.refresh); |
| + | var inter = setInterval(function () { | ||
| + | pStyleGenerator.refresh(); | ||
| + | },100); | ||
pStyleGenerator.refresh(); | pStyleGenerator.refresh(); | ||
} | } | ||
| Zeile 636: | Zeile 651: | ||
else if($('#bground2').is(':checked')===true){$('#bg2s').show();bgset = 2;} | else if($('#bground2').is(':checked')===true){$('#bg2s').show();bgset = 2;} | ||
else{$('#bg3s').show();bgset = 3;} | else{$('#bg3s').show();bgset = 3;} | ||
| + | $.get('http://www.stupidedia.org/stupi?title=Datei:' + $("input[class='backpic']").val(), function (dateiseite) { | ||
| + | var picpath = dateiseite.split('<div class="fullImageLink" id="file"><a href="')[1].split('"><img alt="Datei:')[0]; | ||
| + | $('#dummy').html(picpath); | ||
| + | }) | ||
| + | .fail(function() { | ||
| + | $('#dummy').html(''); | ||
| + | }); | ||
var inputProps = api.mergeParams($('#pStyleGenerator-form').serializeArray()); | var inputProps = api.mergeParams($('#pStyleGenerator-form').serializeArray()); | ||
var setProps = {}; // Alle nicht leeren Eigenschaften | var setProps = {}; // Alle nicht leeren Eigenschaften | ||
| Zeile 650: | Zeile 672: | ||
'text-decoration', | 'text-decoration', | ||
'text-align', | 'text-align', | ||
| + | 'text-shadow', | ||
'width', | 'width', | ||
'height', | 'height', | ||
| Zeile 760: | Zeile 783: | ||
switch(bgset){ | switch(bgset){ | ||
case 1: | case 1: | ||
| − | $("input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a']").val("");var attri = attr; | + | $("input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a'],input[class='backpic']").val(""); var attri = attr; |
break; | break; | ||
case 2: | case 2: | ||
| − | $("input[name='background-color']").val(""); | + | $("input[name='background-color'],input[class='backpic']").val(""); |
| − | if( $("#betgr").is(':checked') ) var attri = attr + gainmid.split('\n ').join(' '); | + | if( $("#betgr").is(':checked') && ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) var attri = attr + gainmid.split('\n ').join(' '); |
| − | else var attri = attr + gain.split('\n ').join(' '); | + | else if( ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) var attri = attr + gain.split('\n ').join(' '); |
| + | else var attri = attr; | ||
| + | break; | ||
| + | case 3: | ||
| + | $("input[name='background-color'],input[class='gradient-1'],input[class='gradient-2'],input[class='gradient-1a']").val(""); | ||
| + | var attri = attr; | ||
break; | break; | ||
} | } | ||
switch (inputProps['generator-output']) { | switch (inputProps['generator-output']) { | ||
case 'div': | case 'div': | ||
| − | var output = '<div'; | + | if(bgset===3 && $("input[class='backpic']").val()!=="" ){ |
| + | if($('#dummy').html() !== "") var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");}}\n<div'; | ||
| + | else var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");}}\n<div'; | ||
| + | } | ||
| + | else{var output = '<div';} | ||
if (attr !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) { | if (attr !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) { | ||
output += ' style="' + attri + '"'; | output += ' style="' + attri + '"'; | ||
} | } | ||
| + | if(bgset===3 && $("input[class='backpic']").val()!=="" ){output += ' id="num{{#var:num}}"';} | ||
output += '>\nHier kommt der Inhalt des Kastens rein!\n</div>'; | output += '>\nHier kommt der Inhalt des Kastens rein!\n</div>'; | ||
break; | break; | ||
case 'span': | case 'span': | ||
| − | var output = '<span'; | + | if(bgset===3 && $("input[class='backpic']").val()!=="" ){ |
| − | if (attr !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) { | + | if($('#dummy').html() !== "") var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");}}\n<span'; |
| + | else var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");}}\n<span'; | ||
| + | } | ||
| + | else{var output = '<span';} | ||
| + | if (attr !== '' || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) || $("input[class='backpic']").val()!=="" ) { | ||
output += ' style="' + attri + '"'; | output += ' style="' + attri + '"'; | ||
} | } | ||
| + | if(bgset===3 && $("input[class='backpic']").val()!=="" ){output += ' id="num{{#var:num}}"';} | ||
output += '>Hier kommt der formatierte Text rein!</span>'; | output += '>Hier kommt der formatierte Text rein!</span>'; | ||
break; | break; | ||
| Zeile 788: | Zeile 826: | ||
case 'file': | case 'file': | ||
var output = ''; | var output = ''; | ||
| − | if (formattedProps.length > 0 || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) { | + | if(bgset===3 && $("input[class='backpic']").val()!==""){ |
| − | output += ' ' + formattedProps.join('\n ') + gain; | + | if($('#dummy').html() !== "") output += ' ' + 'background-image: url("http://www.stupidedia.org' + $('#dummy').html() + '");\n'; |
| + | else output += '\n ' + 'background-image: url("Fehler: Angegebene Dateiseite existiert nicht.");'; | ||
| + | } | ||
| + | if (formattedProps.length > 0 || ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) || $("input[class='backpic']").val()!=="" ) { | ||
| + | if( $("#betgr").is(':checked') && ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) output += ' ' + formattedProps.join('\n ') + gainmid; | ||
| + | else if( ( $("input[class='gradient-1']").val()!=="" || $("input[class='gradient-2']").val()!=="" || ( $("input[class='gradient-1a']").val()!=="" && $("#betgr").is(':checked') ) ) ) output += ' ' + formattedProps.join('\n ') + gain; | ||
| + | else output += ' ' + formattedProps.join('\n '); | ||
} | } | ||
break; | break; | ||
| Zeile 797: | Zeile 841: | ||
// Vorschau aktualisieren | // Vorschau aktualisieren | ||
if (inputProps['generator-display'] === 'block') { | if (inputProps['generator-display'] === 'block') { | ||
| − | if( $("#betgr").is(':checked') ) $('#pStyleGenerator- | + | if( $("#betgr").is(':checked') ) $('#pStyleGenerator-blockPreview div').attr('style', attr + " " + gainmid.split('\n ').join(' ')); |
else $('#pStyleGenerator-blockPreview div').attr('style', attr + " " + gain.split('\n ').join(' ')); | else $('#pStyleGenerator-blockPreview div').attr('style', attr + " " + gain.split('\n ').join(' ')); | ||
} | } | ||
Version vom 2. September 2014, 19:51 Uhr
 |
Dieser Artikel ist in Arbeit • Letzte Bearbeitung: 02.09.2014
Hier nimmt Martinnitus Änderungen vor. Falls Du etwas dazu beitragen willst, melde Dich bitte in der Autorendiskussion oder in der Seitendiskussion. Nimm keine eigenmächtigen Änderungen vor, bis dieser Baustein vom Autor entfernt wurde. |
 |
Mit diesem Generator kannst du Stylesheets erstellen. Das Ergebnis wird als Quelltext oder Attributinhalt ausgegeben und kann fast überall in der Stupi genutzt werden.
In der rechten Spalte werden die Eingabefelder erklärt. Detailliertere Informationen zu den einzelnen Eigenschaften findest du hier. Die Links mit der Aufschrift Erweitert lassen zusätzliche Felder erscheinen, mit denen du die jeweilige Angabe für einzelne Seiten (links, rechts, oben, unten) abweichend festlegen kannst.
Formular
Vorschau
Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).
Dieser Text steht in dem Kasten, den du zu formatieren versuchst. Der kann beliebig lang sein.
Und dieser Text steht unterhalb des Kastens, wird also unter Umständen von der Textumflussangabe beeinflusst.
Mahlzeit! Dieser Text hier befindet sich vor dem formatierten Text. Dies ist der Teil der Zeile, den du zu formatieren versuchst. Der kann beliebig lang sein. Und dieser Text steht hinter dem formatierten Teil.
