2

ユーザーが単語/フレーズをクリックして文章を作成できるようにする Web アプリ インターフェイスを作成しています。フレーズの各単語は、独自のページ要素に含まれます。<div>。_ したがって、div クラスは以下を許可する必要があります。

  • 他の div/単語に関連する別の順序にドラッグする (つまり、並べ替え)
  • ボックスの右上隅にある X (ホバーしたときにのみ表示) をクリックすると完全に削除されます
  • クリック時のフォント/テキストの変更
  • ユーザーが別の単語を追加したいときにページに挿入される

たとえば、これがページだと想像してください (引用符は要素を表します)。

"こんにちは、私の名前は" [テキストボックス] "私は..." で働いており、 " [コンボボックス]で生まれました。

イタリック体のフレーズは「非アクティブ」であり、文の一部ではありませんが、ユーザーがそれをクリックすると、「I work at」 [テキストボックス] に変わり、新しい div が追加されます。"そしてまた... " で、さらなる拡張を可能にします。太字のフレーズには、閉じるボタン/クリック可能なアクションがあり、それらを削除したり、再び非アクティブにしたりできます。また、ドラッグして順序を変更することもできます。ご覧のとおり、入力を必要とするより多くのフレーズに対応するために、新しいテキスト ボックスとコンボ ボックスを動的に挿入する必要もあります。

どのような手順を踏む必要があるかを簡単に説明してもらえますか? JQueryなどでソート可能なリスト要素を見てきました。http://jsfiddle.net/ctrlfrk/A4K4t/これがスタートです。基本的な JavaScript と CSS でこれを整える必要がありますか? または、サーバー側のスクリプトを使用してページ コンテンツを動的に追加する必要がありますか?

要約すると、クリック時にフォント/テキストを変更し、ホバーオーバーの閉じるボタンを持ち、単純なクリックイベントで削除して挿入し、ドラッグして並べ替えることができる div が必要です。また、並行して追加/削除するコンボボックス/テキストボックスも必要です。

どんなヒントでも大歓迎です。

4

2 に答える 2

0

並べ替え: 順序付けられていないリスト (ul) にフレーズを実装すると、次のように単純になります。

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

ul 要素から水平方向のナビゲーション メニューを作成する方法と同様の方法で、ul/li アイテムを隣り合わせに積み重ねることができます。

破壊ボタン： これに似たテンプレート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>

簡単な説明: スパン マウス オーバー イベントは、削除ボタンをフェードインするよう jquery に指示します (ホバーすると、削除ボタンが使用可能になります)。

スパン マウス アウト イベントは、不要になったときに削除ボタンをフェードアウトするように jquery に指示します (したがって、マウスを li から離すと、削除ボタンは表示されなくなります)。

スパンの onclick は、スパンのコンテンツを含むテキスト ボックスでスパンを置き換えます。「変更の保存」は基本的に同じですが逆なので、読者の演習として残しておきます。

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

新しいコンテンツがそこに保存または生成されない限り、サーバーは必要ありません。

実装する壮大な計画が見えなくなる前に、これとまったく同じことをしていなかったので、必要な場所に到達するまで、機能を段階的に追加するだけでした. 途中で少しリファクタリングする必要があるかもしれませんが、おそらくそれを言う必要はありません。;)

要素を追加または削除するときにしなければならないことの 1 つは、jQuery 関数を再バインドすることです。ドキュメントがロードされたときにそれらを呼び出すだけでは十分ではありません。したがって、それらを関数に入れて、要素を追加または削除するたびに呼び出します。

UI の動作の説明については、非アクティブな要素をドラッグして、クリックすることでアクティブにできると言っています。これを行うことはできますが（ドラッグかクリックかを知るために、マウスアップで物がドラッグされたかどうかを確認するだけです）、それは最良のUIデザインの選択ではないかもしれません. それは世界で最悪のことではありませんが、何かをしようとしたときに間違ったことが起こると、少しイライラします. もちろん、実装して自分で確認するのがおそらく最善です。

于 2010-11-16T03:54:37.773 に答える