0

より良いインターフェースでクラッドを表示するために、いくつかのモーダルウィンドウを構築しようとしています。アプリの他の部分でjquery-uiを使用するために、Jqueryを使用してこれを実行することをお勧めします。

アプリのレイアウトにdivがあります

<div id="modal-container"></div>
<div id="modal">
  <a href="#" class="close">close</a>
</div>

その後、Ajaxで呼び出されます

$(function(){
  var $modal = $('#modal'),
      $modal_close = $modal.find('.close'),
      $modal_container = $('#modal-container');

  $('a[data-remote]').live('ajax:beforeSend', function(e, xhr, settings){
    xhr.setRequestHeader('accept', '*/*;q=0.5, text/html, ' + settings.accepts.html);
  });

  $('a[data-remote]').live('ajax:success', function(xhr, data, status){
    $modal
      .html(data)
      .prepend($modal_close)
      .css('top', $(window).scrollTop() + 40)
      .show();
    $modal_container.show();
  });

  $('.close', '#modal').live('click', function(){
    $modal_container.hide();
    $modal.hide();
    return false;
  });
});

さて、スタイリングなどもありますが、まあ…一流に見えないだけです。私はライトボックスやフェイスボックス、または本当にクールに見える他のプラグインを使用したいと思っていましたが、オンラインのチュートリアルが不足しているため、これまで使用できませんでした。

誰かがこれらのRails3への実装を手伝ってもらえますか？

どうもありがとう！

4

1 に答える 1

1

全体をどのように整理したかをまとめてみましょう。

jqueryファイルとプラグインファイルを/public/ javascriptsフォルダーに配置しましたか？

メインのレイアウトファイル（/ app / views / layout）で、スクリプトをロードしますか？

<%= javascript_include_tag 'jquery-1.4.4.min' %>
<%= javascript_include_tag 'rails' %>
<%= javascript_include_tag 'jquery-ui-1.8.7.custom.min' %>
<%= javascript_include_tag 'application' %>

プロトタイプを含む他のすべてのJavaScriptを取り除く必要があります。

テスト目的で、必ずしもapplication.jsファイルは必要ありません。ビューのHEADセクションにajaxコードを配置するだけです。

このajaxコードは、次のように$（document）.ready（）にラップする必要があります。

<script type="text/javascript">
    $(document).ready(function() {
        $('.delete_phone').bind('ajax:success', function() {  
            $(this).closest('tr').fadeOut();  
        });
    });
</script>

電話番号のリスト（HTMLテーブル内）で、次のような対応する削除リンクをクリックすると、このコードは1行を削除します。

<%= link_to image_tag("editdelete.png", :size => "16x16", "Delete Phone"),
    { :controller => 'phone_controller',
        :action => 'destroy_phone',
        :id => phone },
        :method => :delete, :confirm => "Are you sure?",
        :remote => true, :class=>'delete_phone'
%>

このようにコードを整理すると、何かが変わりますか？

編集：

phone_controllerファイルのいくつかを変更する必要があります。

  def destroy_phone
      @phone = Phone.find(params[:id])
      @phone.destroy
      respond_to do |format|
          format.js   { render :nothing => true }
      end
  end

reply_toコードに注意してください。これはjavascriptアクションであり、コントローラーはjs以外のものをレンダリングしてはならないことをrailsに通知します。

于 2011-04-27T02:24:56.540 に答える