kaxigt.com

Börja med att ha filerna quicktags.js och din stilmall öppna. De som använder sig av position float vet att man ofta behöver bryta denna kod. Vi ska nu titta på hur man kan skapa knappar för clear/float.

Du kan bryta position float på tre vis:

Dels genom att använda det mest förekommande attributet clear:both i de fall du arbetar med två block där det ena kanske ligger i position:relative och sedan har ett block float:right vid sidan av som display:inline.

Dels med clear:left om ett block eller text är positionerad till float:left.

Och dels med clear:right om ett block eller text är placerat till höger.

Floattutorials: Relative – absolute – float och z-index

Snabbknappar för position clear/float

Tre kodblock att använda sig av, kopiera gärna om du vill:

edButtons[edButtons.length] =
new edButton('ed_clearleft'
,'clearleft'
,'class="clear:left;">'
,''
,'clearleft'
);

edButtons[edButtons.length] =
new edButton('ed_clearright'
,'clearright'
,'class="clear:right;">'
,''
,'clearright'
);

edButtons[edButtons.length] =
new edButton('ed_clearboth'
,'clearboth'
,'class="clear:both;"'
,''
,'clearboth'
);

Dessa tre koder plus koden för target är kodsnuttar som ska bäddas in i redan befintlig kod. Man kan alltså inte bara trycka på knappen och tro att de fungerar utan koderna definierar en annan kod, exempelvis div, p, style, br och hr.

Som ni ser är class-attributen också inbakade i koden. Class-attribut är annars något som stilmallen sköter om men just dessa koder behöver ingen egentlig css-formatering. Däremot finns det ett clearattribut som definieras i stilmallen och det är ett csshack som ser ut så här (hämtat från stilmallen):

.clearfix:after {content: "."; display: block; height: 0; clear: both; 
visibility: hidden;}
.clearfix{display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix{height: 1%;}
.clearfix{display: block;}
/* End hide from IE-mac */

En specifik clearknapp till koden ser ut så här och även denna ger en inbäddad kodsnutt:

edButtons[edButtons.length] =
new edButton('ed_clearfix'
,'clearfix'
,'class="clearfix"'
,''
,'clearfix'
);

Man kan också bädda in en hel cssdefinition i guicktagkoden. I det här fallet har jag gjort en hel kod som både öppnas och avslutas. Den kan ligga som som separat paragraf men även vara inbäddad i befintlig text.

edButtons[edButtons.length] =
new edButton('ed_auth'
,'auth'
,'<font style="color:#B06523;">'
,'</font>'
,'auth'
);

Rad fyra öppnar koden, man ser det med öppningstaggen.

Därefter har jag definierat med css vad koden ska utföra (textfärg – color. Här kan man även lägga till textstorlek om man vill).

Rad fem avslutar koden med sluttaggen. Jag har valt att kalla knappen för auth som är en förkortning för author – det vill säga den som skriver, men man kan absolut ändra till något annat.

Sist ska vi kika hur man kan kalla på specifika block som definieras i stilmallen.