星空网 > 软件开发 > Java

基于jQuery8款超赞的评分插件

基于jquery8款超赞的评分插件。这是一款基于jquery.barrating插件实现的,该评级小部件可灵活设置CSS样式。具体效果请查看演示。效果图如下:

基于jQuery8款超赞的评分插件

在线预览    源码下载

实现的代码。

html代码:

<section class="section section-examples">  <div class="examples">    <div class="row">        <div class="col">            <div class="box box-orange">              <div class="box-header">Example A</div>              <div class="box-body">                <select id="example-a" name="rating">                  <option value="1">1</option>                  <option value="2">2</option>                  <option value="3">3</option>                  <option value="4">4</option>                  <option value="5">5</option>                  <option value="6">6</option>                  <option value="7" selected="selected">7</option>                  <option value="8">8</option>                  <option value="9">9</option>                  <option value="10">10</option>                </select>              </div>            </div>        </div>        <div class="col">            <div class="box box-green">              <div class="box-header">Example B</div>              <div class="box-body">                <select id="example-b" name="rating">                  <option value="Bad">Bad</option>                  <option value="Mediocre">Mediocre</option>                  <option value="Good" selected="selected">Good</option>                  <option value="Awesome">Awesome</option>                </select>              </div>            </div>        </div>    </div>    <div class="row">        <div class="col">            <div class="box box-blue">              <div class="box-header">Example C</div>              <div class="box-body">                <select id="example-c" name="rating">                    <option value=""></option>                    <option value="1">1</option>                    <option value="2">2</option>                    <option value="3">3</option>                    <option value="4">4</option>                    <option value="5">5</option>                </select>              </div>            </div>        </div>        <div class="col">            <div class="box box-orange">              <div class="box-header">Example D</div>              <div class="box-body">                <select id="example-d" name="rating">                    <option value="1" data-html="<strong>1</strong>">1</option>                    <option value="2" data-html="<strong>2</strong>">2</option>                    <option value="3" data-html="<strong>3</strong>">3</option>                    <option value="4" data-html="<strong>4</strong>">4</option>                    <option value="5" data-html="<strong>5</strong>">5</option>                    <option value="6" data-html="<strong>6</strong>">6</option>                    <option value="7" data-html="<strong>7</strong>">7</option>                    <option value="8" data-html="<strong>8</strong>">8</option>                </select>              </div>            </div>        </div>    </div>    <div class="row">        <div class="col">            <div class="box box-green">              <div class="box-header">Example E</div>              <div class="box-body">                <select id="example-e" name="rating">                  <option value="A">A</option>                  <option value="B">B</option>                  <option value="C">C</option>                  <option value="D">D</option>                  <option value="E">E</option>                  <option value="F">F</option>                </select>              </div>            </div>        </div>        <div class="col">            <div class="box box-blue">              <div class="box-header">Example F</div>              <div class="box-body">                <select id="example-f" name="rating">                  <option value="1">1</option>                  <option value="2">2</option>                  <option value="3">3</option>                  <option value="4">4</option>                  <option value="5">5</option>                </select>              </div>            </div>        </div>    </div>    <div class="row">        <div class="col">            <div class="box box-orange box-large">              <div class="box-header">Example G</div>              <div class="box-body">                <select id="example-g" name="rating">                  <option value="Strongly Agree">Strongly Agree</option>                  <option value="Agree">Agree</option>                  <option value="Neither Agree or Disagree" selected="selected">Neither Agree or Disagree</option>                  <option value="Disagree">Disagree</option>                  <option value="Strongly Disagree">Strongly Disagree</option>                </select>              </div>            </div>        </div>        <div class="col">            <div class="box box-green box-large">              <div class="box-header">Example H</div>              <div class="box-body">                <select id="example-h" name="rating">                  <option value="10">10</option>                  <option value="9">9</option>                  <option value="8">8</option>                  <option value="7">7</option>                  <option value="6">6</option>                  <option value="5">5</option>                  <option value="4">4</option>                  <option value="3">3</option>                  <option value="2">2</option>                  <option value="1" selected="selected">1</option>                </select>              </div>            </div>        </div>    </div>  </div></section>

via:http://www.w2bc.com/Article/40601




原标题:基于jQuery8款超赞的评分插件

关键词:jquery

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

亚马逊无货源店群有什么特点?它都有什么优势:https://www.ikjzd.com/articles/98198
给中国产品加税,美国烟花业担忧:独立日或无烟花可放:https://www.ikjzd.com/articles/98200
亚马逊选品注意事项,这些你中招了吗?:https://www.ikjzd.com/articles/98202
中美贸易摩擦持续,逼得美国农民改种大麻!:https://www.ikjzd.com/articles/98203
全球排行:2019年最具价值的25个物流品牌!:https://www.ikjzd.com/articles/98206
亚马逊FBA的操作细节:https://www.ikjzd.com/articles/98207
长治婚庆女司仪和主持人:https://www.vstour.cn/a/366176.html
北京丰台区水上乐园哪家好玩?:https://www.vstour.cn/a/366177.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流