2

我正在创建一个网络应用程序界面，它允许用户通过单击单词/短语来构建句子。每个短语的单词都将包含在其自己的页面元素中，例如。一个<div>。所以 div 类需要允许：

  • 相对于其他 div/单词拖动到不同的顺序（即排序）
  • 在其框的右上角有一个 X（仅在悬停时可见）以在单击时将其完全删除
  • 单击操作时更改字体/文本
  • 当用户希望添加另一个单词时插入到页面中

例如，假设这是页面（引号表示一个元素）：

“嗨，我的名字是” [Textbox] “我在……工作” “我出生在” [Combobox]

斜体字的短语是“不活动的”，不是句子的一部分，但如果用户点击它，它会变成“我在工作”[Textbox]，并且会添加一个新的 div，例如。“而且在…… ”以允许进一步扩展。粗体字将有一个关闭按钮/可点击操作来摆脱它们或使它们再次处于非活动状态。它们也可以拖动以更改顺序。如您所见，我还需要动态插入新的文本框和组合框以适应更多需要输入的短语。

有人可以简要介绍一下我需要采取哪些步骤吗？我在 JQuery 中看到过可排序的列表元素，例如。http://jsfiddle.net/ctrlfrk/A4K4t/这是一个开始。我只需要用一些基本的 JavaScript 和 CSS 来修饰它吗？或者我是否需要使用服务器端脚本来动态添加更多页面内容？

总而言之，我需要 div 在单击时更改字体/文本，有一个悬停关闭按钮，在简单的单击事件时删除和插入，并且可以通过拖动进行排序。我还需要并行添加/删除组合框/文本框。

任何提示将非常感谢。

4

2 回答 2

0

排序： 我会在无序列表（ul）中实现短语，这使得它变得简单

$("#ulId").sortable();

您可以使 ul/li 项目彼此相邻堆叠，其方式与使用 ul 元素制作水平导航菜单的方式类似。

破坏按钮： 只需使用类似于此的模板 li

<li id="text1Wrapper">
   <span id="text1" 
     onmouseover="javascript:$('text1Remove').fadeIn();"
     onmouseout="javascript:$('text1Remove').fadeOut();"
     onclick="javascript:$('text1Content').
       replaceWith(
         $(document.createElement('input'))
           .attr('type','text')
           .val($('text1Content').text())
       );">
      <span id="text1Content">Text Here</span>
      <img id="text1Remove" 
        style="display: none;" 
        src="./x.jpg" alt="Remove" 
        onclick="javascript:$(this).parent().remove();" 
      />
   </span>
</li>

简要说明：span 鼠标悬停事件告诉 jquery 淡入删除按钮（因此，当您悬停时，删除按钮变为可用）。

span mouse out 事件告诉 jquery 在不再需要时淡出删除按钮（因此当您将鼠标移出 li 时，删除按钮不再可见）

span 的 onclick 将 span 替换为包含 span 内容的文本框。我将把“保存更改”作为练习留给读者，因为它本质上是相同的，但相反。

Img 标签样式有 display: none 来隐藏它。这本质上是 fadeOut() 的最终产品，但没有淡入淡出。

删除按钮的单击事件获取父项（li）并将其删除，并从 dom 中删除所有子项。

请注意，仅将事件放在这里是因为它似乎是解释它的合乎逻辑的地方。外部 SPAN 标记中的所有事件都是无用的空间浪费，因为当我们在下一节中克隆节点时，它们都将被覆盖。

插入页面： 你现在要做的就是

var cloneLi = $('#text1Wrapper').clone();
cloneLi.attr('id', 'text2Wrapper');
var cloneSpan = cloneLi.children('#text1').attr('id', 'text2');
var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content');
var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove');

然后，您将需要使用 jquery 事件更改外部跨度的 mouseover、mouseout 和 onclick 函数：

cloneSpan.mouseover(function(e) {
   // Insert functionality from template here
});
cloneSpan.mouseout(function(e) {
   // Insert functionality from template here
});
cloneSpan.click(function(e) {
   // Insert functionality from template here
});
于 2010-11-16T04:29:24.450 回答
0

您不需要服务器来获取新内容，除非它在那里存储或生成。

在我没有看到任何要实施的宏伟计划之前没有做这件事，我只会逐步添加功能，直到你到达你需要去的地方。您可能需要在此过程中进行一些重构，但我可能不必告诉您。;)

添加或删除元素时必须做的一件事是重新绑定 jQuery 函数，仅在文档加载时调用它们是不够的。因此，将它们放在一个函数中，并在您添加或删除元素时调用它。

关于您对 UI 行为的描述，您说可以拖动非活动元素，并且可以通过单击它们来激活它们。您可以执行此操作（只需在 mouseup 上查看该事物是否已被拖动，以了解它是拖动还是单击），但这可能不是最好的 UI 设计选择，IMO。这不会是世界上最糟糕的事情，但是当我尝试做某事时发生错误的事情时，我发现它有点令人沮丧。当然，自己实施和查看可能是最好的。

于 2010-11-16T03:54:37.773 回答