Jquery实时改变网页设计(背景色)

2021-11-21 11:13:32

Jquery实时改变网页设计(背景色)

Jquery实时改变网页设计(背景色)
演示

 

PHP Code
  1. <?php  
  2. include(‘conn.php‘);  
  3. if($_SERVER["REQUEST_METHOD"] == "POST")  
  4. {  
  5. $background=$_POST[‘background‘];  
  6. $header=$_POST[‘header‘];  
  7. $sidebar=$_POST[‘sidebar‘];  
  8. $footer=$_POST[‘footer‘];  
  9. $links=$_POST[‘links‘];  
  10. $text=$_POST[‘text‘];  
  11.   
  12. mysql_query("UPDATE users SET background=‘$background‘,header=‘$header‘,sidebar=‘$sidebar‘,footer=‘$footer‘,texts=‘$text‘,links=‘$links‘ WHERE user_id=‘1‘");  
  13. $msg=‘Design updated.‘;  
  14. }  
  15.   
  16. $sql=mysql_query("SELECT background,header,sidebar,footer,texts,links FROM users WHERE user_id=‘1‘");  
  17. $row=mysql_fetch_array($sql);  
  18. $background=$row[‘background‘];  
  19. $header=$row[‘header‘];  
  20. $sidebar=$row[‘sidebar‘];  
  21. $footer=$row[‘footer‘];  
  22. $text=$row[‘texts‘];  
  23. $links=$row[‘links‘];  
  24.   
  25. ?>  
  26. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  27. <html xmlns="http://www.w3.org/1999/xhtml">  
  28. <head>  
  29. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  30. <title>Jquery实时改变网页设计(背景色)</title>  
  31. <meta content=‘Live Design Changing with Jquery‘ name=‘description‘/>   
  32. <meta content=‘Live, Design, Changing, with Jquery‘ name=‘keywords‘/>   
  33. <link rel="stylesheet" media="screen" type="text/css" href="css/colorpicker.css" />  
  34. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>  
  35.   
  36. <script type="text/javascript" src="js/colorpicker.js"></script>  
  37. <script type="text/javascript">  
  38. $(document).ready(function()   
  39. {  
  40.     $(‘.color‘).ColorPicker({  
  41.     onSubmit: function(hsb, hex, rgb, el) {  
  42.         $(el).val(hex);  
  43.         $(el).ColorPickerHide();  
  44.     },  
  45.     onBeforeShow: function () {  
  46.         $(this).ColorPickerSetColor(this.value);  
  47.     }  
  48. })  
  49. .bind(‘keyup‘, function(){  
  50.     $(this).ColorPickerSetColor(this.value);  
  51. });  
  52.   
  53. $(".colorpicker_submit").click(function()   
  54. {  
  55. var B = $("#background").val();  
  56. var sidebar = $("#sidebarinput").val();  
  57. var header = $("#headerinput").val();  
  58. var footer = $("#footerinput").val();  
  59. var T = $("#textinput").val();  
  60. var L = $("#linkinput").val();  
  61.   
  62. $("#header").css("background-color", "#"+header);  
  63. $("#main_right").css("background-color", "#"+sidebar);  
  64. $("#footer").css("background-color", "#"+footer);  
  65. $(‘body‘).css("background-color", "#"+B);  
  66. $(‘#container‘).css("color", "#"+T);  
  67. $(‘#container a‘).css("color", "#"+L);  
  68.   
  69. });  
  70.   
  71. });  
  72. </script>  
  73.   
  74. <style>  
  75. *{ margin:0px; padding:0px}  
  76. body  
  77. {  
  78.     background-color:#<?php echo $background; ?>;  
  79.       
  80.     font-family:Arial, Helvetica, sans-serif;  
  81. }  
  82. #container  
  83. {  
  84. margin:0 auto;  
  85. width:800px;  
  86. color:#<?php echo $text; ?>;  
  87. }  
  88. #container a  
  89. {  
  90.     color:#<?php echo $links; ?>;  
  91.       
  92. }  
  93.   
  94. #header  
  95. {  
  96.     background-color:#<?php echo $header; ?>;  
  97.     height:100px;  
  98.     margin-top:15px;  
  99.       
  100. }  
  101. #main  
  102. {  
  103.       
  104.     min-height:600px;  
  105.     overflow:auto;  
  106.     margin-top:10px;  
  107.   
  108. }  
  109. #main_left  
  110. {  
  111.     background-color:#ffffff;  
  112.     min-height:600px;  
  113.     width:590px;  
  114.     margin-right:10px;  
  115.     overflow:auto;  
  116.         float:left;  
  117.       
  118.   
  119. }  
  120. #main_right  
  121. {  
  122.     background-color:#<?php echo $sidebar; ?>;  
  123.     min-height:600px;  
  124.     width:200px;  
  125.     overflow:auto;  
  126.     float:left;  
  127.       
  128.   
  129. }  
  130. #footer  
  131. {  
  132.     background-color:#<?php echo $footer; ?>;  
  133.     height:70px;  
  134.     margin-top:10px;  
  135.       
  136.   
  137. }  
  138. .rounded  
  139. {  
  140. border-radius:8px;  
  141. -moz-border-radius:8px;  
  142. -webkit-border-radius:8px;    
  143. }  
  144. .space  
  145. {  
  146.     margin-bottom:15px;  
  147. }  
  148. label  
  149. {  
  150.     font-size:13px;  
  151.     margin-bottom:5px;  
  152.     font-weight:bold;  
  153. }  
  154. .color  
  155. {  
  156.     border:solid 1px #333;  
  157.     padding:4px;  
  158.     margin-top:8px;  
  159.   
  160. }  
  161. .savebutton  
  162. {  
  163.     color:#fff;  
  164.     border:solid 1px #333;  
  165.     padding:5px;  
  166.     background-color:#333;  
  167.     font-weight:bold  
  168.       
  169.       
  170. }  
  171.   
  172. </style>  
  173. </head>  
  174.   
  175. <body>  
  176. <div id="container">  
  177. <div id="header" class="rounded">  
  178.   
  179.   
  180. </div>  
  181. <div id="main">  
  182. <div id="main_left"  class="rounded">  
  183. <div style="padding:25px">  
  184. <h1>Live Design Changing with Jquery </h1>  
  185. <br/>  
  186. <form method="post" action="" />  
  187. <div class="space">  
  188. <label>Background:</label><br/> <input type="text" name="background" id="background" class="color" value="<?php echo $background; ?>" readonly="readonly"/>  
  189. </div>  
  190.   
  191. <div  class="space">  
  192. <label>Header:</label> <br/><input type="text" name="header" class="color" id="headerinput" value="<?php echo $header; ?>" readonly="readonly" />  
  193. </div>  
  194.   
  195. <div  class="space">  
  196. <label>Sidebar:</label><br/> <input type="text" name="sidebar" class="color" id="sidebarinput"  value="<?php echo $sidebar; ?>" readonly="readonly"/>  
  197. </div>  
  198.   
  199. <div  class="space">  
  200. <label>Footer:</label><br/> <input type="text" name="footer" class="color"  id="footerinput" value="<?php echo $footer; ?>" readonly="readonly"/>  
  201. </div>  
  202.   
  203. <div  class="space">  
  204. <label>Text:</label><br/> <input type="text" name="text" class="color" id="textinput" value="<?php echo $text; ?>" readonly="readonly"/>  
  205. </div>  
  206.   
  207. <div  class="space">  
  208. <label>Links:</label><br/> <input type="text" name="links" class="color" id="linkinput" value="<?php echo $links; ?>" readonly="readonly"/>  
  209. </div>  
  210.   
  211. <div  class="space">  
  212. <input type="submit" value=" Save Changes " class=‘savebutton‘/> <?php echo $msg; ?>  
  213. </div>  
  214. </form>  
  215. </div>  
  216. </div>  
  217. <div id="main_right"  class="rounded">  
  218. <div style="padding:10px"></div>  
  219. </div>  
  220. </div>  
  221.   
  222. <div id="footer"  class="rounded">  
  223.   
  224. </div>  
  225.   
  226. </div>  
  227.   
  228. </div>  
  229. </body>  
  230. </html>  

 


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

Jquery实时改变网页设计(背景色),布布扣,bubuko.com

Jquery实时改变网页设计(背景色)

上一篇：第三方网站响应时间和浏览器兼容性测试


下一篇：[Spring cloud 一步步实现广告系统] 12. 广告索引介绍