我怎麼能模擬星級的Widget

我試圖整合星級小窗口http://orkans-tmp.22web.net/star_rating/我怎麼能模擬星級的Widget

（我用的小部件從演示6,3）之後

後的明星們獲取點擊事件單擊事件，提出了與UI對象

callback: function (ui, type, value) { 
         var arr = ui.$stars.find("a"); 
    ...

//和HTML的形式是：

   <form id="rat" action="" method="post"> 
         <input type="radio" name="rate" value="1" title="Poor" /> 
         <input type="radio" name="rate" value="2" title="Ahh" /> 
         <input type="radio" name="rate" value="3" title="Good" /> 
         <input type="radio" name="rate" value="4" title="Very Good" /> 
         <input type="radio" name="rate" value="5" title="Superb"/> 

         <input type="submit" value="Rate it!" /> 
       </form>

當上星的用戶點擊，這是爲我工作，我所要做的，就是「假」的點擊行爲，例如我的代碼裏面，點擊星星，

據據我所知，我有兩個選項 1）要假冒點擊（我嘗試過，但它產生的職位，我不喜歡） 2）要獲得ui對象，並調用相同的邏輯點擊事件

你能幫我解決我的問題嗎？

（我需要模擬點擊事件，只是因爲我想提高通過可用性通過鍵盤選擇等級..）

感謝。

編輯：

I tried combination of the following, non of them started the animation.. 
    //$("#rat").stars("select", 5); 
    //$("#rat").click(); 
    //$("#rat:first").trigger("submit"); 
    // document.forms[0].submit(); 
    //jQuery('#rat').rating(); 
    //$('#rat').rating('select', 1); 
    //$('#rat').show();

EDIT2：我能夠選擇用下面的代碼的星星，但不啓動動畫

$("#rat").stars("select", 0); 
    $("#rat").show();

EDIT3 我做了變通，但我仍然沒有得到花哨的動畫

function blinkStars(value) { 
     $("#rat").stars("select", value); 
     $("#rat").show(); 
     setTimeout(function() { $("#rat").stars("select", 0); $("#rat").show(); }, 600); 
      }

Edit4 - 我被要求提供有關Ajax調用更多的細節，所以它看起來像

  $(function() { 
       $("#rat").children().not(":radio").hide(); 
       // Create stars 
       $("#rat").stars({ 
        cancelShow: false, 
        callback: function (ui, type, value) { 
         var arr = ui.$stars.find("a"); 

         arr.slowEach(100, 
         function() { $(this).animate({ top: "28px" }, 300) }, 
         function() { 

          $.post("/Home/Vote", { rate: value}, function (data) { 

           //do some work here.. 

          }, "json"); 


          $("#loader").fadeIn(function() { 


           $("#loader").fadeOut(function() { 
            arr.slowEach(100, function() { $(this).animate({ top: 0 }, 300) }); 
           }); 
          }); 
         }); 
        } 
       });

我將超過格萊德使動畫工作..

來源

2011-09-29 Delashmate

該鏈接的例子甚至不爲我工作，我看到的只是原始的形式。可能不是widget的最佳選擇？ – DGM

我能夠使它的工作，當用戶點擊它，它是非常酷的部件.. :) – Delashmate

確定即時通訊給予一個全新的答案 – Evan

<form id="rat" action="" method="post"> 
     <input type="radio" id="rate1" name="rate" value="1" title="Poor" /> 
     <input type="radio" id="rate2" name="rate" value="2" title="Ahh" /> 
     <input type="radio" id="rate3" name="rate" value="3" title="Good" /> 
     <input type="radio" id="rate4" name="rate" value="4" title="Very Good" /> 
     <input type="radio" id="rate5" name="rate" value="5" title="Superb"/> 

     <input type="submit" value="Rate it!" /> 
</form> 


<script> 
     $("#rate4").click(); //clicks the 'Very Good' star 
</script>

來源

2011-09-29 20:14:14 Maxx

它看起來像解決方案，但我試過了，它也沒有啓動動畫..我失蹤了？！ – Delashmate

是否需要爲此提交表單？ – Maxx

當用戶點擊表單提交的星星，但是如果你會閱讀代碼，你會看到星星傾聽事件（我不知道哪一個，在代碼中它被稱爲回調），並與阿賈克斯做他的工作..所以實際上沒有任何職位，表格提交與阿賈克斯，而不是與普通的職位 – Delashmate

有兩件事情上ü提供的網站鏈接：

「注：使用最新的jQuery（1.6）評級控制工作不正常時，由於改變處理爲對ATTR（）‘已禁用’屬性。只要jQuery UI團隊官方包含jQuery 1.6下載，該修復將包含在新版本中。

有了這樣說，你現在可以下載一個<>科林·格思裏共享，謝謝！ :) 或者，您可以立即下載<>。「

所以如果你是1.6後使用，你需要確保有補丁，並使用此：

$('input[name="rate"][value="3"]').prop("checked",true); 

$('#rat input[type="submit"]').click();

如果你是1日前使用。6使用

$('input[name="rate"][value="3"]').attr("checked",true); 

$('#rat input[type="submit"]').click();

來源

2011-09-29 20:43:19 Evan

我厭倦了你的答案，但它被刷新到我的網站，我想避免的事情，也沒有顯示動畫 – Delashmate

好吧再試一次。看到上面更改 – Evan

我試了兩種，只是可以肯定的，但它仍然刷新我的網頁..謝謝你 – Delashmate

幾個選項來觸發事件，你想：

.change();
.trigger();
.trigger('click');
.trigger('change');
$('#rat').get(0).selectedIndex = 2;

不幸的是我不能測試，直到星期一。
所有你:) :)

來源

2011-10-07 18:54:37 RASG

我只是嘗試了所有的選項，其中沒有他們工作給我，但我沒有試圖挖掘他們，所以也許你接近解決方案 – Delashmate

我怎麼能模擬星級的Widget

回答

相關問題