Question

我正在编写一个模板系统，它应该支持轻松地将任何旧的html / xhtml表单转换为可以与我的系统一起使用的格式（它是我的cms的模板系统）。

这就是我的目标：

用户点击“区域定义”按钮，例如：“内容”，“补充工具栏”等
当用户悬停任何元素时，他们会变成边框或以某种方式突出显示
如果用户点击该元素，则会将其修改为具有类似“zone-content”的类
页面通过ajax

是否有任何已经存在的库可以促进这样的事情？

更新：

我最终使用下面的答案并将一个jquery解决方案混合在一起（我们将在项目的其余部分使用jquery）。它有点丑陋和hacky但它的工作原理 http://ilsken.com/labs/template/

Answer 1

我个人是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;
}

我会称这个pseduo代码，但这个想法应该足以让你开始。由于您正在处理用户输入，因此在调用此生产就绪之前，您需要检查很多极端情况。这听起来像是定义模板的一种很酷的方式，祝你好运！

Answer 2

在简单的旧jQuery中，让我们看看我是否得到你的问题。首先，一些标记：

<div id="header"></div>

<div id="sidebar"></div>

<div id="main">
    <div class="moveable-element">
        <ul class="content-panel">
            <li><a href="#" id="header">Header</a></li>
            <li><a href="#" id="sidebar">Sidebar</a></li>
            <li><a href="#" id="main">Main</a></li>
            <li><a href="#" id="footer">Footer</a></li>
        </ul>
        <p>This is content in the moveable-element.</p>
    </div>
</div>

<div id="footer"></div>

jQuery脚本（类似这样）：

$(function() {
    $('.moveable-element').hover(function() {
        $(this).find('.content-panel').show();
        $(this).css('border', '1px solid red');
    }, function() {
        $(this).find('.content-panel').hide();
        $(this).css('border', '1px solid black');
    }

    $('.content-panel a').click(function() {
        var class_name = $(this).attr("id");
        $(this).parents('.moveable-element').appendTo($('#'+class_name));
    }
}

CSS的一些部分：

.content-panel {display: none; position: absolute;}
.moveable-element {border: 1px solid black; position: relative}

注意：我在你的问题中没有看到AJAX的目的，请澄清一下。此外，这是非常粗糙的，并且出于提供信息的目的，请不要指望它按原样开箱即用。如果你想让我修改它，我会很高兴，只是问。

Answer 3

在jQuery中实现它很简单：这个简单的例子如何在用户点击时更改元素类

<script type="text/javascript">
         $('a').click(function(){
               $(this).attr('class','newClass');
          });
             //mouseover
         $('a').mouseover(function(){
               $(this).attr('class','newClass');
          });
</script>

允许用户在页面上选择任意元素

3 个答案: