Javascript - Tworzenie palety kolorów


(A658691) #1

Witam serdecznie!

Jak zrobić palete kolorów jak np na tym forum przy zmianie koloru czcionki?


(Grzelix) #2

Możesz to zrobić na hmm ... milion sposobów,

Jednym z prostszych będzie wykorzystanie jakieś biblioteki js np http://jscolor.com/

albo konkretnej kontrolki z color picker.


(A658691) #3

Dziękuje bardzo o takie coś mi chodziło.

Teraz zrobiłem to tak:

w skrypcie js odpowiedzialnym za dodawanie tagów itd.. dodałem:

document.write("");[/code]


tak wygląda funkcja dodawania tagów:

[code]function doAddTags(tag1,tag2,obj) { textarea = document.getElementById(obj); // Code for IE if (document.selection) { textarea.focus(); var sel = document.selection.createRange(); //alert(sel.text); sel.text = tag1 + sel.text + tag2; } else { // Code for Mozilla Firefox var len = textarea.value.length; var start = textarea.selectionStart; var end = textarea.selectionEnd; var scrollTop = textarea.scrollTop; var scrollLeft = textarea.scrollLeft; var sel = textarea.value.substring(start, end); //alert(sel); var rep = tag1 + sel + tag2; textarea.value = textarea.value.substring(0,start) + rep + textarea.value.substring(end,len); textarea.scrollTop = scrollTop; textarea.scrollLeft = scrollLeft; } }
Zaznaczam tekst, klikam na ikonke kolor i tagi ładnie wchodzą. Efekt jest taki:

[color=]Jakiś tekst[/color]

. na głównej stronie, zgodnie z zaleceniami dodałem:

Wszystko działa fajnie. Tylko jak po kliknięciu w ten przycisk Color on automatycznie będzie dodawał do tagu? Chodzi mi o to, że no wybiorę kolor: #66FF00 Potem zaznaczę tekst, kliknę na przycisk Color i zamiast:

[color=]Jakiś tekst[/color]

. pojawi mi się:

[color=#66FF00]Jakiś tekst[/color]

.

Prosże o pomoc. :slight_smile:


(Grzelix) #4

Fragment:

document.write("");[/code]




należy uzupełnić o wybrany kolor a więc:

1. Dla js należy używać id więc dodajemy do inputa id:

2. Zczytać kod koloru z inputa: W zależności czy używasz jquery:
    var selectedColor = $("#colorPickerForBBCode").val();
lub czysty java script:
    var selectedColor = document.getElementById("colorPickerForBBCode").value;
3. Użyć zmiennej w dodawania taga.
    document.write("");

Pisane z palce, możliwe literówki.


(A658691) #5

Obecnie zrobiłem to tak:

document.write("");[/code]


oraz

[code] function checkElement() { document.getElementById("colorPickerForBBCode").value; }
Ale w efekcie dostaje:

Próbowałem to:

('[color=#'+ checkElement+']

, zamienić na:

('[color=#"+ checkElement+"]

, ale bez efektu.

Pomożecie?


(Drobok) #6

Funkcję wywołuje się z nawiasami


(A658691) #7

zmieniłem na:

document.write("");[/code]

a w efekcie dostaje taki tekst:

[color=#undefined]This is a sample text[/color]

Czyli wrócilismy do punktu wyjscia :frowning:

-- Dodane 16.09.2013 (Pn) 10:59 --

Dla potomności:

zapomniałem dodać "return". :slight_smile: