使用自适应卡输入星级

时间：2020-01-28 18:11:58

标签： adaptive-cards

我正在寻找一种自适应卡，该卡的用户输入值取决于用户选择的星数，范围为1到5。

我还想在用户将鼠标悬停在星星上时应用动画。例如，如果用户从左到右徘徊到第四颗星，那么我希望选择第一颗到第四颗。同样，如果用户将鼠标悬停在第二颗星上，那么我希望取消选择第三颗和第四颗星。有关示例，请参见下面的链接。

但是，如果给定的自适应卡纯粹是声明性的（即不允许使用代码），是否可以开发一个？如果是这样，请您指出正确的方向吗？

请参见下面的链接，以了解我希望如何向用户展示此示例（使用自适应卡可以清楚看到），

Codepen-Ash Durham的密码笔

HTML 

 <span class="rating_stars rating_0">
  <span class='s' data-low='0.5' data-high='1'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
  <span class='s' data-low='1.5' data-high='2'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
  <span class='s' data-low='2.5' data-high='3'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
  <span class='s' data-low='3.5' data-high='4'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>
  <span class='s' data-low='4.5' data-high='5'><i class="fa fa-star-o"></i><i class="fa fa-star-half-o"></i><i class="fa fa-star"></i></span>

  <span class='r r0_5' data-rating='1' data-value='0.5'></span>
  <span class='r r1' data-rating='1' data-value='1'></span>
  <span class='r r1_5' data-rating='15' data-value='1.5'></span>
  <span class='r r2' data-rating='2' data-value='2'></span>
  <span class='r r2_5' data-rating='25' data-value='2.5'></span>
  <span class='r r3' data-rating='3' data-value='3'></span>
  <span class='r r3_5' data-rating='35' data-value='3.5'></span>
  <span class='r r4' data-rating='4' data-value='4'></span>
  <span class='r r4_5' data-rating='45' data-value='4.5'></span>
  <span class='r r5' data-rating='5' data-value='5'></span>
</span>

<div class="values">
  <div>
    <label>Rating</label><input type="text" id="rating" value="0" />
  </div>
  <div>
    <label>Rating Value</label><input type="text" name="rating" id="rating_val" value="0" />
  </div>
</div>

<div class="info">
  <p>The above textboxes should be hidden fields, but have been made textboxes to display the values when you click.</p>
  <p>The 'Rating' value can be used for class/id based changes to this if wanting to use a background sprite to manage the stars instead.</p>
</div>

CSS 

    .rating_stars {
    margin-top: 15px;
    display: inline-block;
    font-size: 20px;
    font-weight: 200;
    color: #918f8f;
    position: relative;
}

.rating_stars span .fa, .rating_stars span.active-low .fa-star-o, .rating_stars span.active-high .fa-star-o{
    display: none;
}

.rating_stars span .fa-star-o{
    display: inline-block;
}

.rating_stars span.s.active-high .fa-star{
    display: inline-block; color: #feb645;
}

.rating_stars span.s.active-low .fa-star-half-o{
    display: inline-block; color: #feb645;
}

.rating_stars span.r {
    position: absolute;
    top: 0;
    height: 20px;
    width: 10px;
    left: 0;
}

.rating_stars span.r.r0_5 {left:0px;}
.rating_stars span.r.r1 {left:10px; width: 11px;}
.rating_stars span.r.r1_5 {left:21px; width: 13px;}
.rating_stars span.r.r2 {left:34px; width: 12px;}
.rating_stars span.r.r2_5 {left:46px; width: 12px;}
.rating_stars span.r.r3 {left:58px; width: 11px;}
.rating_stars span.r.r3_5 {left:69px; width: 12px;}
.rating_stars span.r.r4 {left:81px; width: 12px;}
.rating_stars span.r.r4_5 {left:93px; width: 12px;}
.rating_stars span.r.r5 {left:105px; width: 12px;}

/* Just to make things look pretty ;) */
html, body {
  text-align: center; 
  font-family: Helvetica, Arial, sans-serif; 
  font-size: 12px;
  height: 100%;
  color: #eee;
  background: #7d7e7d; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjN2Q3ZTdkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzBlMGUwZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(-45deg,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
background: linear-gradient(135deg,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */

}
label {width: 100px;display: inline-block; text-align: right; margin-right: 10px;}
input {width: 50px; text-align: center;}
.values {margin-top: 20px;}
.info {max-width: 500px; margin: 20px auto;}

JS 

jQuery(document).ready(function($) {
$('.rating_stars span.r').hover(function() {
            // get hovered value
            var rating = $(this).data('rating');
            var value = $(this).data('value');
            $(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating);
            highlight_star(value);
        }, function() {
            // get hidden field value
            var rating = $("#rating").val();
            var value = $("#rating_val").val();
            $(this).parent().attr('class', '').addClass('rating_stars').addClass('rating_'+rating);
            highlight_star(value);
        }).click(function() {
            // Set hidden field value
            var value = $(this).data('value');
            $("#rating_val").val(value);

            var rating = $(this).data('rating');
            $("#rating").val(rating);

            highlight_star(value);
        });

        var highlight_star = function(rating) {
            $('.rating_stars span.s').each(function() {
                var low = $(this).data('low');
                var high = $(this).data('high');
                $(this).removeClass('active-high').removeClass('active-low');
                if (rating >= high) $(this).addClass('active-high');
                else if (rating == low) $(this).addClass('active-low');
            });
        }
});

谢谢

1 个答案:

答案 0 :(得分：1)

昨天有一个非常类似的问题-参见In bot framework v4, how to implemente rating card with comment box and submit button。非常重要-请注意答案下方的评论，因为我们进行了重要的讨论，也可能适用于您的情况

相关问题
最新问题