Активно меняйте цвет фона и цвет текста

-2

Я пытаюсь активно менять цвет фона и цвет текста на основе выбора пользователей, и, похоже, это не обманет, вот что я до сих пор прекрасно работаю, используя jquery color picker. Я JQuery новичок поэтому, пожалуйста, комментарии кодАктивно меняйте цвет фона и цвет текста

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Color Picker</title> 
    <meta charset="utf-8"> 
    <link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all"> 
    <link href="http://nitrouscms.com/css/demo.css" rel="stylesheet" /> 
    <link href="http://nitrouscms.com/css/evol.colorpicker.min.css" rel="stylesheet" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script> 
    <script src="http://nitrouscms.com/js/evol.colorpicker.min.js" type="text/javascript"></script> 
</head> 

<body bgcolor="#E6E6FA"> 

<form action="Test.pl" name="FormSubmit"> 

<div class="demoPanel" style="width:130px"> 
Font Color<input id="FontColor" Name="FontColor" value="#31859b" /> 
</div> 

<div class="demoPanel" style="width:130px"> 
BG Color<input id="BackgroundColor" Name="BackgroundColor" value="#31859b" /> 
</div> 

<div style="clear:both;"></div> 

<br /> 

<input type="button" value="Save"> 

</form> 

<p>This is my test text that I would like to change color.</p> 

<script> 
$(document).ready(function(){ 

    // Instanciate colorpickers 
    $('#FontColor').colorpicker(); 
    $('#BackgroundColor').colorpicker(); 

    $('#show').on('click', function(evt){ 
     evt.stopImmediatePropagation(); 

    }); 

}); 

</script> 

</body> 
</html>

источник

2015-11-25 Bill

[JQuery CSS] (HTTP: // апи. jquery.com/css/) – epascarello

Просто возьмите значение из ColorPicker, используя событие color.change и установить его обновить с помощью функции .css JQuery. Это описано в GitHub документации ColorPicker вы используете, я рекомендую прочитать его ColorPicker Github Documentation

Пример кода:

<html xmlns="http://www.w3.org/1999/xhtml"> 
 

 
<head> 
 
    <title>Color Picker</title> 
 
    <meta charset="utf-8"> 
 
    <link id="jquiCSS" rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ui-lightness/jquery-ui.css" type="text/css" media="all"> 
 
    <link href="http://nitrouscms.com/css/demo.css" rel="stylesheet" /> 
 
    <link href="http://nitrouscms.com/css/evol.colorpicker.min.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type="text/javascript"></script> 
 
    <script src="http://nitrouscms.com/js/evol.colorpicker.min.js" type="text/javascript"></script> 
 
</head> 
 

 
<body bgcolor="#E6E6FA"> 
 

 
    <form action="Test.pl" name="FormSubmit"> 
 

 
    <div class="demoPanel" style="width:130px"> 
 
     Font Color 
 
     <input id="FontColor" Name="FontColor" value="#31859b" /> 
 
    </div> 
 

 
    <div class="demoPanel" style="width:130px"> 
 
     BG Color 
 
     <input id="BackgroundColor" Name="BackgroundColor" value="#31859b" /> 
 
    </div> 
 

 
    <div style="clear:both;"></div> 
 

 
    <br /> 
 

 
    <input type="button" value="Save" id="save-button"> 
 

 
    </form> 
 

 
    <p>This is my test text that I would like to change color.</p> 
 
    <script> 
 
    $(document).ready(function() { 
 

 
     // Instanciate colorpickers 
 
     $('#FontColor').colorpicker().on("change.color", function(event, color) { 
 
     $('body').css('color', color); 
 
     }); 
 
     $('#BackgroundColor').colorpicker().on("change.color", function(event, color) { 
 
     $('body').css('background-color', color); 
 
     });; 
 

 
    }); 
 
    </script>

источник

2015-11-25 19:07:10 claytoncasey01

Извините claytoncasey01 Я хочу сделать это, не нажимая кнопку сохранения. «Вкл. Выбор» кнопка сохранения была включена после завершения выбора пользователей. – Bill

@Bill Обновлен пример кода, чтобы изменить цвет при необходимости при выборе этого цвета в подборщике цветов. Надеюсь, это то, что вам нужно. – claytoncasey01

Активно меняйте цвет фона и цвет текста

ответ

Смежные вопросы