src/ZKEACMS.WebHost/wwwroot/js/LayoutDesign.min.js

微信扫码关注公众号，代码整理好后第一时间通知你。

/*! http://www.zkea.net/
 * Copyright (c) ZKEASOFT. All rights reserved.
 * http://www.zkea.net/licenses */
$(function(){function s(){var t=$('<div class="additional zone"><\/div>'),n=$("<zone><\/zone>");return n.append('<input class="form-control" type="text" name="ZoneName" placeholder="输入名称" value="区域 '+($("#containers input[type=text]").size()+1)+'" />'),n.append('<input class="form-control" type="hidden" name="LayoutId" value="'+$("#LayoutId").val()+'" />'),n.append('<input class="form-control" type="hidden" name="ID" value="" />'),n.append('<input class="form-control" type="hidden" name="HeadingCode" value="" />'),t.append(n),t}function h(){$("#containers").sortable({placeholder:"design",axis:"y",tolerance:"pointer",start:function(n,t){t.helper.hasClass("container")?(t.placeholder.addClass("container"),t.helper.css("left",t.placeholder.offset().left)):t.placeholder.addClass("container-fluid")},handle:".glyphicon-sort"});$("#containers>div").sortable(f).append(e).addClass("design main custom-style");$(".additional.row").sortable(i).append(o).children(".additional").append(u)}var n=$("#containers"),r,i,f,t;n.children().size()>0&&n.children(".container").size()===0&&n.children(".container-fluid").size()===0&&(r=$('<div class="container"><\/div>'),n.children().appendTo(r),n.append(r));var e='<div class="tools"><i class="glyphicon glyphicon-resize-horizontal" title="拉伸"><\/i><i class="glyphicon glyphicon-resize-small" title="居中"><\/i><i class="glyphicon glyphicon-sort" title="拖动排序"><\/i><i class="glyphicon glyphicon-erase custom-style-editor" title="编辑样式"><\/i><i class="glyphicon glyphicon-remove-circle" title="删除"><\/i><\/div>',o='<div class="tools"><i class="glyphicon glyphicon-remove-circle" title="删除"><\/i><\/div>',u='<div class="tools"><i class="glyphicon glyphicon-menu-left" title="宽度 - 1"><\/i><i class="glyphicon glyphicon glyphicon-menu-right" title="宽度 + 1"><\/i><i class="glyphicon glyphicon-remove-circle" title="删除"><\/i><\/div>';$(document).on("click","#toolBar .col-size a",function(){$("#add-col-handle").attr("data-val",$(this).data("val")).find(".col-size-info").text($(this).text());$(this).parent().parent().find(".active").removeClass("active");$(this).parent().addClass("active")});$(".AddContainer").draggable({helper:"clone"});$(".AddRow").draggable({helper:"clone",revert:"invalid",connectToSortable:".container,.container-fluid"});$(".AddCol").draggable({helper:"clone",connectToSortable:".additional.row"});$(".templates ul li").draggable({helper:"clone",connectToSortable:"#containers>div"});i={placeholder:"additional",tolerance:"pointer",connectWith:".additional.row",over:function(n,t){t.item.hasClass("AddCol")?t.placeholder.addClass(t.item.data("col")+t.item.data("val")).html('<div class="colContent row muted"><\/div>'):t.placeholder.addClass(t.item.attr("class")).html('<div class="colContent row muted"><\/div>')},stop:function(n,t){if(t.item.hasClass("AddCol")){var i=$('<div class="additional '+t.item.data("col")+t.item.data("val")+' ui-sortable-handle">'+u+'<div class="colContent row"><\/div><\/div>');i.find(".colContent").append(s());t.item.replaceWith(i)}}};f={placeholder:"additional row muted",tolerance:"pointer",connectWith:".container,.container-fluid",items:".additional.row",stop:function(n,t){var r=$('<div class="additional row">'+o+"<\/div>"),f;t.item.hasClass("AddRow")?t.item.replaceWith(r):t.item.data("add")&&(f=$(t.item.find(".row").html()),f.find(".border-helper").remove(),r.append(f),t.item.replaceWith(r),f.each(function(){$(this).addClass("additional");$(this).append(u);$(this).append($('<div class="colContent row"><\/div>').append(s()))}));r.sortable(i)}};h();$("body").droppable({greedy:!0,accept:".AddContainer",hoverClass:"dropWarning",drop:function(){var n=$('<div class="container design main">'+e+"<\/div>");n.sortable(f);$(".additional.row",n).sortable(i);$("#containers").append(n)}});$(document).on("click",".container.design .glyphicon-resize-horizontal",function(){$(this).closest(".container").removeClass("container").addClass("container-fluid")});$(document).on("click",".container-fluid.design .glyphicon-resize-small",function(){$(this).closest(".container-fluid").removeClass("container-fluid").addClass("container")});$(document).on("click","#containers .glyphicon-remove-circle",function(){var n=$(this).parent().parent();Easy.ShowMessageBox("提示","确定要删除吗？",function(){n.remove()},!0,10)});$(document).on("click","#containers .glyphicon-menu-left",function(){var n=$(this).parent().parent().attr("class");n=n.replace(/col-md-(\d+)/g,function(n,t){return t=parseInt(t),t>1&&t--,"col-md-"+t});$(this).parent().parent().attr("class",n)});$(document).on("click","#containers .glyphicon-menu-right",function(){var n=$(this).parent().parent().attr("class");n=n.replace(/col-md-(\d+)/g,function(n,t){return t=parseInt(t),t<12&&t++,"col-md-"+t});$(this).parent().parent().attr("class",n)});$(document).on("click",".custom-style-editor",function(){$(".custom-style-target").removeClass("custom-style-target");$(this).parents(".main").addClass("custom-style-target")});$(window).width()>1600&&$(".templates").addClass("active");$(document).on("click",".templates .tool-open",function(){$(this).parent().toggleClass("active")});n.removeClass("hide");$(document).on("click","#save",function(){var i,f,r,o,u,t,h;if($('input[name="ZoneName"]').each(function(){$.trim($(this).val())||$(this).val("未命名");$(this).attr("value",$(this).val())}),!$(this).data("done")){$(this).data("done",!0);i=$("#LayoutInfo");$("zone").each(function(n){$("input",this).each(function(){$(this).attr("name","zones["+n+"]."+$(this).attr("name")).addClass("hide")}).appendTo(i)});f=$('<div id="containers"/>').append(n.html());$("div",f).removeClass("ui-droppable").removeClass("ui-sortable").removeClass("ui-sortable-handle").removeClass("active").removeClass("design").removeClass("custom-style-target").not(".custom-style").removeAttr("style");$(".tools",f).remove();var c=f.html(),s=c.split("<zone>"),e=[];for(t=0;t<s.length;t++)e.push(s[t]),t<s.length-1&&e.push("<zone>");for(r=[],t=0;t<e.length;t++)for(o=e[t].split("<\/zone>"),u=0;u<o.length;u++)r.push(o[u]),u<o.length-1&&r.push("<\/zone>");for($(".layout-html",i).remove(),t=0;t<r.length;t++)(h=$.trim(r[t]),h)&&i.append($('<textarea name="html" class="layout-html hide"><\/textarea>').val(h));return i.submit(),!1}});$(document).on("click","#show-source-code",function(){var i,r;$('input[name="ZoneName"]').each(function(){$.trim($(this).val())||$(this).val("未命名");$(this).attr("value",$(this).val())});i=$('<div id="containers"/>').append(n.html());$("div",i).removeClass("ui-droppable").removeClass("ui-sortable").removeClass("ui-sortable-handle").removeClass("active").removeClass("design").removeClass("custom-style-target").not(".custom-style").removeAttr("style");$(".tools",i).remove();r=i.html().replace(new RegExp("><div","g"),">\n<div").replace(new RegExp("><\/div","g"),">\n<\/div").replace(new RegExp("><zone>","g"),">\n<zone>\n").replace(new RegExp("><\/zone","g"),">\n<\/zone").replace(new RegExp("><input","g"),">\n<input");t.setValue(r);setTimeout(function(){t.refresh();var n=t.lineCount();t.autoFormatRange({line:0,ch:0},{line:n})},500)});$(document).on("click","#save-layout-code",function(){var i=t.getValue();n.html(i);$("input[name=LayoutId]",n).val($("#LayoutId").val());h()});t=CodeMirror.fromTextArea(document.getElementById("layout-code"),{lineNumbers:!0,mode:"htmlmixed",theme:"monokai",lineWrapping:!0,autofocus:!0,tabSize:2,extraKeys:{"Ctrl-J":"autocomplete"},autoCloseTags:!0});$(".CodeMirror").height($(window).height()-220);$("#modal-layout-code").css("display","")});