StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Check out JSColor:</p> <p><a href="http://jscolor.com/" rel="noreferrer">http://jscolor.com/</a></p> <p>Its an open source and very easy to use Javascript library. All you have to do is import the library somewhere in your application, than you can simply create an input with the class "color". JSColor does the rest. I just used it in a recent Magento project, hopefully it will fit your needs as well.</p> <p><strong>UPDATE</strong>: To answer the poster's question a little more indepth, here is how I have implemented jscolor into my magento applications:</p> <p>First make sure that you have pulled in JSColor's javascript file, I did this in my layout.xml for my module, you could do the same:</p> <pre><code><layout version="0.1.0"> <default> <reference name="head"> <action method="addJs"> <script>jscolor/jscolor.js</script> </action> </reference> </default> </code></pre> <p>Inside the html of your custom block, you can place your code for creating a jscolor input:</p> <pre><code><input class="color {required:false, adjust:false, hash:true}"> </code></pre> <p>Using JSColor is as easy as having a class assigned as color, plus any additional settings you want to set (see the jscolor docs).</p> <p>Alternatively, if you are using a standard Magento admin panel form and you want to take advantage of premade Magento blocks, you could have your block extend Varien_Data_Form_Element_Text and do something like this:</p> <pre><code>$fieldset->addType('mycustomblock', 'Mycompany_Mymodule_Block_Adminhtml_Edit_Elements_Mycustomblock'); $fieldset->addField( 'mycustomblock', 'mycustomblock', array( 'label' => Mage::helper('MyModule')->__($label), 'required' => true, 'name' => 'yourinputname', 'class' => 'color {required:false, adjust:false, hash:true}', 'value' => $value ) ); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload