jQuery - перетаскиваемый и изменяемый размер
У меня есть страница, которая позволяет людям создавать пользовательские веб-страницы на основе предварительно созданной страницы (если хотите, tempalte)
У меня есть страница, созданная для начала, чтобы клиент мог затем настраивать текстовые области, изображения, видео и т. Д.
Вот страница, которую я называю "шаблон"
<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, который является этим комплексом (я знаю, что это не очень сложно).
что-нибудь поможет.. даже указать на учебник или документацию.
Спасибо в Advnace.
Я могу предоставить доступ к актуальной странице по запросу. я не хочу braodcast ссылку..
1 ответ
Просто предложение попробуйте заглянуть в http://www.getuikit.com/index.html и построить с этим. у них есть много замечательных функций.