0

Twitterのブートストラップを使用しています。

   <div class="hero-unit span8 pull-right">
       <h5><span class="label label-info">General Account Settings</span></h5>
          <ul class="nav nav-list">
             <c:forEach items="${personUI}" var="entry">
                  <li id="${entry.key}">
                    <div class="span2 pull-left">
                       <span class="label">${entry.key}</span>
                    </div> 
                    <div class="span2">
                       <font size="2"><span><strong>${entry.value}</strong></span></font>
                    </div>
                    <div class="span2 pull-right">
                       <font size="2">
                          <span>
                             <a href="#" id="${entry.key}">
                             <span class="add-on">
                               <i class="icon-pencil"></i>
                             </span>Edit
                                <script type="text/javascript">
                                    $(function(){
                                         $(this).click(function(){
                                             $('li[${entry.key}]').hide();
                                         });
                                    });
                                 </script>
                               </a>
                          </span>
                      </font>
                    </div>
                  </li>
             </c:forEach>
          </ul>
   </div>
</div>

ユーザーが編集ボタンをクリックすると、編集ボタンが関連付けられている li 要素に次の div を動的に追加する必要があります。div 内のフォームにも送信ボタンと閉じるボタンが必要です。送信/クローズ時に、プロセスを投稿し、対応するli要素を新しい値で更新した後、divは再び非表示になります。

<!-- Name Edit div -->
<div id="nameEdit" style="display:none;">
  <form id="editname" action="<c:url value="/editname" />" method="post">
     <div class="control-group">
        <div class="controls">
            <input type="text" placeholder="First Name" name="firstName" id="firstName" class="input-xlarge help-inline">
            <input type="text" placeholder="Last Name" name="lastName" id="lastName" class="input-xlarge help-inline">
        </div>
    </div>
  </form>
</div>

スナップショットここに画像の説明を入力

4

1 に答える 1

0

ブートストラップ用の次のプラグインを調べることができます

インラインPliginを編集する

于 2013-02-19T13:30:18.700 に答える