jquery ui 常用(二)(对话框 | 旋转器 | 工具提示框(表单) | 特效(百叶窗) )

一、添加信息的对话框  http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-dialog-modal-form、

模态表单 | 模态消息 二、滑块(可以用在延时天数)

http://www.w3cschool.cc/jqueryui/example-slider.html

http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-slider-rangemax

三、旋转器

http://www.w3cschool.cc/jqueryui/example-spinner.html

四、工具提示框(表单)

http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-tooltip-forms

<script>
  $(function() {
    $( "[title]" ).tooltip();
    
  });
</script>


<form>
  
    <div>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" title="请提供您的名字。">
    </div>
    <div>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" title="请提供您的姓氏。">
    </div>
    
  
</form>

 表单中一排放两个字段:

<form>
  
    <div>
      <label for="firstname">名字</label>
      <input id="firstname" name="firstname" title="请提供您的名字。">   
      <label for="lastname"> </label>
      <label for="lastname">姓氏</label>
      <input id="lastname" name="lastname" title="请提供您的姓氏。">
    </div>
    <div>
      <label for="address">地址</label>
      <input id="address" name="address" title="您的家庭或工作地址。">
    </div>
  
</form>

 五、特效 http://www.w3cschool.cc/try/tryit.php?filename=jqueryui-example-effect

原文地址:https://www.cnblogs.com/camelroyu/p/4174764.html