我有一个页面，允许人们基于预先构建的页面(如果您愿意，可以使用模板)创建自定义页面
我首先构建了一个页面，然后客户可以自定义文本区域、图像、视频等。
这是我称之为"template"的页面
<div id="templateContainer">
<script type="text/javascript">
var hexDigits = new Array
("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
$(document).ready(function() {
var editing = false;
$('.dragThis').each(function (i) {
if ($(this).attr('data-content-type') == 'text') {
$(this)
.resizable()
.css('color', $(this).attr('data-color-default'));
}
$(this)
.bind('dblclick', function () {
if (editing) return;
$('#area').val($(this).attr('id'));
if ($(this).attr('data-content-type') == 'text') {
editIT($(this));
} else if ($(this).attr('data-content-type') == 'image') {
changeImage($(this));
} else if ($(this).attr('data-content-type') == 'video-image') {
changeVideoImage($(this));
}
}).bind('click', function () {
$('#area').val($(this).attr('id'));
var styles = $(this).attr('style').split(';');
$.each(styles, function (i) {
var style = this.split(':');
var style0 = $.trim(style[0]);
var style1 = $.trim(style[1]);
alert(style1);
if (style0 == 'font-size') {
$('#controls #font-size option[value="' + style1 + '"]').attr('selected', true);
} else if (style0 == 'color') {
$('#controls #color option[value="' + rgb2hex(style1) + '"]').attr('selected', true);
} else if (style0 == 'text-align') {
$('#controls #text-align option[value="' + style1 + '"]').attr('selected', true);
}
});
});
});
});
function editIT(what) {
editing = true;
what = what.find("#edit");
what.html('<textarea id="text_' + what.attr('id') + '" style="width:' + what.css('width') + ';height:' + what.css('height') + ';">' + what.html() + '</textarea>');
$('#text_' + what.attr('id')).focus();
$('#text_' + what.attr('id')).blur(function () {
editing = false;
var newText = $(this).val().replace(/\r\n|\r|\n/g, "<br />");
what.html(newText);
});
}
//Function to convert hex format to a rgb color
function rgb2hex(rgb) {
rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}
function hex(x) {
return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}
function changeImage(what){
jPrompt('Using the "Image Library" on the left you must first find the image in there and then make any transformation you want to the imate. Once you are happy with yout final image, copy the URL at the bottom of the transformation screen and paste it here:',what.children().attr('src'),'Update Image', function(e) {
if(e && e != ''){
what.children().attr('src', e);
what.css('width', 'auto');
what.css('height', 'auto');
what.children().removeAttr('width');
what.children().removeAttr('height');
} else {
if(!e && e == ''){
jAlert('Leaving this field blank will keep the default image..', 'Image');
} else {
return false;
}
}
});
}
function changeVideoImage(what){
$('#changeVideoOrImageSection #newItemURL').val('');
$('#changeVideoOrImageSection').fadeIn(200);
}
</script>
<div id="startDragging" style="position:absolute; left:0px; top:0px; width:1014px; height:1144px;background-color:#fff;">
<div id="area_1" style="position:absolute; left:0px; top:0px; width:33px; height:213px;background:url(xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_01.png) top left no-repeat;"></div>
<div id="area_2" style="position:absolute; left:983px; top:0px; width:31px; height:1144px;"> <img id="Landing_Template2_03" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_03.png" width="31" height="1144" alt=""> </div>
<div id="area_3" class="dragThis" style="position: absolute; left: 43px; top: 5px; width: auto; height: auto; overflow:hidden;" data-color-default="#000" data-font-default="Verdana" data-content-type="text"><div id="edit"><h1>Business Name</h1>123 Right Here Way<br>Tampa, FL 33607<br>info@yoursite.com<br>(813) 888-8888</div></div>
<div id="area_4" class="dragThis" style="position:absolute; left:717px; top:10px; width:236px; height:198px;" data-content-type="image"> <img id="Landing_Template2_06" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_06.png" width="236" height="198" alt=""> </div>
<div id="area_5" style="position:absolute; left:0px; top:213px; width:33px; height:61px;"> <img id="Landing_Template2_07" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_07.png" width="33" height="61" alt=""> </div>
<div id="area_6" style="position:absolute; left:0px; top:274px; width:32px; height:870px;"> <img id="Landing_Template2_09" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_09.png" width="32" height="870" alt=""> </div>
<div id="contentBG" style="background-color:#005b7f; position: relative; left:32px; top:213px;height:471px;width:951px">
<div id="area_7" class="dragThis" style="position: absolute; left: 203px; top: 2px; width: auto; height: auto; text-align: center; font-size: 40px; overflow:hidden;" data-color-default="#FFF" data-font-default="Verdana" data-content-type="text"><div id="edit">This is your Primary Heading</div></div>
<div id="area_8" class="dragThis" style="position: absolute; left: 0px; top: 49px; width: auto; height: auto; text-align: center; font-size: 18px; overflow:hidden;" data-color-default="#FFF" data-font-default="Verdana" data-content-type="text"><div id="edit">Text Block #1 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi</div></div>
<div id="area_9" class="dragThis" style="position:absolute; left:562px; top:163px; width:385px; height:303px;" data-content-type="video-image"> <img id="Landing_Template2_12" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_12.png" width="385" height="303" alt=""> </div>
<div id="area_10" class="dragThis" style="position: absolute; left: 5px; top: 185px; width: auto; height: auto; text-align: left; font-size: 40px; overflow:hidden;" data-color-default="#e2e2e2" data-font-default="Verdana" data-content-type="text"><div id="edit">Heading #2</div></div>
<div id="area_11" class="dragThis" style="position: absolute; left: 6px; top: 218px; width: auto; height: auto; text-align: left; font-size: 18px; overflow:hidden;" data-color-default="#FFF" data-font-default="Verdana" data-content-type="text"><div id="edit"><ul><li>Text block #2. Quis que tincidunt lectus vel enim</li><li>Donec cursus egestas adipiscing.</li><li>Vivamus aliquam erat non massa ullamcorper</li></ul><p>Quam erat non massa ullamcorper, vel pulvinar nibh lobortis.<br>Interdum et malesuada fames ac ante ipsum primis in faucibus.<br>Maecenas augue lorem, aliquam sit amet faucibus vel, gravida<br>fringilla sem. Fusce ullamcorper, risus at rhoncus eleifend, erat turpis<br>iaculis erat, vitae luctus dolor nisl sed mi. Maecenas cursus et lectus<br>sit amet cursus.</p></div></div>
</div>
<div id="area_13" style="position:absolute; left:32px; top:684px; width:951px; height:15px;"> <img id="Landing_Template2_18" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_18.png" width="951" height="15" alt=""> </div>
<div id="area_14" class="dragThis" style="position: absolute; left: 212px; top: 701px; width: auto; height: auto; color: rgb(0, 91, 127); text-align: center; font-size: 40px; overflow:hidden;" data-color-default="#005b7f" data-font-default="Verdana" data-content-type="text"><div id="edit">Fill out the form below to sign up</div></div>
<div id="area_15" class="dragThis" style="position:absolute;left:361px;top:757px;padding:20px;">
<form method="post" id="optForm" action="https://jdvinnovations.locmktsys.com/optin.php">
<div id="formArea" style="padding:10px;height:auto;border-radius: 5px;box-shadow: 0px 0px 25px #333;background-color:#FFF;">
<div id="formLeft" style="float:left;padding: 10px;"> <span style="padding:5px;font-size:14px;">
<label for="email">Email:<br />
<input type="text" name="email" id="email" class="thisInput" value="">
</label>
<br>
</span> </div>
<div id="formRight" style="float:right;padding: 10px;"> </div>
<div id="formBottom" style="clear:both;text-align:center;">
<input type="submit" style="width: 75px;padding: 4px; border: 1px solid #828282; color: #828282;border-radius: 5px;font-family: Arial;font-size: 14px;" value="Submit">
</div>
</div>
<input type="hidden" name="page" id="page" value="33">
<input type="hidden" name="page_type" id="page_type" value="new">
<input type="hidden" name="tag" id="tag" value="new_landing_page" />
</form>
</div>
<div id="area_16" style="position:absolute; left:32px; top:1109px; width:951px; height:35px;"> <img id="Landing_Template2_23" src="xxxxxxxxxxxxxxxxxx/tpl/landing_page_templates/Full_Page_Template/images/Landing_Template2_23.png" width="951" height="35" alt=""> </div>
</div>
</div>
然后我在另一个 div 中的页面上有控件，允许用户更改文本颜色和字体大小等内容。
我已经从代码中删除了 .draggable('parnet')，因为它把一切都搞砸了。
单击不会关闭编辑，如果我双击另一个编辑区域，它们将都是文本区域，然后当我单击离开时，它们将继承相同的值。
有什么我可以做的或改变编程方式使它变得更好吗？
我是 jquery 的半新手，它很复杂(我知道这并不复杂)。
任何东西都会有帮助.. 甚至指向教程或文档。
谢谢你的提前
我可以根据要求提供对实际页面的访问。我不想广播链接..
最佳答案
只是一个建议尝试调查 http://www.getuikit.com/index.html并以此为基础构建。他们有很多很棒的功能。
关于jQuery - 可拖动和调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21539621/