综合技术

Live Design Changing with Jquery

微信扫一扫,分享到朋友圈

Live Design Changing with Jquery
0

In this post I want to explain how to change design colors . I added user control system to manage own template design. It’s useful feature for your web projects to providing option to the end-user can customize his page template. This script divided into four parts Javascript, PHP, CSS and HTML+PHP.

This concept basically say that if we directly change the design template facility live so this Jquery code use is in your system and get rich functionality in your site.

Follow this Steps :

JavaScript  :

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/
 1.4.2/jquery.min.js“></script>
 <script type=”text/javascript” src=”js/colorpicker.js“></script>
 <script type=”text/javascript“>
 $(document).ready(function()
 {
 $(‘.color’).ColorPicker({
 onSubmit: function(hsb, hex, rgb, el) {
 $(el).val(hex);
 $(el).ColorPickerHide();
 },
 onBeforeShow:function () {
 $(this).ColorPickerSetColor(this.value);
 }
 })
 .bind(‘keyup‘, function(){
 $(this).ColorPickerSetColor(this.value);
 });$(“.colorpicker_submit”).click(function()
 {
 var B = $(“#background”).val();
 var sidebar = $(“#sidebarinput”).val();
 var header = $(“#headerinput”).val();
 var footer = $(“#footerinput”).val();
 var T = $(“#textinput”).val();
 var L = $(“#linkinput”).val();
 $(“#header”).css(“background-color“,“#”+header);
 $(“#main_right”).css(“background-color“, “#”+sidebar);
 $(“#footer”).css(“background-color“,“#”+footer);
 $(‘body’).css(“background-color“, “#”+B);
 $(‘#container’).css(“color“, “#”+T);
 $(‘#container a’).css(“color“, “#”+L);
 });
 });
 </script> 

阅读原文...


微信扫一扫,分享到朋友圈

Live Design Changing with Jquery
0

Avatar

Debugging .gitignore

上一篇

『互联网架构』软件架构-解密电商系统-页面静态化(81)

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Live Design Changing with Jquery

长按储存图像,分享给朋友