spin.js使用

spin.js,ruby上使用例子

<div id="spinBody">
<div>
    <% form_tag "/login", :id => "login_form"  do -%>
       
      <table width="100%" cellpadding="3" style="margin-top:15px;">
        <tr>
          <th style="width: 80px;"><%= t "a.loginid" %></th>
          <td><%= text_field_tag ‘login‘,"" %><!--login--></td>
        </tr>
        <tr>
          <td colspan="2" height="50" valign="bottom" > 
              <%= submit_tag "", :id => "b_login", :onclick => "submitForm();"%>
          </td>
        </tr>
      </table>
    <%end -%>
</div>

function submitForm(){
        jq("#b_login").attr("disabled", "disabled");
        showSpin();
        jq("#login_form").submit();
    };
function showSpin(){
      var spinnerOpts = {
        lines: 13, // The number of lines to draw
        length: 20, // The length of each line
        width: 10, // The line thickness
        radius: 30, // The radius of the inner circle
        corners: 1, // Corner roundness (0..1)
        rotate: 0, // The rotation offset
        direction: 1, // 1: clockwise, -1: counterclockwise
        color: ‘#000‘, // #rgb or #rrggbb or array of colors
        speed: 1, // Rounds per second
        trail: 60, // Afterglow percentage
        shadow: false, // Whether to render a shadow
        hwaccel: false, // Whether to use hardware acceleration
        className: ‘spinner‘, // The CSS class to assign to the spinner
        zIndex: 2e9, // The z-index (defaults to 2000000000)
        top: ‘100‘, // Top position relative to parent in px
        left: ‘auto‘ // Left position relative to parent in px
      };
      var spinTarget = document.getElementById(‘spinBody‘);
      new Spinner(spinnerOpts).spin(spinTarget);
    };

spin.js使用,布布扣,bubuko.com