Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [inne][JavaScript][HTML]jQuery Color Picker Zmiena tło text i belki
avaster12
post 17.11.2013, 15:52:00
Post #1





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 2.09.2012

Ostrzeżenie: (0%)
-----

Witam mam taki kod jQuery Color Picker i chce aby zmieniał mi 3 rzeczy jak na razie kolor tekstu tła i belki menu
kod plugin u w html
[HTML] pobierz, plaintext 
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  3.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  4. <html>
  5. <head>
  6.  <title>Farbtastic</title>
  7.  <script type="text/javascript" src="jquery.js"></script>
  8.  <script type="text/javascript" src="farbtastic.js"></script>
  9.  <link rel="stylesheet" href="farbtastic.css" type="text/css"/>
  10.  <style type="text/css" media="screen">
  11.    .colorwell {
  12.      border: 2px solid #fff;
  13.      width: 6em;
  14.      text-align: center;
  15.      cursor: pointer;
  16.    }
  17.    body .colorwell-selected {
  18.      border: 2px solid #000;
  19.      font-weight: bold;
  20.    }
  21.  </style>
  22.  
  23.  <script type="text/javascript" charset="utf-8">
  24.   $(document).ready(function() {
  25.     $('#demo').hide();
  26.     var f = $.farbtastic('#picker');
  27.     var p = $('#picker').css('opacity', 0.25);
  28.     var selected;
  29.     $('.colorwell')
  30.       .each(function () { f.linkTo(this); $(this).css('opacity', 0.75); })
  31.       .focus(function() {
  32.         if (selected) {
  33.           $(selected).css('opacity', 0.75).removeClass('colorwell-selected');
  34.         }
  35.         f.linkTo(this);
  36.         p.css('opacity', 1);
  37.         $(selected = this).css('opacity', 1).addClass('colorwell-selected');
  38.       });
  39.   });
  40.  </script>
  41. </head>
  42. <body>
  43.  
  44. <form action="" style="width: 500px;">
  45.   <div id="picker" style="float: right;"></div>
  46.   <div class="form-item"><label for="color1">Color 1:</label><input type="text" id="color1" name="color1" class="colorwell" value="#123456" /></div>
  47.   <div class="form-item"><label for="color2">Color 2:</label><input type="text" id="color2" name="color2" class="colorwell" value="#123456" /></div>
  48.   <div class="form-item"><label for="color3">Color 3:</label><input type="text" id="color3" name="color3" class="colorwell" value="#123456" /></div>
  49.   <div class="form-item"><label for="color3">Color 4:</label><input type="text" id="color4" name="color4" class="colorwell" value="#123456" /></div>
  50.  
  51. </form>
  52. </div>
  53. </body>
  54. </html>
  55.  
  56.  
[HTML] pobierz, plaintext


kod mojej strony testowej
[HTML] pobierz, plaintext 
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>1 strona</title>
  6. <link href="css/styles.css" rel="stylesheet" type="text/css">
  7. </head>
  8. <div id="wrappez">
  9. <nav>2</nav>
  10. <div id="slider">1</div>
  11. <div id="srodek"></div>
  12. <div id="right">
  13. </div>
  14. <footer>5</footer>
  15.  
  16.  
  17.  
  18. </div>
  19. <body>
  20. </body>
  21. </html>
  22.  
[HTML] pobierz, plaintext


css
[HTML] pobierz, plaintext 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. #wrappez {width: 1000px; height: auto; margin-top: 0px; margin-bottom: 0px; margin-left: auto; margin-right:auto}
  5. nav {width: 1000px; height: 50px; background: red; float: left}
  6. #slider {width: 1000px; height: 300px; background: black; float: left}
  7. #left {width: 200px; height: 300px; background: yellow; float: left}
  8. #srodek {width: 800px; height: 300px; background: red; float: left}
  9. #right {width: 200px; height: 300px; background: yellow; float: left}
  10. footer {width: 1000px; height: 50px; background: black; float: left}
  11. a:hover {color: wight}
  12. a:active {color: blou}
  13. a:visited {color: black}
  14. a: {color: red; display: block}
[HTML] pobierz, plaintext


reszta w pliku rar
farbtastic.zip
Go to the top of the page
+Quote Post
werdan
post 17.11.2013, 16:49:10
Post #2





Grupa: Zarejestrowani
Postów: 354
Pomógł: 100
Dołączył: 14.11.2013
Skąd: Płock

Ostrzeżenie: (0%)
-----

Zrobiłem to, ale musiałem dodac jedna linie w bibliotece. Cos te callbacki z manuala sie mi gryzły dla 3 inputów. Mozliwe ze jest normalne rozwiazanie tego problemu.

W pliku farbtastic.js w linii 241 dodałem:

[HTML] pobierz, plaintext 
  1. $(window).trigger("colorChanging", {el: fb.callback, c: fb.color});
[HTML] pobierz, plaintext


W pliku html przed </body> wstawiłem:

[HTML] pobierz, plaintext 
  1.  
  2. <script>
  3.  $(window).on("colorChanging", function(e,data){
  4.   // data.el ---> input dla którego zmienia sie kolor,
  5.   // data.c ---> nowy kolor
  6.  })
  7. </script>
[HTML] pobierz, plaintext



W sumie to troche hardcorowe rozwiazanie, ale mysle ze juz sobie dalej dasz rade smile.gif
Go to the top of the page
+Quote Post
avaster12
post 17.11.2013, 17:01:01
Post #3





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 2.09.2012

Ostrzeżenie: (0%)
-----

kolego trochę jaśniej bo ja to ciemna masa nie umiem tego połączyć
Go to the top of the page
+Quote Post
werdan
post 17.11.2013, 17:12:51
Post #4





Grupa: Zarejestrowani
Postów: 354
Pomógł: 100
Dołączył: 14.11.2013
Skąd: Płock

Ostrzeżenie: (0%)
-----

Cytat
kolego trochę jaśniej bo ja to ciemna masa nie umiem tego połączyć


Kurde obawiałem się tego tongue.gif

Ok, juz wyjasniam.


[HTML] pobierz, plaintext 
  1. <script>
  2.  $(window).on("colorChanging", function(e,data){
  3.   // data.el ---> input dla którego zmienia sie kolor,
  4.   // data.c ---> nowy kolor
  5.  })
  6. </script>
[HTML] pobierz, plaintext


Dodaj ten kawałek kodu na samym dole pliku przed </body>

Ten event wykonuje sie dla kazdej zmiany koloru kazdego z inputów.

W 'data' dostajesz element (input) dla którego zmianiasz kolor oraz kolor (ten nowy, który ustawiłes)

3 inputy mają swoje id (#color1, #color2, #color3)

Mozesz dopisac

[HTML] pobierz, plaintext 
  1. <script>
  2.  $(window).on("colorChanging", function(e,data){
  3.  
  4. if(data.el.attr("id") === "color1"){
  5. // to zmieniamy kolor tła
  6. $(body).css("backgroundColor", data.c);
  7.  
  8. // lub zmianiamy kolor tekstu
  9. $(body).css("color", data.c);
  10.  
  11.  
  12. }
  13. // itd
  14.  
  15. })
  16. </script>
[HTML] pobierz, plaintext



Te 'body' zamień sobie na swoje elementy.
Go to the top of the page
+Quote Post
avaster12
post 19.11.2013, 10:23:07
Post #5





Grupa: Zarejestrowani
Postów: 41
Pomógł: 0
Dołączył: 2.09.2012

Ostrzeżenie: (0%)
-----

ok kolego doszłem do tego ale jest mały problem


CODE
pobierz, plaintext
<script>
$(window).on("colorChanging", function(e,data){

if(data.el.attr("id") === "color1"){
// to zmieniamy kolor tła
$(body).css("backgroundColor", data.c);

// lub zmianiamy kolor tekstu
if(data.el.attr("id") === "color2"){ dodałem to
$(body).css("color", data.c); tu sunołem $(body).css bo styl mam w tym samym pliku


}
// itd

}})
</script>


ale jak wejdę w adres mam puste pola od koloru nie mogę go wybrać

Ten post edytował avaster12 19.11.2013, 12:19:29
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Wersja Lo-Fi Aktualny czas: 14.08.2025 - 06:47
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn