Hilfe:Stylesheets/Generator: Unterschied zwischen den Versionen
K (auch nicht vergessen!) |
(Markierung: Widget installiert) |
||
Zeile 1: | Zeile 1: | ||
{{Inuse|1=Martinnitus}} | {{Inuse|1=Martinnitus}} | ||
+ | <html> | ||
+ | Mit diesem Generator kannst du <a href="/stupi/Hilfe:Stylesheets" title="Hilfe:Stylesheets">Stylesheets</a> 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 <a href="/stupi/Hilfe:Stylesheets/Gebräuchliche Syntaxen" title="Hilfe:Stylesheets/Gebräuchliche Syntaxen">hier</a>. Die Links mit der Aufschrift <b>Erweitert</b> lassen zusätzliche Felder erscheinen, mit denen du die jeweilige Angabe für einzelne Seiten (links, rechts, oben, unten) abweichend festlegen kannst. | |
− | + | <noscript><p class="error">Du musst JavaScript in deinem Browser aktivieren bzw. für diese Domain freigeben, damit der Generator funktioniert.</p></noscript> | |
− | < | + | <h3>Formular</h3> |
− | |||
− | |||
<html> | <html> | ||
<span id="dummy" style="display: none;"></span> | <span id="dummy" style="display: none;"></span> | ||
Zeile 24: | Zeile 24: | ||
<input type="text" name="color" /> | <input type="text" name="color" /> | ||
</td> | </td> | ||
− | <td>Kann eine beliebige Farbangabe sein, z. B. <code style="color: red;">red</code> oder <code style="color: #008000;">#008000</code>. Eine Auswahl von Farben gibt es in der </ | + | <td>Kann eine beliebige Farbangabe sein, z. B. <code style="color: red;">red</code> oder <code style="color: #008000;">#008000</code>. Eine Auswahl von Farben gibt es in der <a href="/stupi/Stupidedia:Farbtabelle" title="Stupidedia:Farbtabelle">Farbtabelle</a>.</td> |
</tr> | </tr> | ||
<tr> | <tr> | ||
Zeile 115: | Zeile 115: | ||
<td>Datei:</td> | <td>Datei:</td> | ||
<td><input type="text" class="backpic" /></td> | <td><input type="text" class="backpic" /></td> | ||
+ | </tr><tr> | ||
+ | <td>Dateigröße:</td> | ||
+ | <td><input type="text" class="backpicsize" /></td> | ||
</tr><tr> | </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> | <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> | ||
Zeile 568: | Zeile 571: | ||
</table> | </table> | ||
</form> | </form> | ||
− | < | + | <h3>Vorschau</h3> |
− | |||
− | |||
− | < | ||
<div id="pStyleGenerator-blockPreview"> | <div id="pStyleGenerator-blockPreview"> | ||
<p>Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).</p> | <p>Mahlzeit! Dieser Text hier befindet sich über dem Kasten. Genau genommen in einem p-Element (das entspricht einem Absatz).</p> | ||
Zeile 658: | Zeile 658: | ||
return false; | return false; | ||
}); | }); | ||
− | + | $('#pStyleGenerator-form input, #pStyleGenerator-form select, #pStyleGenerator-form option, #pStyleGenerator-form label').on('click change keyup keydown mouseover mouseout blur active', pStyleGenerator.refresh); | |
− | |||
− | |||
− | |||
− | |||
} | } | ||
+ | |||
+ | /*pStyleGenerator.filecheck = function( source, size ) { | ||
+ | var bild = new Image(); | ||
+ | bild.src = getFileSource( source, size ); | ||
+ | $( bild ).one('load', function() { | ||
+ | return getFileSource( source, size ); | ||
+ | }).one('error abort', function() { | ||
+ | return 'Das Bild kann nicht gefunden werden.'; | ||
+ | }); | ||
+ | }*/ | ||
pStyleGenerator.refresh = function() { | pStyleGenerator.refresh = function() { | ||
Zeile 671: | Zeile 677: | ||
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;} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
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 771: | Zeile 770: | ||
// Quelltext vorbereiten | // Quelltext vorbereiten | ||
− | var gradset = | + | var gradset = [ |
− | + | $("input[class='gradient-1']").val(), | |
− | + | "-moz-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%, " + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "-webkit-gradient(linear, left top, left bottom, color-stop(0%," + $("input[class='gradient-1']").val() + "), color-stop(100%," + $("input[class='gradient-2']").val() + "))", | |
− | + | "-webkit-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "-o-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "-ms-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "linear-gradient(to bottom, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-2']").val() + " 100%)", | |
− | // | + | //"progid:DXImageTransform.Microsoft.gradient( startColorstr='" + $("input[class='gradient-1']").val() + "', endColorstr='" + $("input[class='gradient-2']").val() + "', GradientType=0 );" |
− | + | ]; | |
− | var gradsetmid = | + | var gradsetmid = [ |
− | + | $("input[class='gradient-1']").val(), | |
− | + | "-moz-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "-webkit-gradient(linear, left top, left bottom, color-stop(0%," + $("input[class='gradient-1']").val() + "), color-stop("+$("input[class='graper']").val()+"%," + $("input[class='gradient-1a']").val() + "), color-stop(100%," + $("input[class='gradient-2']").val() + "))", | |
− | + | "-webkit-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "-o-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "-ms-linear-gradient(top, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "linear-gradient(to bottom, " + $("input[class='gradient-1']").val() + " 0%," + $("input[class='gradient-1a']").val() + " "+$("input[class='graper']").val()+"%, " + $("input[class='gradient-2']").val() + " 100%)", | |
− | + | "progid:DXImageTransform.Microsoft.gradient( startColorstr='" + $("input[class='gradient-1']").val() + "', endColorstr='" + $("input[class='gradient-2']").val() + "', GradientType=0 );" | |
− | + | ]; | |
var gain = ""; | var gain = ""; | ||
var gainmid = ""; | var gainmid = ""; | ||
− | $.each(gradset, function( | + | $.each(gradset, function() { |
− | + | gain = gain + "\n background: " + this + ";"; | |
− | |||
}); | }); | ||
− | $.each(gradsetmid, function( | + | $.each(gradsetmid, function() { |
− | + | gainmid = gainmid + "\n background: " + this + ";"; | |
− | |||
}); | }); | ||
switch(bgset){ | switch(bgset){ | ||
Zeile 816: | Zeile 813: | ||
break; | break; | ||
} | } | ||
+ | var backpic = $("input[class='backpic']").val().replace(new RegExp('Datei:','g'), ''); | ||
+ | var backpicsize = $("input[class='backpicsize']").val().replace(new RegExp('px','g'), ''); | ||
switch (inputProps['generator-output']) { | switch (inputProps['generator-output']) { | ||
case 'div': | case 'div': | ||
if(bgset===3 && $("input[class='backpic']").val()!=="" ){ | if(bgset===3 && $("input[class='backpic']").val()!=="" ){ | ||
− | + | var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("' + getFileSource( backpic , backpicsize ) + '");}}\n<div'; | |
− | |||
} | } | ||
else{var output = '<div';} | else{var output = '<div';} | ||
Zeile 831: | Zeile 829: | ||
case 'span': | case 'span': | ||
if(bgset===3 && $("input[class='backpic']").val()!=="" ){ | if(bgset===3 && $("input[class='backpic']").val()!=="" ){ | ||
− | + | var output = '{{#vardefine:num|{{#expr:{{#var:num}}+1}}}}{{#widget:CSS|selectors=#num{{#var:num}}|style=background-image: url("' + getFileSource( backpic , backpicsize ) + '");}}\n<span'; | |
− | |||
} | } | ||
else{var output = '<span';} | else{var output = '<span';} | ||
Zeile 843: | Zeile 840: | ||
case 'attribute': | case 'attribute': | ||
if(bgset===3 && $("input[class='backpic']").val()!=="" ){ | if(bgset===3 && $("input[class='backpic']").val()!=="" ){ | ||
− | + | var output = attri + " " + "background-image: url('" + getFileSource( backpic , backpicsize ) + "');"; | |
− | |||
}else{ | }else{ | ||
var output = attri; | var output = attri; | ||
Zeile 852: | Zeile 848: | ||
var output = ''; | var output = ''; | ||
if(bgset===3 && $("input[class='backpic']").val()!==""){ | if(bgset===3 && $("input[class='backpic']").val()!==""){ | ||
− | + | output += ' ' + 'background-image: url("' + getFileSource( backpic , backpicsize ) + '");\n'; | |
− | |||
} | } | ||
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 (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()!=="" ) { | ||
Zeile 868: | Zeile 863: | ||
if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n ').join(' ');} | if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n ').join(' ');} | ||
else{var prevatt = attr + " " + gain.split('\n ').join(' ');} | else{var prevatt = attr + " " + gain.split('\n ').join(' ');} | ||
− | if(bgset===3 && $("input[class='backpic']").val()!=="" && $('#dummy').html() !== ""){prevatt = prevatt + ' ' + 'background-image: url(" | + | if(bgset===3 && $("input[class='backpic']").val()!=="" && $('#dummy').html() !== ""){prevatt = prevatt + ' ' + 'background-image: url("' + getFileSource( backpic , backpicsize ) + '");';} |
$('#pStyleGenerator-blockPreview div').attr('style', prevatt); | $('#pStyleGenerator-blockPreview div').attr('style', prevatt); | ||
} | } | ||
Zeile 874: | Zeile 869: | ||
if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n ').join(' ');} | if( $("#betgr").is(':checked') ){var prevatt = attr + " " + gainmid.split('\n ').join(' ');} | ||
else{var prevatt = attr + " " + gain.split('\n ').join(' ');} | else{var prevatt = attr + " " + gain.split('\n ').join(' ');} | ||
− | if(bgset===3 && $("input[class='backpic']").val()!=="" && $('#dummy').html() !== ""){prevatt = prevatt + ' ' + 'background-image: url(" | + | if(bgset===3 && $("input[class='backpic']").val()!=="" && $('#dummy').html() !== ""){prevatt = prevatt + ' ' + 'background-image: url("' + getFileSource( backpic , backpicsize ) + '");';} |
$('#pStyleGenerator-inlinePreview span').attr('style', prevatt); | $('#pStyleGenerator-inlinePreview span').attr('style', prevatt); | ||
} | } |
Version vom 15. November 2014, 13:38 Uhr
Dieser Artikel ist in Arbeit • Letzte Bearbeitung: 15.11.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).
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.