Jquery即時改變網頁設計(背景色)

Jquery即時改變網頁設計(背景色)asp" title="Jquery即時改變網頁設計(背景色)" />示範

PHP Code

1. include('conn.php');
2. if($_SERVER["REQUEST_METHOD"] == "POST")
3. {
4. $background=$_POST['background'];
5. $header=$_POST['header'];
6. $sidebar=$_POST['sidebar'];
7. $footer=$_POST['footer'];
8. $links=$_POST['links'];
9. $text=$_POST['text'];
11. mysql_query("UPDATE users SET background='$background',header='$header',sidebar='$sidebar',footer='$footer',texts='$text',links='$links' WHERE user_id='1'");
12. $msg='Design updated.';
13. }
15. $sql=mysql_query("SELECT background,header,sidebar,footer,texts,links FROM users WHERE user_id='1'");
16. $row=mysql_fetch_array($sql);
17. $background=$row['background'];
18. $header=$row['header'];
19. $sidebar=$row['sidebar'];
20. $footer=$row['footer'];
21. $text=$row['texts'];
22. $links=$row['links'];
24. ?>
29. Jquery即時改變網頁設計(背景色)
33. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
35. <script type="text/javascript" src="js/colorpicker.js"></script>
36. <script type="text/javascript">
37. $(document).ready(function()
38. {
39. $('.color').ColorPicker({
40. onSubmit: function(hsb, hex, rgb, el) {
41. $(el).val(hex);
42. $(el).ColorPickerHide();
43. },
44. onBeforeShow: function () {
45. $(this).ColorPickerSetColor(this.value);
46. }
47. })
48. .bind('keyup', function(){
49. $(this).ColorPickerSetColor(this.value);
50. });
52. $(".colorpicker_submit").click(function()
53. {
54. var B = $("#background").val();
55. var sidebar = $("#sidebarinput").val();
56. var header = $("#headerinput").val();
57. var footer = $("#footerinput").val();
58. var T = $("#textinput").val();
59. var L = $("#linkinput").val();
61. $("#header").css("background-color", "#"+header);
62. $("#main_right").css("background-color", "#"+sidebar);
63. $("#footer").css("background-color", "#"+footer);
64. $('body').css("background-color", "#"+B);
65. $('#container').css("color", "#"+T);
66. $('#container a').css("color", "#"+L);
68. });
70. });
71. </script>
85. Live Design Changing with Jquery
86. 
    

103. 
     原文地址:http://www.freejs.net/article_jquerywenzi_135.html