This topic is locked

Color Picker Support?

7/6/2012 2:55:49 PM
PHPRunner General questions
M
mikeaccess author

Does PHPRunner 6.1 Support the YUI Color Picker Widget, JSColor or some other color picker to allow the user to select color values from a color picker instead of having to enter the hex value for the color as text in a text field?
It would be really nice if PHPRunner had an "Edit As" option of "Color Picker" where when you click in the field it brings up a pop up color picker, in the color picker you select your color, it then sets the field value to the Hex Value of the selected color and sets the background color of the field (or the background color of a box next to the field) to the selected color, thus providing visual feedback of the color the user selected.
Seems this would be an easy function for xlinesoft to add, especially where they use YUI. It would be a very helpful addition to PHP runner!!!!

C
cgphp 7/6/2012

You can add the colopicker feature yourself. Check this link: http://www.jquery4u.com/tag/jquery-color-picker/#.T_c1OXB8nfY

M
mikeaccess author 7/6/2012

Okay, so where in phpRunner do I load the jquery files, setup the css, code the javascript and how do I link it to the desired field, as in the following code?
<link rel="stylesheet" href="ui.colorpicker.css"/>

<style type="text/css">

body { font-family: verdana, arial, sans-serif; color: white; background-color: black; font-size: 0.8em; }

bg fieldset { border-width: 1px; width: 460px; }

bg .fields { padding: 25px; margin-bottom: 20px; }

bg div { clear: both; }

bg label { float: left; width: 85px; }

bg input { float: left; width: 190px; }

.ui-colorpicker input { float: none; width: auto; height: auto; }

bg .submit { margin-top: 40px; text-align: center; }

</style>
<script language="JavaScript" src="jq.js"></script>

<script language="JavaScript" src="jq.color.js"></script>

<script language="JavaScript">
$(document).ready(function() {
var hideit = function(e, ui) { $(this).val('#'+ui.hex); $('.ui-colorpicker').css('display', 'none'); };

$('#bg #colorpicker').colorpicker({ hide: hideit, submit: hideit });
$('#dochange').click(function() {
$('body').css('background-color', $('#colorpicker').val());
return false;

});
});
</script>