JqxColorPicker: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
 
(5 intermediate revisions by 2 users not shown)
Line 2: Line 2:


== Description ==
== Description ==
The ColorPicker control lets you easily select a color. It is based on the jqWidgets jqxColorPicker widget.
The ColorPicker control lets you easily select a color. It is based on the jqWidgets jqxColorPicker widget. On a mobile, clicking on the control works properly, but drag might not be supported.
 
jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.


== Properties and Methods ==
== Properties and Methods ==


See the complete documentation at jqWidget's site:
This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxColorPicker/jquery-colorpicker-getting-started.htm


== Example ==
== Example ==
Line 20: Line 21:
</pre>
</pre>


==== change (JavaScript) ====
Change picker to hue or saturation mode:
<pre>
<pre>
JavaScript
    $("#ColorPicker1").jqxColorPicker({ colorMode: "hue" });
$('#Rating1').bind('change', function (event)
    {  
      var curValue= event.value;
      alert(curValue);
    });
End JavaScript


    $("#ColorPicker1").jqxColorPicker({ colorMode: "saturation" });
</pre>
</pre>


=== Functions ===
==== oncolorchange (JavaScript) ====
 
==== Disable Rating ====
<pre>
<pre>
Rem disable rating
ColorPicker1.oncolorchange = function() {
Function Button1_onclick()
   color=$("#ColorPicker1").jqxColorPicker("getColor");
   $("#Rating1").jqxRating({disabled:True})
  Document.getElementById('TextBox1').style.color="RGB("+color.r+", "+color.g+", "+color.b+");";
End Function
}
</pre>
</pre>


==== Enable Rating ====
Change picker to hue or saturation mode:
 
<pre>
<pre>
Rem enable rating
    $("#ColorPicker1").jqxColorPicker({ colorMode: "hue" });
Function Button2_onclick()
  $("#Rating1").jqxRating({disabled:False})
End Function
</pre>
 
==== Set Rating Value ====
<pre>
Rem Set rating value 5*
Function Button3_onclick()
  $("#Rating1").jqxRating({value:5})
End Function
</pre>
 
==== Get Rating Value ====
<pre>
Rem Get rating value
Function Button4_onclick()
  Dim curValue
  curValue = $("#Rating1").jqxRating("value")
  MsgBox "Current Value is : " & curValue
End Function


    $("#ColorPicker1").jqxColorPicker({ colorMode: "saturation" });
</pre>
</pre>



Latest revision as of 17:14, 7 April 2016

Description

The ColorPicker control lets you easily select a color. It is based on the jqWidgets jqxColorPicker widget. On a mobile, clicking on the control works properly, but drag might not be supported.

jqWidgets is a commercial product, which depending on how you use it, requires a license fee. Complete details are on jqWidget's website. The product is well supported.

Properties and Methods

This control is well documented on the jqWidget's website: http://www.jqwidgets.com/jquery-widgets-documentation/.

Example

Events

oncolorchange (BASIC)

Function ColorPicker1_oncolorchange()
  color=$("#ColorPicker1").jqxColorPicker("getColor")
  TextBox1.text=RGB(color.r, color.g, color.b)
End Function

Change picker to hue or saturation mode:

    $("#ColorPicker1").jqxColorPicker({ colorMode: "hue" });

    $("#ColorPicker1").jqxColorPicker({ colorMode: "saturation" });

oncolorchange (JavaScript)

ColorPicker1.oncolorchange = function() {
  color=$("#ColorPicker1").jqxColorPicker("getColor");
  Document.getElementById('TextBox1').style.color="RGB("+color.r+", "+color.g+", "+color.b+");";
}

Change picker to hue or saturation mode:

    $("#ColorPicker1").jqxColorPicker({ colorMode: "hue" });

    $("#ColorPicker1").jqxColorPicker({ colorMode: "saturation" });

Output

See above.