Jan 26

ColorPicker jQuery plugin, em 5 passos

jQuery Add comments

Olá, nesse post tentarei demonstrar uma das opções de ferramenta para a seleção de cores dentro de uma pagina web.

Com o aumento das páginas com itens dinâmicos, que podem ser customizados pelos usuários, como fontes, bordas, textos, e, principalmente cores, Surge a necessidade de uma maneira do usuário selecionar a cor para uma determinada propriedade sem inserir ela diretamente em hexadecimal ou  em rgb

O plugin que vamos utilizar do jQuery se chama ColorPicker, pode ser baixado em http://www.eyecon.ro/colorpicker/#download

Passo 1

Adicione os arquivos baixados ao projeto, os principais são:

  • images
  • colorpicker.js
  • colorpiker.css

Lembrando que o jQuery é necessário

Passo 2

Chame os arquivos javascript e a folha de estilo no Header da página

Passo 2
  1. <asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
  2. <script src=”Scripts/jquery-1.3.2.js” type=”text/javascript”></script>
  3. <script src=”Scripts/colorpicker.js” type=”text/javascript”></script>
  4. <link href=”Styles/colorpicker.css” rel=”stylesheet” type=”text/css”></link>
  5. </asp:Content>
Code Snippet
  1. <asp:Content ID=”HeaderContent” runat=”server” ContentPlaceHolderID=”HeadContent”>
  2. <script src=”Scripts/jquery-1.3.2.js” type=”text/javascript”></script>
  3. <script src=”Scripts/colorpicker.js” type=”text/javascript”></script>
  4. <link href=”Styles/colorpicker.css” rel=”stylesheet” type=”text/css”></link>
  5. </asp:Content>

Passo 3

Insira um TextBox que utilizará como objeto para retornar a cor selecionada pelo Color Picker

Passo 3
  1. Selecione a cor:
  2. <asp:TextBox ID=”txtCor” runat=”server”></asp:TextBox>

Passo 4

Agora precisaremos inicializar o Color Picker selecionado o TextBox via jQuery e passando alguns atributos

Passo4
  1. <script type=”text/javascript”>
  2. $(‘#MainContent_txtCor’).ColorPicker({
  3. onSubmit: function(hsb, hex, rgb, el) {
  4. $(el).val(hex);
  5. $(el).ColorPickerHide();
  6. },
  7. onBeforeShow: function() {
  8. $(this).ColorPickerSetColor(this.value);
  9. }
  10. });
  11. </script>

Nesse código nós estamos definindo dois eventos:

  • onBeforeShow, antes de exibir o componente ele pega a cor que está escrita no TextBox e seta no controle
  • onSubmit, atribui a cor selecionada ao TextBox

E precisamos considerar qual será o ClientID do controle ASP.NET (MainContent_txtCor)

Passo5

Agora podemos trabalhar como quisermos em ambos os lados, Client e Server. Como exemplo vou manipular o valor no Server.

.aspx
  1. <p>
  2. A cor selecionada foi:
  3. <asp:Label ID=”lblCor” runat=”server”>        </asp:Label>
  4. </p>
  5. <asp:Button ID=”btnSalvar” runat=”server” Text=”Salvar” OnClick=”btnSalvar_Click” />
.aspx.cs
  1. protected void btnSalvar_Click(object sender, EventArgs e)
  2. {
  3. lblCor.Text = txtCor.Text;
  4. lblCor.ForeColor = ColorTranslator.FromHtml(“#” + txtCor.Text);
  5. }

Como exemplo desses passos teremos:

Obrigado,

Rodolfo

Leave a Reply