Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > выбор цвета пользователе

Автор: nerezus 15.4.2008, 07:22

Пользователю нада ввести цвет в RRGGBB формате. Надо бы ему дать панельку, где он выберет сабж. Никто решений не подскажет?

Автор: bars80080 15.4.2008, 09:33

давно хотел такую панельку, вот сойдёт?
main_file

Код

<script>
function color_ch(x) {
    colwin = "color_choose.php?badr=" + x;
    myWin = open(colwin, "colorWindow", "width=540,height=120"); }
</script>
<input type="text" name="color" id="color1" />
<input type="button" value="выбрать цвет" onclick="color_ch('color1');" />

color_choose.php

Код

<html><head><title>Выберите цвет</title>
<style>
* { margin: 0px; padding: 0px; }
body { background: #ffff99; }
table { border-collapse: collapse; float: left; margin: 15px 0px; cursor: hand; }
td { width: 15px; height: 15px; }
</style>
<script language="JavaScript"> 
var badr = "<?=$_GET['badr']?>";
function r(x) {
    window.opener.document.getElementById(badr).value = x;
    self.close(); }
</script></head>
<body><table>   
<?
for($z = 0; $z < 6; $z++) { 
    echo '<tr>'; $hi = base_convert($z*3, 10, 16); $ii = $hi.$hi;
    for($j = 0; $j < 6; $j++) { 
        $hj = base_convert($j*3, 10, 16); $jj = $hj.$hj;
        for($k = 0; $k < 6; $k++) {    
            $hk = base_convert($k*3, 10, 16); $kk = $hk.$hk; $aa = '#'.$jj.$ii.$kk;
            if($z < 3) $bb = '#ffffff'; else $bb = '#000000'; ?>
            <td bgcolor="<?=$aa?>" onclick="r('<?=$aa?>');"></td>
            <? }}
    echo '</tr>'; } ?>
</table></body></html>

Автор: nerezus 15.4.2008, 10:40

Угу, спасиб, немного модифицировал:

Код


<script>
function color_ch(x) {
    colwin = "/ext/color_choose.php?target=" + x;
    myWin = open(colwin, "colorWindow", "width=770,height=600"); }
</script>
<input type="text" name="color" id="color1" />
<input type="button" value="выбрать цвет" onclick="color_ch('color1');" />

Код


<html><head><title>Выберите цвет</title>
<style>
* { margin: 0px; padding: 0px; }
body { background: #ffff99; }
table { border-collapse: collapse; float: left; margin: 15px 0px; cursor: hand; }
td { width: 12px; height: 12px; }
</style>
<script language="JavaScript"> 
var target = "<?=$_GET['target']?>";
function setcolor(x) {
    window.opener.document.getElementById(target).value = x;
    self.close(); }
</script></head>
<body><table>   
<?php
for ($dark = -4; $dark<2; $dark++) {
    for($g = 0; $g < 8; $g++) { 
        echo '<tr>'; 
        for($r = 0; $r < 8; $r++) { 
            for($b = 0; $b < 8; $b++) {    
                $d = 1 + 0.1*$dark;
                $cg = base_convert($g*2*$d %255, 10, 16);
                $cr = base_convert($r*2*$d % 255, 10, 16);
                $cb = base_convert($b*2*$d % 255, 10, 16);
                $color = '#'.$cr.$cr.$cg.$cg.$cb.$cb;
                //if($g < 3) $bb = '#ffffff'; else $bb = '#000000'; ?>
                <td bgcolor="<?=$color?>" onclick="setcolor('<?=$color?>');"></td><?
            }
        }
        echo '</tr>';
    }
}
?></table></body></html>

Но нету в аналоговой форме чего-нить? С ползунками и т.д.

Автор: bars80080 15.4.2008, 11:07

Цитата(nerezus @ 15.4.2008, 10:40

)

аналоговой форме чего-нить? С ползунками и т.д.

это как?

Автор: Itsys 15.4.2008, 14:11

Посмотри в коллекциях скриптов, по идее, на JS должны были что-нибудь подобное сделать

Автор: bars80080 15.4.2008, 15:49

кстати, подумал, что удобней будет без пхп

Код

<html><head><title>Выберите цвет</title>
<style>
* { margin: 0px; padding: 0px; }
body { background: #ffff99; }
table { border-collapse: collapse; float: left; margin: 15px 0px; /*cursor: hand;*/ }
td { width: 15px; height: 15px; }
</style>
<script> 
var badr = "<?=$_GET['badr']?>";
function r(x) {
    window.opener.document.getElementById(badr).value = x;
    self.close(); }
</script></head>
<body><table id="t1"></table>   
<script>
table = document.getElementById('t1');
var hex = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
for(i = 0; i < 6; i++) {
    row = table.insertRow(0); ii = hex[i*3] + '' + hex[i*3];
    for(j = 0; j < 6; j++) {
        jj = hex[j*3] + '' + hex[j*3];
        for(k = 0; k < 6; k++) {
            kk = hex[k*3] + '' + hex[k*3];
            aa = '#' + jj + ii + kk;
            cell = row.insertCell(0); cell.bgColor = aa; 
            cell.aa = aa;
            cell.onclick = function(){r(this.aa);};
        }}}
</script>
</body></html>

Автор: ksnk 15.4.2008, 16:10

http://debugger.ru/demo/projects/colorpicker/

Автор: nerezus 15.4.2008, 21:17

ksnk, спасибо, то, что нужно!!