代码之家 › 专栏 › 技术社区 › Christopher Tarquini

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

ajax html jquery javascript php

Christopher Tarquini · 技术社区 · 15 年前

我正在编写一个模板系统,该系统应该支持轻松地将任何旧的HTML/XHTML表单转换为可与我的系统一起使用的格式(它是我的CMS的模板系统)。

我的目标是:

用户单击“区域定义”按钮,例如:“内容”、“边栏”等。
当用户悬停任何元素时,它们将成为边框或以某种方式突出显示。
如果用户单击该元素,它将被修改为具有类似“区域内容”的类。
页面通过Ajax将新的HTML发送到脚本

有没有现有的图书馆可以为类似的事情提供便利?

更新:

最后,我使用了下面的答案,并设计了一个jquery解决方案(我们将在项目的其余部分使用jquery)。它有点难看,有点老土,但它很管用 http://ilsken.com/labs/template/

3 回复 | 直到 15 年前

Jesse Dhillon 15 年前

我个人很喜欢 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;
}

我会称之为psedoo代码,但这个想法应该足以让你开始。由于您处理的是用户输入,所以在调用此产品准备就绪之前,您将需要检查许多角情况。这听起来是定义模板的一个很酷的方法,祝你好运!

TJ Koblentz 15 年前

在简单的旧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的用途,请澄清。此外,这是非常粗糙的,为了提供信息,请不要期望它是开箱即用的。如果你想让我修改它,我很乐意,只要问问。

shox 15 年前

它在jquery中实现起来很简单: 这个简单的例子如何在用户单击元素类时更改它

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