PageRenderTime 62ms CodeModel.GetById 29ms RepoModel.GetById 1ms app.codeStats 0ms

/wp-content/plugins/styles-with-shortcodes/options-panel/colorpicker/index.html

https://bitbucket.org/andydahl/5star
HTML | 184 lines | 183 code | 1 blank | 0 comment | 0 complexity | 3ea9c1d2d017e8b47a343fbee948ee12 MD5 | raw file
Possible License(s): AGPL-1.0, BSD-3-Clause, GPL-3.0, LGPL-3.0, LGPL-2.1, GPL-2.0 
    

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

    3. 

  3. <head>

    4. 

  4. 	<link rel="stylesheet" href="css/colorpicker.css" type="text/css" />

    5. 

  5.     <link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />

    6. 

  6.     <title>ColorPicker - jQuery plugin</title>

    7. 

  7. 	<script type="text/javascript" src="js/jquery.js"></script>

    8. 

  8. 	<script type="text/javascript" src="js/colorpicker.js"></script>

    9. 

  9.     <script type="text/javascript" src="js/eye.js"></script>

    10. 

  10.     <script type="text/javascript" src="js/utils.js"></script>

    11. 

  11.     <script type="text/javascript" src="js/layout.js?ver=1.0.2"></script>

    12. 

  12. </head>

    13. 

  13. <body>

    14. 

  14.     <div class="wrapper">

    15. 

  15.         <h1>Color Picker - jQuery plugin</h1>

    16. 

  16.         <ul class="navigationTabs">

    17. 

  17.             <li><a href="#about" rel="about">About</a></li>

    18. 

  18.             <li><a href="#download" rel="download">Download</a></li>

    19. 

  19.             <li><a href="#implement" rel="implement">Implement</a></li>

    20. 

  20.         </ul>

    21. 

  21.         <div class="tabsContent">

    22. 

  22.             <div class="tab">

    23. 

  23.                 <h2>About</h2>

    24. 

  24.                 <p>A simple component to select color in the same way you select color in Adobe Photoshop</p>

    25. 

  25. 				<h3>Last update</h3>

    26. 

  26. 				<p>23.05.2009 - Check Download tab</p>

    27. 

  27.                 <h3>Features</h3>

    28. 

  28.                 <ul>

    29. 

  29.                     <li>Flat mode - as element in page</li>

    30. 

  30.                     <li>Powerful controls for color selection</li>

    31. 

  31. 					<li>Easy to customize the look by changing some images</li>

    32. 

  32. 					<li>Fits into the viewport</li>

    33. 

  33.                 </ul>

    34. 

  34. 				<h3>License</h3>

    35. 

  35. 				<p>Dual licensed under the MIT and GPL licenses.</p>

    36. 

  36.                 <h3>Examples</h3>

    37. 

  37.                 <p>Flat mode.</p>

    38. 

  38.                 <p id="colorpickerHolder">

    39. 

  39.                 </p>

    40. 

  40.                 <pre>

    41. 

  41. $('#colorpickerHolder').ColorPicker({flat: true});

    42. 

  42.                 </pre>

    43. 

  43.                 <p>Custom skin and using flat mode to display the color picker in a custom widget.</p>

    44. 

  44. 				<div id="customWidget">

    45. 

  45. 					<div id="colorSelector2"><div style="background-color: #00ff00"></div></div>

    46. 

  46. 	                <div id="colorpickerHolder2">

    47. 

  47. 	                </div>

    48. 

  48. 				</div>

    49. 

  49. 

    50. 

  50. 				<p>Attached to an text field and using callback functions to update the color with field's value and set the value back in the field by submiting the color.</p>

    51. 

  51. 				<p><input type="text" maxlength="6" size="6" id="colorpickerField1" class="sws-colorpicker" value="00ff00" /></p>

    52. 

  52. 				<p><input type="text" maxlength="6" size="6" id="colorpickerField3" value="0000ff" /></p>

    53. 

  53. 				<p><input type="text" maxlength="6" size="6" id="colorpickerField2" value="ff0000" /></p>

    54. 

  54. 				<pre>$('.sws-colorpicker').ColorPicker({

    55. 

  55. 	onSubmit: function(hsb, hex, rgb, el) {

    56. 

  56. 		$(el).val(hex);

    57. 

  57. 		$(el).ColorPickerHide();

    58. 

  58. 	},

    59. 

  59. 	onBeforeShow: function () {

    60. 

  60. 		$(this).ColorPickerSetColor(this.value);

    61. 

  61. 	}

    62. 

  62. })

    63. 

  63. .bind('keyup', function(){

    64. 

  64. 	$(this).ColorPickerSetColor(this.value);

    65. 

  65. });

    66. 

  66. </pre>

    67. 

  67. 				<p>Attached to DOMElement and using callbacks to live preview the color and adding animation.</p>

    68. 

  68. 				<p>

    69. 

  69. 					<div id="colorSelector"><div style="background-color: #0000ff"></div></div>

    70. 

  70. 				</p>

    71. 

  71. 				<pre>

    72. 

  72. $('#colorSelector').ColorPicker({

    73. 

  73. 	color: '#0000ff',

    74. 

  74. 	onShow: function (colpkr) {

    75. 

  75. 		$(colpkr).fadeIn(500);

    76. 

  76. 		return false;

    77. 

  77. 	},

    78. 

  78. 	onHide: function (colpkr) {

    79. 

  79. 		$(colpkr).fadeOut(500);

    80. 

  80. 		return false;

    81. 

  81. 	},

    82. 

  82. 	onChange: function (hsb, hex, rgb) {

    83. 

  83. 		$('#colorSelector div').css('backgroundColor', '#' + hex);

    84. 

  84. 	}

    85. 

  85. });

    86. 

  86. </pre>

    87. 

  87.             </div>

    88. 

  88.             <div class="tab">

    89. 

  89.                 <h2>Download</h2>

    90. 

  90.                 <p><a href="colorpicker.zip">colorpicker.zip (73 kb)</a>: jQuery, Javscript files, CSS files, images, examples and instructions.</p>

    91. 

  91.                 <h3>Changelog</h3>

    92. 

  92.                 <dl>

    93. 

  93. 					<dt>23.05.2009</dt>

    94. 

  94. 					<dd>Added: close on color selection example</dd>

    95. 

  95. 					<dd>Added: restore original color option</dd>

    96. 

  96. 					<dd>Changed: color update on key up event</dd>

    97. 

  97. 					<dd>Fixed: colorpicker hide and show methods</dd>

    98. 

  98. 					<dd>Fixed: reference to options. Multiple fields with colorpickers is possible now.</dd>

    99. 

  99. 					<dd>Fixed: RGB to HSB convertion</dd>

    100. 

  100. 					<dt>22.08.2008</dt>

    101. 

  101. 					<dd>Fixed bug: where some events were not canceled right on Safari</dd>

    102. 

  102. 					<dd>Fixed bug: where teh view port was not detected right on Safari</dd>

    103. 

  103. 					<dt>16-07-2008</dt>

    104. 

  104. 					<dd>Fixed bug where the letter 'F' could not be typed in the Hex field</dd>

    105. 

  105. 					<dd>Fixed bug where the changes on Hex field where not parsed</dd>

    106. 

  106. 					<dd>Added new option 'livePreview'</dd>

    107. 

  107. 					<dt>08-07-2008</dt>

    108. 

  108. 					<dd>Fixed typo in the code, both JavaScript and CSS</dd>

    109. 

  109. 					<dd>Changed the cursor for some elements</dd>

    110. 

  110. 					<dd>Added new demo explaining how to implement custom skin</dd>

    111. 

  111. 					<dt>07.07.2008</dt>

    112. 

  112. 					<dd>The first release.</dd>

    113. 

  113.                 </dl>

    114. 

  114.             </div>

    115. 

  115.             <div class="tab">

    116. 

  116.                 <h2>Implement</h2>

    117. 

  117.                 <p>Attach the Javascript and CSS files to your document. Edit CSS file and fix the paths to  images and change colors to fit your site theme.</p>

    118. 

  118.                 <pre>

    119. 

  119. &lt;link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" /&gt;

    120. 

  120. &lt;script type="text/javascript" src="js/colorpicker.js"&gt;&lt;/script&gt;

    121. 

  121.                 </pre>

    122. 

  122.                 <h3>Invocation code</h3>

    123. 

  123.                 <p>All you have to do is to select the elements in a jQuery way and call the plugin.</p>

    124. 

  124.                 <pre>

    125. 

  125.  $('input').ColorPicker(options);

    126. 

  126.                 </pre>

    127. 

  127.                 <h3>Options</h3>

    128. 

  128.                 <p>A hash of parameters. All parameters are optional.</p>

    129. 

  129.                 <table>

    130. 

  130.                 	<tr>

    131. 

  131.                 		<td><strong>eventName</strong></td>

    132. 

  132.                 		<td>string</td>

    133. 

  133.                 		<td>The desired event to trigger the colorpicker. Default: 'click'</td>

    134. 

  134.                 	</tr>

    135. 

  135.                 	<tr>

    136. 

  136.                 		<td><strong>color</strong></td>

    137. 

  137.                 		<td>string or hash</td>

    138. 

  138.                 		<td>The default color. String for hex color or hash for RGB and HSB ({r:255, r:0, b:0}) . Default: 'ff0000'</td>

    139. 

  139.                 	</tr>

    140. 

  140.                 	<tr>

    141. 

  141.                 		<td><strong>flat</strong></td>

    142. 

  142.                 		<td>boolean</td>

    143. 

  143.                 		<td>Whatever if the color picker is appended to the element or triggered by an event. Default false</td>

    144. 

  144.                 	</tr>

    145. 

  145.                 	<tr>

    146. 

  146.                 		<td><strong>livePreview</strong></td>

    147. 

  147.                 		<td>boolean</td>

    148. 

  148.                 		<td>Whatever if the color values are filled in the fields while changing values on selector or a field. If false it may improve speed. Default true</td>

    149. 

  149.                 	</tr>

    150. 

  150.                 	<tr>

    151. 

  151.                 		<td><strong>onShow</strong></td>

    152. 

  152.                 		<td>function</td>

    153. 

  153.                 		<td>Callback function triggered when the color picker is shown</td>

    154. 

  154.                 	</tr>

    155. 

  155.                 	<tr>

    156. 

  156.                 		<td><strong>onBeforeShow</strong></td>

    157. 

  157.                 		<td>function</td>

    158. 

  158.                 		<td>Callback function triggered before the color picker is shown</td>

    159. 

  159.                 	</tr>

    160. 

  160.                 	<tr>

    161. 

  161.                 		<td><strong>onHide</strong></td>

    162. 

  162.                 		<td>function</td>

    163. 

  163.                 		<td>Callback function triggered when the color picker is hidden</td>

    164. 

  164.                 	</tr>

    165. 

  165.                 	<tr>

    166. 

  166.                 		<td><strong>onChange</strong></td>

    167. 

  167.                 		<td>function</td>

    168. 

  168.                 		<td>Callback function triggered when the color is changed</td>

    169. 

  169.                 	</tr>

    170. 

  170.                 	<tr>

    171. 

  171.                 		<td><strong>onSubmit</strong></td>

    172. 

  172.                 		<td>function</td>

    173. 

  173.                 		<td>Callback function triggered when the color it is chosen</td>

    174. 

  174.                 	</tr>

    175. 

  175.                 </table>

    176. 

  176.                 <h3>Set color</h3>

    177. 

  177.                 <p>If you want to set a new color.</p>

    178. 

  178.                 <pre>$('input').ColorPickerSetColor(color);</pre>

    179. 

  179. 				<p>The 'color' argument is the same format as the option color, string for hex color or hash for RGB and HSB ({r:255, r:0, b:0}).</p>

    180. 

  180.             </div>

    181. 

  181.         </div>

    182. 

  182.     </div>

    183. 

  183. </body>

    184. 

  184. </html>

    185. 

  185.