English | 正體中文 | 简体中文

Jquery ui selectable dialpad



范例程式码 Expand
<!-- Javascript -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"></link>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
    var numbers = "";
    $(function () {
        $("#items").selectable({
            selected: function (event, ui) {
              	$(".ui-selected", this).each(function() {
                    var index = $("#items li").index( this );
                  
                    if(index == 9){return;}
                    if(index == 10){ index = -1;}
                  
                    numbers += (index+1);
                    if(index == 11){numbers="";}
                    $("#info").html(numbers);
                });              	
            }
        });
    });
</script>

<!-- HTML -->
<style>
    .list {        
        background-color:lightblue;          
        font-size:30px;
        text-align:center;
        cursor:pointer;
        font-family:Geneva,Arial,Helvetica,sans-serif;
        border:1px solid gray;
    }  
  
    #items .ui-selected { 
       background: red; 
       color: white; 
       font-weight:bold;
    }
  
    #items { 
       list-style-type: none; 
       margin: 0; 
       padding: 0;
    }
  
    #items li{      
       float:left;  
       margin: 2px; 
       padding: 2px;       
       width:60px; 
       height:60px;
       line-height:60px;
    }
</style>
<div style="width:230px">
  <ul id="items">
      <li class="list">1</li>
      <li class="list">2</li>
      <li class="list">3</li>
      <li class="list">4</li>
      <li class="list">5</li>
      <li class="list">6</li>
      <li class="list">7</li>
      <li class="list">8</li>
      <li class="list">9</li>
      <li class="list"></li>
      <li class="list">0</li>
      <li class="list" style="font-size:20px;">Clear</li>
  </ul>
</div>
<div id="info" style="font-family:Geneva,Arial,Helvetica,sans-serif;font-size:20px;"></div>

    
在线测试程序
© 2012 PureExample.com contact