安信娱乐谁是老板

拼图开发文档

圆环

圆环常用于进度、比例等图形,用.ring定义,表现为外圆环效果。

基本样式

圆环效果默认为从0到100的百分比值,同时需要定义属性data-ring的当前值value,值为JSON格式。

    <div id="ring" class="ring" data-ring='{"value":30}'></div>
    <script>
      $(function(){
        $("#ring").ring();
      })
    </script>
  

参数说明

除当前值外,还有其他圆环参数可定义。

参数类型默认值说明
minnumber0最小值
maxnumber100最大值
valuenumber/当前值,必须有。
unitstring%单位,当不为%时,则显示具体的数字。
delaynumber10圆环速度,值越小越快。
finishclass/达到100%后的叠加的样式,一般为图标样式。
sizesize100px圆环大小
bgcolor#fff圆背景色
ringcolor#ddd底圆环色
precentcolor主色值百分比颜色
textcolor默认文本色文字颜色

示例

    <div id="ringdemo" class="ring" data-ring='{"min":100,"max":200,"value":175,"unit":"个","size":"150px","bg":"#0ae","ring":"#2c7","precent":"#f60","text":"#fff","delay":5}'></div>
  

调用方法

    <script>
      $(function(){
        $("#ringdemo").ring();
      })
    </script>
  

交互演示

通过调用不同的数值,可改变圆环的显示效果,如下示例,不同的数值,改变圆环的颜色。


    <div id="ringdata" class="ring" data-ring='{"value":0}'></div>
    <script>
      $(function(){
        $("#ringdata").ring();
      })
    </script>

    <button class="button" data-value='{"value":0,"precent":"#0a8"}'>0</button>
    <button class="button" data-value='{"value":20,"precent":"#0a8"}'>20</button>
    <button class="button" data-value='{"value":40,"precent":"#2c7"}'>40</button>
    <button class="button" data-value='{"value":60,"precent":"#fc0"}'>60</button>
    <button class="button" data-value='{"value":80,"precent":"#f60"}'>80</button>
    <button class="button" data-value='{"value":100,"precent":"#f00","finish":"icon-success text-danger border-transparent"}'>100</button>
    <script>
      $(function(){
        $(".button").on("click",function(){
          var value = $.parseJSON($(this).attr("data-value"));
          $("#ringdata").ring(value);
        });
      })
    </script>