反饋模式與星級

我有一個反饋模式，其中我簡單地使用+，評級標記爲各種評級類型 - 差，公平，良好，非常好，非常好。現在我必須將此設計轉換爲星級。我的模態是自舉模態。有沒有辦法將我的代碼移動到星級？我不知道如何實施星級評級的明星動畫。反饋模式與星級

我的反饋模電流代碼如下

 <div class="modal fade" id="myModal1" role="dialog"> 
<div class="modal-dialog"> 

    <!-- Modal content--> 
    <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
     <h4 class="modal-title">Feedback</h4> 
    </div> 
    <div class="modal-body"> 
    <div id="message" style="text-align: center; color: green;"></div> 
            <div class="form-group"> 
            <span id="updatecapacitymodalerrortext" style="color:red"></span> 
             </div> 
             <div class="form-group" > 
             </br> 
             &nbsp;<label>Your Name : </label> 
             </br><input type="text" class="form-control" size="10" style="width:50px;" id="capacity_txt_modal" /> 
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
             <br/> 

<div class="feedback"> 
     <div class="feedbackCl" > 
     <input id="overall_0" name="overall" id="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l"> 
     <label for="overall_0" class="labelClass"> 
     <span class="sight">— —</span> 
     <span class="screen_reader" id="o1-l">Poor</span> 
     </label> 
    </div> 
    <div class="feedbackCl"> 
     <input id="overall_1" name="overall" id="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l"> 
     <label for="overall_1" class="labelClass"> 
     <span class="sight">—</span> 
     <span class="screen_reader" id="o2-l">Fair</span> 
     </label> 

    </div> 
    <div class="feedbackCl"> 
     <input id="overall_2" name="overall" id="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l"> 
     <label for="overall_2" class="labelClass"> 
     <span class="sight">+ —</span> 
     <span class="screen_reader" id="o3-l">Good</span> 
     </label> 
    </div> 
    <div class="feedbackCl"> 
     <input id="overall_3" name="overall" id="overall" type="radio" value="4" tabindex="0" aria-describedby="o4-l"> 
     <label for="overall_3" class="labelClass"> 
     <span class="sight">+</span> 
     <span class="screen_reader" id="o4-l">Very Good</span> 
     </label> 
    </div> 
    <div class="feedbackCl"> 
     <input id="overall_4" name="overall" id="overall" type="radio" value="5" tabindex="0" aria-describedby="o5-l"> 
     <label for="overall_4" class="labelClass"> 
     <span class="sight">+ +</span> 
     <span class="screen_reader" id="o5-l">Excellent</span> 
     </label> 
    </div> 
    </div> 
    <label for="input-1" class="control-label">Rate This</label> 
    <input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" data-step="1"> 
    <button type="button" id="updateCapacityBtn" class="btn btn-info ">Save</button> 
    <button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 
    <div class="modal-footer"> 
    </div> 
    </div> 
    </div> 
    </div>

來源

2017-04-15 MSV

我相信你需要實現一些的jQuery插件評級做到這一點？ –

是的。我想是這樣。任何插件建議？ – MSV

根據您的要求，我已經添加演示jQuery的評級插件您的反饋模式彈出，希望這個作品

試試下面的代碼：

$(function() { 
 
     
 
     $("#rateYo").rateYo({ 
 
     
 
     onSet: function (rating, rateYoInstance) { 
 
      rating = Math.ceil(rating); 
 
      $('#rating_input').val(rating);//setting up rating value to hidden field 
 
      alert("Rating is set to: " + rating); 
 
     } 
 
     }); 
 
    });

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.2.0/jquery.rateyo.min.js"></script> 
 
<!-- Trigger the modal with a button --> 
 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 
 

 

 
<div id="myModal" class="modal fade" role="dialog"> 
 
<div class="modal-dialog"> 
 

 

 
<div class="modal-content"> 
 
<div class="modal-header"> 
 
    <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
    <h4 class="modal-title">Feedback</h4> 
 
</div> 
 
<div class="modal-body"> 
 
<div id="message" style="text-align: center; color: green;"></div> 
 
           <div class="form-group"> 
 
           <span id="updatecapacitymodalerrortext" style="color:red"></span> 
 
            </div> 
 
            <div class="form-group" > 
 
            <label style="display:inline-block" class="col-md-4">Your Name : </label> 
 
            <div style="display:inline-block;" class="col-md-6"><input type="text" class="form-control" size="10" id="capacity_txt_modal" /> 
 
            </div> 
 

 
</div> 
 
<label style="display:inline-block;" for="input-1" class="control-label">Rate This</label> 
 
<div style="display:inline-block;" id="rateYo"></div> 
 
<input type="hidden" name="rating" id="rating_input"/> 
 
<br/> 
 
<button type="button" id="updateCapacityBtn" class="btn btn-info ">Save</button> 
 
<button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal">Close</button> 
 
</div> 
 
</div> 
 
<div class="modal-footer"> 
 
</div> 
 

 
</div> 
 
</div>

來源

2017-04-15 21:30:57

是的，這是我想要的方式，但可以捕獲無小數星級評分值嗎？我需要星級評分爲1,2,3,4,5。謝謝你分享這個。 – MSV

好的，用JS'Math.ceil（）'函數更新代碼來整理十進制值 –

爲了保存您的標籤，我使用了不同的plug in。我只加了標籤，您輸入字段：

data-star-captions='["Not Rated", "Poor", "Fair","Good","Very Good","Excellent"]'

的片段：

$('#myModal1').modal('show');

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/css/star-rating.min.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-star-rating/4.0.1/js/star-rating.min.js"></script> 
 

 

 
<div class="modal fade" id="myModal1" role="dialog"> 
 
    <div class="modal-dialog"> 
 

 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title">Feedback</h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <div id="message" style="text-align: center; color: green;"></div> 
 
       <div class="form-group"> 
 
        <span id="updatecapacitymodalerrortext" style="color:red"></span> 
 
       </div> 
 
       <div class="form-group"> 
 
        </br> 
 
        &nbsp;<label>Your Name : </label> 
 
        </br><input type="text" class="form-control" size="10" id="capacity_txt_modal"/> 
 
        <br/> 
 

 
        <div class="feedback"> 
 
         <label for="input-1" class="control-label">Rate This</label> 
 
         <input id="input-1" name="input-1" class="rating rating-loading" data-min="0" data-max="5" 
 
           data-step="1" data-star-captions='["Not Rated", "Poor", "Fair","Good","Very Good","Excellent"]'> 
 
        </div> 
 
        <button type="button" id="updateCapacityBtn" class="btn btn-info ">Save</button> 
 
        <button type="button" id="capacityModalClose" class="btn btn-default" data-dismiss="modal">Close 
 
        </button> 
 
       </div> 
 
      </div> 
 
      <div class="modal-footer"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

來源

2017-04-15 21:57:47 gaetanoM

反饋模式與星級

回答

相關問題