Разрешить пользователям выбирать произвольный элемент на странице - PullRequest
Новая
       3

Разрешить пользователям выбирать произвольный элемент на странице

0 голосов
/ 17 июля 2010

Я пишу систему шаблонов, которая должна поддерживать простое преобразование любой старой формы html / xhtml в формат, который можно использовать с моей системой (это система шаблонов для моих cms).

Вотто, к чему я стремлюсь:

  1. Пользователь нажимает кнопку «Определение зоны», например: «Содержимое», «Боковая панель» и т. д.
  2. Когда пользователь наводит курсор на любые элементы, которые онстановится границей или как-то подсвечивается
  3. Если пользователь щелкает по этому элементу, он модифицируется, чтобы получить класс, подобный 'zone-content'
  4. Страница отправляет новый HTML-код в скрипт через ajax

Существуют ли уже существующие библиотеки, которые могли бы облегчить что-то подобное?

ОБНОВЛЕНИЕ:

Я закончил, используя ответы ниже и взломав решение jquery (мы собираемся использовать jquery в остальной части проекта).Это немного уродливо и смешно, но работает http://ilsken.com/labs/template/

Ответы [ 3 ]

3 голосов
/ 17 июля 2010

Лично я фанат ExtJS (сейчас 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;
}

Я бы назвал этот псевдо-код, но этой идеи должно быть достаточно, чтобы вы начали. Поскольку вы имеете дело с пользовательским вводом, у вас будет много угловых случаев, чтобы проверить, прежде чем вы сможете назвать это готовым к работе. Звучит как крутой способ определить шаблон, удачи!

1 голос
/ 17 июля 2010

В старой доброй 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 в вашем вопросе, пожалуйста, уточните.Кроме того, это очень грубо и в информационных целях, пожалуйста, не ожидайте, что это будет работать из коробки как есть.Если вы хотите, чтобы я пересмотрел его, я был бы рад, просто спросите.

0 голосов
/ 17 июля 2010

это просто реализовать в jQuery: это простой пример того, как изменить класс элемента, когда его щелкают пользователи 

<script type="text/javascript">
         $('a').click(function(){
               $(this).attr('class','newClass');
          });
             //mouseover
         $('a').mouseover(function(){
               $(this).attr('class','newClass');
          });
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...