2010-07-01 15 views
7

मैं fyneworks द्वारा jquery स्टार रेटिंग प्लगइन का उपयोग कर रहा हूँ। समस्या यह है कि समय के लगभग 5% (और प्रारंभिक पृष्ठ लोड पर), तार क्षैतिज रूप से लंबवत रूप से ढेर होते हैं !?jquery स्टार रेटिंग लंबवत

जब आप पृष्ठ को रीफ्रेश करते हैं, तो वे ठीक होते हैं - जो वास्तव में अजीब है। Please see the page here.

किसी भी सुझाव की सराहना की जाएगी!

धन्यवाद

संपादित करें: The unpacked JS can be found here

+0

कोशिश सीएसएस की लोडिंग अनुक्रम स्विच करने के लिए और जे एस – jigfox

+0

मैं दोनों सीएसएस और जे एस पर 'स्थगित' लेकिन कोई लाभ नहीं हुआ :( – Tim

+3

कि प्लगइन के साथ कार्य करना करने के लिए मुझे पागल कर दिया की कोशिश की है। यह हैक कर लिया गया है प्रकट होता है 8 अलग-अलग लोगों की तरह। आप जानते हैं कि मैं वास्तव में क्या नफरत करता हूं? // //}; // एक बाइट बचाओ! 'गंभीरता से,' बाइट को बचाने 'के लिए ब्रेसिज़ से छुटकारा पाएं? और फिर इसके बारे में कोई टिप्पणी छोड़ दें? – JAL

उत्तर

0

अपने परीक्षण पृष्ठ पर फ़ायरबग का उपयोग करना, मैं नाव के यहां छुटकारा पा लिया और यह ठीक काम किया।

div.rating-cancel, div.star-rating { 
background:none repeat scroll 0 0 transparent; 
cursor:pointer; 
display:block; 
/* float:left !important; */ 
} 
+0

अभी कोशिश करने के बाद, सितारे अब हिस्सों में लंबवत हो जाते हैं: \ मैं क्रोम का उपयोग कर रहा हूं - लेकिन समाधान को सभी ब्राउज़रों में वैसे भी काम करने की ज़रूरत है ... – Tim

0

क्या आप ऑनलोड आग के बाद जावास्क्रिप्ट निष्पादित करते हैं?

$(document).ready(function() { 
//execute JS here 
}); 
+0

हाँ, के लिए यह प्लगइन यह पृष्ठ की बजाय मुख्य फ़ाइल (ऊपर संपादित देखें) में शामिल है। – Tim

1

संपादित करें: अरे, यह कुछ रीलोड के बाद भी ऐसा ही होता है। खैर, इसका मतलब है कि जावास्क्रिप्ट स्निपेट - और/या जावास्क्रिप्ट इंजन में बनाया गया - असफल। एक और स्टार प्लगइन आज़माएं, यह एक अति दिखता है ... आकार में 13K: ओ। अपने आप को यहाँ के बजाय से एक अलग लिपि का उपयोग करके

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.js' type="text/javascript"></script> 
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.js' type="text/javascript" language="javascript"></script> 
<script src='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.MetaData.js' type="text/javascript" language="javascript"></script> 
<link href='http://jquery-star-rating-plugin.googlecode.com/svn/trunk/jquery.rating.css' type="text/css" rel="stylesheet"/> 
</head> 

<body> 

<div class="Clear"> 
<input name="star1" type="radio" class="star {split:2}" value="0.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="1/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="1.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="2/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="2.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="3/5" checked="checked"/> 
<input name="star1" type="radio" class="star {split:2}" value="3.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="4/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="4.5/5"/> 
<input name="star1" type="radio" class="star {split:2}" value="5/5"/> 
</div> 
<button class="rate" type="submit" title="Submit your rating">Rate!</button> 

</body> 
</html> 
0

5 स्टार रेटिंग

यहाँ, तुम जाओ, पूरी बात को पुन:, यह मेरे लिए काम करता PHP और JQuery का उपयोग करने वाली प्रणाली का उपयोग किसी भी वेब पेज पर सर्वोत्तम उपयोगकर्ता इंटरैक्टिव तरीके से विभिन्न उत्पादों या सेवाओं को रेट करने के लिए किया जाता है। उपयोगकर्ता पेज को पुनः लोड किए बिना 1-5 स्टार के पैमाने पर सामग्री को रेट कर सकता है। हम केवल JQuery स्केल को कॉन्फ़िगर करके स्कैन 1-5 का उदाहरण ले सकते हैं। इस उदाहरण में हमने इंटरैक्टिव सितारों के लिए Raty.JS प्लगइन का उपयोग किया है।

चरण -1 सरल html फ़ाइल बनाएं नीचे के रूप में

<!DOCTYPE html> 
<html lang="en" dir="ltr"> 
<head> 
<script type="text/javascript"> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://testweb3.iecworld.com/jsdemo/js/lq_js_point/js/jquery.raty.min.js"></script> 
    // Initialise Plugin 
    $(document).ready(function(){ 
      $('.stars').raty({ 
         score: function() { 
          return $(this).attr('data-score'); 
         } 
      }); 
    }); 
</script> 
</head> 
<body> 
<b>Star Rating Demo</b> 
<div class=”stars”></div> 
</body> 
</html> 

यह है कि दिखाया गया है। हमारे सितारे स्टार रेटिंग आउटपुट

सबसे पहले हमने एक साधारण HTML दस्तावेज़ बनाया है और इसमें Jquery और Raty JS शामिल हैं।

स्टार रेटिंग कार्यक्षमता के लिए रैटी को प्रारंभ करने के लिए उपयोग किए गए कोड के नीचे। ।

$(document).ready(function(){ 
       $('.stars').raty({ 
            score: function() { 
            return $(this).attr('data-score'); 
            } 
}); 
    }); 
केवल पढ़ने के लिए मूल्य

$('.stars').raty({ 
       readOnly: true 
}); 

तारों की संख्या रेटिंग $ के लिए साथ

स्टार रेटिंग ('। सितारों') raty ({ शुरू: 2 });

ऑनक्लिक कार्यक्षमता $ ('सितारों')।raty ({ ऑनक्लिक: फ़ंक्शन (स्कोर) {अलर्ट ('आपका स्कोर:' + स्कोर);} });

डिफ़ॉल्ट प्रदर्शित आधा सितारे

$('.stars').raty({ 
showHalf: true 
}); 

उपयोगकर्ता भी चयनित सितारों के मूल्य मिलता है और ऑनक्लिक ईवेंट का उपयोग करके डेटाबेस में मूल्य बनाए रख सकते हैं बटन को रद्द

$('.stars').raty({ 
showCancel: true 
}); 

। सैटी सितारे उपयोगकर्ता के अनुकूल हैं और लगभग सभी ब्राउज़रों (फ़ायरफ़ॉक्स, Google क्रोम, सफारी, आईपैड, आईफोन, एंड्रॉइड फोन इत्यादि) द्वारा समर्थित हैं। www.spjoshis.blogspot.com

संबंधित मुद्दे