Bu biçim kodu Firefox 3.0 için çok basit şekilde yapılabilecekken, Explorer desteği için ise javascript kullanımı gerekiyor.
Panoya iki ayrı bbcode ekleyip birlikte kullanıyoruz. Eğer istersek tek bir bbcode ile de yapabiliriz, ancak o durumda Explorer 7.0 aynı sayfada birden fazla renkli kutu olunca uyumlu çalışmıyor.
1. Bu bbcode her bir renkli kutunun kendisi olacak.
Biçim Kodu Kullanımı:
- Kod: Tümünü seç
[linkid={TEXT2}]{TEXT1}[/linkid]
Yerine konulacak html:
- Kod: Tümünü seç
<div id="{TEXT2}" class="comment">
{TEXT1}<a href="#{TEXT2}"> #</a></div>
Yardım metni:
- Kod: Tümünü seç
[linkid=URL#{TEXT2}]{Renkli Kutu Metini}[/linkid]
Örnek kullanım:
- Kod: Tümünü seç
[linkid=kural1d]1d. Lütfen tamamen büyük harfle yazmayın[/linkid]
2. Bu bbcode renkli kutuları içine alacak
Biçim Kodu Kullanımı:
- Kod: Tümünü seç
[colourbox]{TEXT}[/colourbox]
Yerine konulacak html:
- Kod: Tümünü seç
<head>
<title>Sons of Suckerfish - HTML Dog Blog - HTML Dog</title>
<style type="text/css">
.comment:target, .sftarget {
background-color: #ff9;
border: 2px dotted #fc3;
position: relative;
padding: 0 1em;
}
</style>
<script type="text/javascript">
function suckerfish(type, tag, parentId) {
if (window.attachEvent) {
window.attachEvent("onload", function() {
var sfEls = (parentId==null)?document.getElementsByTagName(tag):document.getElementById(parentId).getElementsByTagName(tag);
type(sfEls);
});
}
}
sfFocus = function(sfEls) {
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onfocus=function() {
this.className+=" sffocus";
}
sfEls[i].onblur=function() {
this.className=this.className.replace(new RegExp(" sffocus\\b"), "");
}
}
}
sfTarget = function(sfEls) {
var aEls = document.getElementsByTagName("A");
document.lastTarget = null;
for (var i=0; i<sfEls.length; i++) {
if (sfEls[i].id) {
if (location.hash==("#" + sfEls[i].id)) {
sfEls[i].className+=" sftarget";
document.lastTarget=sfEls[i];
}
for (var j=0; j<aEls.length; j++) {
if (aEls[j].hash==("#" + sfEls[i].id)) {
aEls[j].targetEl = sfEls[i];
aEls[j].onclick = function() {
if (document.lastTarget) document.lastTarget.className = document.lastTarget.className.replace(new RegExp(" sftarget\\b"), "");
this.targetEl.className+=" sftarget";
document.lastTarget=this.targetEl;
return true;
}
}
}
}
}
}
suckerfish(sfFocus, "INPUT");
suckerfish(sfFocus, "TEXTAREA");
suckerfish(sfTarget, "DIV", "content");
</script>
<body>
<div id="content">
{TEXT}
</div>
</body>
</html>
Yardım metni:
- Kod: Tümünü seç
[colourbox]{Renkli kutular ve linklerin olduğu}[/colourbox]
Örnek kullanım:
- Kod: Tümünü seç
[colourbox][linkid=kural1d]1d. Lütfen tamamen büyük harfle yazmayın[/linkid]
[linkid=kural1e]1e. Bana niçin cevap verilmiyor talebinde bulunmayın[/linkid]
[linkid=kural1f]1f. Yeni konu açmadan önce arama yapılır[/linkid]
[linkid=kural1j]1j. msn ile yardım istenmez.[/linkid][/colourbox]
Kaynak:
Suckerfish :target
The comments on the HTML Dog Blog
makalesi ve örnek sayfadan yararlanarak bbcode olarak yazdım..
Not:Test ettiğim Firefox 3.0.1 ve Safari 3.1.2 ile problemsiz, ancak Internet Explorer 7.0 ve Opera 9.51 de renkli kutu linklerinden birine tıkladıktan sonra bir diğerine tıklayınca ilk kutudaki rengi eski haline gelmiyor, bunun için sayfa tazelenmeli.
Düzenleme: Yazı düzeltmesi ve Safari - Opera test sonucu eklenmesi..
