我正在编写一个模板系统，该系统应该支持轻松地将任何旧的 html/xhtml 表单转换为可以在我的系统中使用的格式(它是我的 cms 的模板系统)。
这就是我的目标:
- 用户点击“区域定义”按钮，例如:“内容”、“侧边栏”等
- 当用户将鼠标悬停在任何元素上时，它们会出现边框或以某种方式突出显示
- 如果用户点击该元素，它就会被修改为具有“zone-content”之类的类
- 页面通过ajax将新的html发送到脚本
是否有任何现有的库可以促进这样的事情？
更新:
我最终使用了下面的答案并组合了一个 jquery 解决方案(我们将在项目的其余部分使用 jquery)。它有点丑陋和老套，但它有效 http://ilsken.com/labs/template/
最佳答案
我个人是ExtJS (now Sencha)的粉丝，使用该框架可以非常简单直接地做到这一点。我就是这样做的:
<body>
<button id="content_define" class="zone_define">Content</button>
<button id="sidebar_define" class="zone_define">Sidebar</button>
<div id="template">
<!-- put your template here -->
</div>
</body>
<script type="text/javascript">
Ext.onReady(function() {
Ext.select('button.zone_define').on('click', function(ev, target) {
ev.stopEvent();
// this listener is bound to two buttons, determine which one was pressed
var zone = target.id.split('_')[0]; // 'content' or 'sidebar'
// add a click listener listener to the template so that when an element within is clicked,
// an Ajax request is initiated
var template = Ext.get('template');
template.addClass('targetable').on('click', function(ev, target) {
template.removeClass('targetable');
// this part is optional, in case the user clicks an <a> or <img> element,
// you may want to get the block element containing the clicked element
var target = ev.getTarget('div'); // or ul, table, p, whatever
// invoke zone_capture on the click target (or containing block element)
zone_capture(zone, target);
}, window, {single: true});
// the {single: true} part removes this listener after one click,
// so the user has to go back and press the button again if they want to redefine
});
// this is the code to do the ajax request
// and also add a class to the target element
function zone_capture(zone, target) {
// first, remove the class from elements which are already defined as this zone
Ext.select(String.format('#template .{0}_zone', zone)).removeClass(zone + '_zone');
// now add that class to the target
target.addClass(zone + '_zone');
// do the POST
Ext.Ajax.request({
method: 'POST',
url: '/region/define',
params: { // these are the params POSTed to your script
template: Ext.get('template').dom.innerHTML
}
});
}
});
</script>
我还会添加以下用于悬停效果等的 CSS 规则。
#template.targetable:hover div { /* add div, p, table, whatever */
border: 1px solid #f00;
}
#template.targetable {
cursor: crosshair;
}
我将其称为伪代码，但这个想法应该足以让您开始。由于您正在处理用户输入，因此在将其称为生产就绪之前，您将需要检查许多极端情况。这听起来是一种很酷的定义模板的方式，祝你好运!
关于php - 允许用户选择页面上的任意元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3269404/