Tutorial : BBCode JS .

In jos

Tutorial : BBCode JS .

Mesaj Scris de struMf la data de Vin Iul 20, 2012 4:25 pm

Salut Vizitator astazi am sa-ti arat cum poti adauga un nou buton in bbcode cu ajutorul javascript .

Rezultat :

Spoiler:

Primul Cod se pune in PA > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript

Titlu * : bbcode

Amplasare : Toate paginile

Cod JavaScript * :

Cod:
$(document).ready(function(){
$('#text_edit').after('<div style="display:inline!important" id="text_editor_select_controls"><div class="select" id="notes"><button onclick="bbfontstyle(\'[table class=noteclassic][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/note10.png">Classic note</button><button onclick="bbfontstyle(\'[table class=notetip][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/tip10.png">Tip note</button><button onclick="bbfontstyle(\'[table class=notewarning][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Warning note</button><button onclick="bbfontstyle(\'[table class=notebifat][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Bifat note</button><button onclick="bbfontstyle(\'[table class=noteimportant][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/imp10.png">Important note</button><button onclick="bbfontstyle(\'[table class=notetabelmoderare][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Tabel Moderare</button><button onclick="bbfontstyle(\'[table class=noteerror][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Suggest note</button><button onclick="bbfontstyle(\'[table class=notesuggest][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Suggest note</button><button onclick="bbfontstyle(\'[table class=notevalidation][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Validation note</button><button onclick="bbfontstyle(\'[table class=notehelp][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/help10.png">Help note</button></div></div><button class="button2" onclick="selectWysiwyg(this,\'notes\')" onmouseover="helpline(\'BBcode notes\')" type="button"><img src="/users/2611/10/63/87/album/inote10.gif" /></button> <img src="http://illiweb.com/fa/wysiwyg/separator.png" style="horizontal-align: middle;"> ');
});

Al Doilea Cod se pune in PA > Module > HTML & JAVASCRIPT > Gestiunea codurilor JavaScript

Titlu * : wwewe

Amplasare : Subforumuri
&
Topicuri

Cod JavaScript * :

Cod:
$(function(){$("<div style=\"display:inline!important\" id=\"text_editor_select_controls\"><div style=\"visibility:hidden\" class=\"select\" id=\"notes\"><button onclick=\"bbfontstyle('[table class=noteclassic][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/note10.png\">Classic note</button>
<button onclick=\"bbfontstyle('[table class=notetip][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/tip10.png\">Tip note</button>
<button onclick=\"bbfontstyle('[table class=notewarning][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/warn10.png\">Warning note</button>
<button onclick=\"bbfontstyle('[table class=noteimportant][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/imp10.png\">Important note</button><button onclick="bbfontstyle(\'[table class=notetabelmoderare][tr][td]\',\'[/td][/tr][/table]\');selectWysiwyg(this,\'notes\');return false"><img src="/users/2611/10/63/87/album/warn10.png">Tabel Moderare</button>
<button onclick=\"bbfontstyle('[table class=notehelp][tr][td]','[/td][/tr][/table]');selectWysiwyg(this,'notes');return false\"><img src=\"/users/2611/10/63/87/album/help10.png\">Help note</button></div></div><button class=\"button2\" onclick=\"selectWysiwyg(this,'notes')\" onmouseover=\"helpline('BBcode notes')\" type=\"button\"><img src=\"/users/2611/10/63/87/album/inote10.gif\" /></button> <img src=\"http://illiweb.com/fa/wysiwyg/separator.png\" style=\"vertical-align: middle;\"> ").append("#text_edit");$(".noteclassic, .noteimportant, .notewarning, .notetip, .notehelp").css({"box-shadow":"2px 2px 3px #999999","width":"95%","border-radius":"10px 10px","-moz-border-radius":"10px 10px","-webkit-border-radius":"10px 10px","padding":"25px 20px 15px 80px","margin":"10px 0px 15px 5px","-webkit-box-shadow":"2px 2px 3px #999","-moz-box-shadow":"2px 2px 3px #999","min-height":"40px","height":"auto !important","height":"40px","overflow":"visible","position":"relative","top":"6px","left":"5px","border":"1px solid #999999","background-position":"20px 50%","background-repeat":"no-repeat","text-align":"justify"});$(".noteclassic").css({"background-color":"#EEF","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/note10.png)"});$(".noteimportant").css({"background-color":"#FFC","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/import10.png)"});$(".notewarning").css({"background-color":"#FDD","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/warnin10.png)"});$(".notetip").css({"background-color":"#E4F6F8","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/tip10.png)"});$(".notehelp").css({"background-color":"#D8F3C9","background-image":"url(http://i20.servimg.com/u/f20/14/50/49/34/help10.png)"})});

Al treilea cod se pune in PA > Afisare > Imagini si culori > Culori > Foaie de stil CSS .

Cod:
/*BBCode*/
.noteclassic, .noteimportant, .notewarning, .notetip, .notehelp, .notesuggest, .notevalidation, .noteerror, .notetabelmoderare{
box-shadow: 2px 2px 3px #999999;
width:650px;
border-radius:10px 10px;
-moz-border-radius:10px 10px;
-webkit-border-radius:10px 10px;
padding:25px 20px 15px 80px;
margin:10px 0px 15px 5px;
-webkit-box-shadow:2px 2px 3px #999;
-moz-box-shadow:2px 2px 3px #999;
min-height:40px;
height:auto !important;
overflow:visible;
position:relative;
top:6px;
left:5px;
-moz-box-shadow: 0px 0px 6px #0066ff;
-webkit-box-shadow: 0px 0px 6px #0066ff;
box-shadow: 0px 0px 6px #0066ff;
border-radius: 5px;
border:1px solid #999999;
background-position:20px 50%;
background-repeat:no-repeat;
}
.noteclassic {
background-color:#EEF;
background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/note10.png);
}
.noteimportant {
background-color:#FFC;
background-image:url(http://i44.servimg.com/u/f44/16/84/62/04/info10.png);
}
.notewarning {
background-color: #FDD;
background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/warnin10.png);
}
.notetip {
background-color:#E4F6F8;
background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/tip10.png);
}
.notehelp {
background-color:#D8F3C9;
background-image:url(http://i20.servimg.com/u/f20/14/50/49/34/help10.png);
}

.notesuggest{
background-color:#F1AF84;
background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_h10.png);
}

.notevalidation{
background-color:#FFCCBA;
background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_v10.png);
}

.noteerror{
background-color:#FFBABA;
background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_r10.png);
}

.notesuccess{
background-color:#DFF2BF;
background-image:url(http://i48.servimg.com/u/f48/16/28/30/49/knob_v10.png);
}

.notetabelmoderare {
background-color:#004D99;
background-image:url(http://i44.servimg.com/u/f44/16/84/62/04/warnin14.png);
    }

    .tabelmoderare {
    background: #FAADAD;
    border: 1px solid #C20000;
  -moz-box-shadow: 0px 0px 6px #0066ff;
-webkit-box-shadow: 0px 0px 6px #0066ff;
box-shadow: 0px 0px 6px #0066ff;
border-radius: 5px;
border:1px solid #999999;
background-position:20px 50%;
background-repeat:no-repeat;
    width: 100%;
    padding: 3px;
    border-radius: 4px;
    color: #A11F1F;
    text-shadow: 0px 0px 0px white;
    }
/*End BBCode*/








Like a Star @ heaven Absent timp de 20 de zile . Like a Star @ heaven
avatar
struMf
Membru Coding-Help

Numarul Mesajelor : 224
Reputatie de puncte : 478
Inscris din : 19/07/2012
Varsta : 23
Localizare : Constanta .

Vezi profilul utilizatorului http://coding-help.forumz.ro/

Sus In jos

Sus

- Subiecte similare

 
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum