1

それぞれに3行と3つの選択ボックスがあるテーブルがあります。変更時に、選択ボックスを非表示にし、小さなローダー イメージを 250 ミリ秒挿入してから、選択したオプションで選択ボックスを表示します。元。行1で「完了」を選択した場合、行1でのみ選択を非表示にし、ローダー画像を挿入してから、「完了」を選択した状態で選択ボックスを表示します（属性選択済み="選択済みをオプションに追加"）。ここに私のデモがあります: http://jsfiddle.net/5ueYw/1/そして、これまでに得たもの。誰がいくつかのヒントを与えることができますか? ありがとう

HTML:

<table id="inbTB">
<thead>
    <tr class="head">
        <th class="sortH alignCenter smSelN header">#</th>
        <th class="sortH alignLeft header headerWidth " nowrap="nowrap">Name</th>
        <th class="sortH alignLeft header smSelR"><tag:lang.stats />Status</th>
    </tr>
</thead>
<tbody>
<tr class="sortRow">
        <td class="alignCenter">#1</td>
        <td class="alignLeft upCase">One</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>
 <tr class="sortRow">
        <td class="alignCenter">#2</td>
        <td class="alignLeft upCase">Two</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>
 <tr class="sortRow">
        <td class="alignCenter">#3</td>
        <td class="alignLeft upCase">Three</td>
        <td class="alignCenter">
            <select class="stSel smSelR smSelRInput">
                <option value="0">New</option>
                <option value="1">Completed</option>
                <option value="2">Canceled</option>
            </select>
            <div class="loader"></div>
        </td>
    </tr>

Jクエリ:

    var gif = $('.alignCenter .loader');
    $('.stSel').change(function(){
     $('select').hide();
   gif.html('<img alt="" src="" />').show().delay(250).fadeOut(function(){  // src    image is a loader gif
     $('.stSel option selected').show();
   });
})
4

2 に答える 2

0

私があなたの問題を正しく理解していれば、それ.selectは選択を非表示にして表示するために使用しているためです。this変更イベントをトリガーしたものを参照するには、使用する必要があります...

var gif = $('.alignCenter .loader');
$('.stSel').change(function() {
    var $this = $(this);
    $this.hide();
    gif.html('<img alt="" src="" />')
        .show()
        .delay(250)
        .fadeOut(function(){  // src image is a loader gif
            $this.show();
        }
    );
})

jsFiddle の例... http://jsfiddle.net/5ueYw/3/

于 2013-01-15T14:04:44.507 に答える
0

ここから始めます。改善できると確信している領域がいくつかあります。

http://jsfiddle.net/5ueYw/6/

HTML

<table id="inbTB">
    <thead>
        <tr class="head">
            <th class="sortH alignCenter smSelN header">#</th>
            <th class="sortH alignLeft header headerWidth " nowrap="nowrap">Name</th>
            <th class="sortH alignLeft header smSelR"><tag:lang.stats />Status</th>
        </tr>
    </thead>
    <tbody>
    <tr class="sortRow">
            <td class="alignCenter">#1</td>
            <td class="alignLeft upCase">One</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
     <tr class="sortRow">
            <td class="alignCenter">#2</td>
            <td class="alignLeft upCase">Two</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
     <tr class="sortRow">
            <td class="alignCenter">#3</td>
            <td class="alignLeft upCase">Three</td>
            <td class="alignCenter">
                <select class="stSel smSelR smSelRInput">
                    <option value="0">New</option>
                    <option value="1">Completed</option>
                    <option value="2">Canceled</option>
                </select>
                <div class="loader" style="display:none;">loading...</div>
            </td>
        </tr>
  </tbody>
</table>

JS

$('.stSel').change(function(){
  myselect = $(this); 
  myloader = $(this).parent().children('.loader');

    // Make sure we override animations that are already running, there is probably a
  // better way to do this.  
  $('.stSel').show();
  $('.loader').hide();  

  myselect.hide();
  myloader.show();

  setTimeout(function() {
    showme( myselect, myloader );
  }, 2000)  
});

function showme(el, loader){
  el.show();
  loader.hide();
}
于 2013-01-15T14:12:45.313 に答える