index.html 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8"/>
  5. <title>Krajee JQuery Plugins - &copy; Kartik</title>
  6. <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  7. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  8. <link href="../css/star-rating.css" media="all" rel="stylesheet" type="text/css"/>
  9. <!--suppress JSUnresolvedLibraryURL -->
  10. <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  11. <script src="../js/star-rating.js" type="text/javascript"></script>
  12. <body>
  13. <div class="container">
  14. <div class="page-header">
  15. <h2>Bootstrap Star Rating Examples
  16. <small>&copy; Kartik Visweswaran, Krajee.com</small>
  17. </h2>
  18. </div>
  19. <form>
  20. <input id="input-21b" value="4" type="text" class="rating" data-min=0 data-max=5 data-step=0.2 data-size="lg"
  21. required title="">
  22. <div class="clearfix"></div>
  23. <hr>
  24. <input required id="input-21c" value="" type="text" title="">
  25. <div class="clearfix"></div>
  26. <hr>
  27. <input id="input-21d" value="2" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-size="sm"
  28. title="">
  29. <hr>
  30. <input id="input-21e" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-size="xs"
  31. title="">
  32. <hr>
  33. <input id="input-21f" value="0" type="text" data-min=0 data-max=5 data-step=0.1 data-size="md" title="">
  34. <hr>
  35. <input id="input-2ba" type="text" class="rating" data-min="0" data-max="5" data-step="0.5" data-stars=5
  36. data-symbol="&#xe005;" data-default-caption="{rating} hearts" data-star-captions="{}" title="">
  37. <hr>
  38. <input id="input-22" value="0" type="text" class="rating" data-min=0 data-max=5 data-step=0.5 data-rtl=1
  39. data-container-class='text-right' data-glyphicon=0 title="">
  40. <div class="clearfix"></div>
  41. <hr>
  42. <input required class="rb-rating" type="text" value="" title="">
  43. <hr>
  44. <input id="rating-input" type="text" title=""/>
  45. <button id="btn-rating-input" type="button" class="btn btn-primary">Toggle Disable</button>
  46. <hr>
  47. <input id="kartik" class="rating" data-stars="5" data-step="0.1" title=""/>
  48. <div class="form-group" style="margin-top:10px">
  49. <button type="submit" class="btn btn-primary">Submit</button>
  50. <button type="reset" class="btn btn-default">Reset</button>
  51. <button type="button" class="btn btn-danger">Destroy</button>
  52. <button type="button" class="btn btn-success">Create</button>
  53. </div>
  54. </form>
  55. <hr>
  56. <script>
  57. jQuery(document).ready(function () {
  58. $("#input-21f").rating({
  59. starCaptions: function (val) {
  60. if (val < 3) {
  61. return val;
  62. } else {
  63. return 'high';
  64. }
  65. },
  66. starCaptionClasses: function (val) {
  67. if (val < 3) {
  68. return 'label label-danger';
  69. } else {
  70. return 'label label-success';
  71. }
  72. },
  73. hoverOnClear: false
  74. });
  75. var $inp = $('#rating-input');
  76. $inp.rating({
  77. min: 0,
  78. max: 5,
  79. step: 1,
  80. size: 'lg',
  81. showClear: false
  82. });
  83. $('#btn-rating-input').on('click', function () {
  84. $inp.rating('refresh', {
  85. showClear: true,
  86. disabled: !$inp.attr('disabled')
  87. });
  88. });
  89. $('.btn-danger').on('click', function () {
  90. $("#kartik").rating('destroy');
  91. });
  92. $('.btn-success').on('click', function () {
  93. $("#kartik").rating('create');
  94. });
  95. $inp.on('rating.change', function () {
  96. alert($('#rating-input').val());
  97. });
  98. $('.rb-rating').rating({
  99. 'showCaption': true,
  100. 'stars': '3',
  101. 'min': '0',
  102. 'max': '3',
  103. 'step': '1',
  104. 'size': 'xs',
  105. 'starCaptions': {0: 'status:nix', 1: 'status:wackelt', 2: 'status:geht', 3: 'status:laeuft'}
  106. });
  107. $("#input-21c").rating({
  108. min: 0, max: 8, step: 0.5, size: "xl", stars: "8"
  109. });
  110. });
  111. </script>
  112. </div>
  113. </body>
  114. </html>