jQuery UI（二）-蒲公英云

jQuery UI（二）

港控/mmm° 2023-10-17 17:23 70阅读 0赞

dialog插件：常用的对话框展现形式分为普通对话框和form对话框

<link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript">
 $(function(){
    //alert("hh");        
      $('#dlg').dialog({
           //设置成false,代表不自动打开  打开对话框
               autoOpen:false,
              //按钮的设置
               buttons:{
              '关闭':function(){
                  $('#dlg').dialog('close')
              }
              }, 
              //设置组件是否使用模式窗口。默认为false    背景颜色    
               modal:true,
              //显示
               show:{
                effect:'blind',
                duration:2000
              },
              //隐藏
              hide:{
                 effect:'explode',
                 duration:2000
              }
          }) 
  });
</script>
<body>
<button id="openbut" οnclick="$('#dlg').dialog('open')">打开窗口</button>
<div id="dlg" title="用户登录"> 用户:
  <input type="text">
  <p/>
  密码:
  <input type="password">
  <br/>
</div>
</body>

效果

Center

Center 1

tabs插件：可实现丰富的选项卡效果。常用的展现形式有鼠标单击触发tab切换、鼠标移动触发tab切换

<link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript">
$(function() {
      $("#tabs").tabs();
    });
</script>
<body>
  <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Tabs1</a>
            </li>
            <li><a href="#tabs-2">Tabs2</a>
            </li>
            <li><a href="#tabs-3">Tabs3</a>
            </li>
        </ul>
        <div id="tabs-1">
            <p>content of tab one</p>
        </div>
        <div id="tabs-2">
            <p>content of tab two</p>
        </div>
        <div id="tabs-3">
            <p>content of tab three</p>
        </div>
    </div>
</body>

效果：

Center 2

autocomplete插件:远程数据源实现自动完成

<link href="jquery-ui-themes-1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript">
  $(function(){
    //数据
     var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
     //自定填充
     $("#tags").autocomplete({
         source:availableTags,    //指定数据源
         autoFocus:true,  //自动选择第一项
        // minLength:2, //最少长度激活
         //delay:20, //延迟
         //列表被选中时触发
        /* select:function(){
          alert(1);     
         }*/
         //列表任意一项获得焦点时触发
        /* focus:function(){
            $(this).css("background","cyan"); 
         }*/
         //开始查找请求
        /* search:function(){
          alert(1);    
        }*/
        });
   });
</script>
<body>
<div class="ui-widget">
  <label for="tags">自动填充: </label>
  <input id="tags">
</div>
</body>

效果：

Center 3

menu插件：

<link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" type="text/css" />
</head>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/external/jquery/jquery.js"></script>
<script type="text/javascript" src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
<script type="text/javascript">
  $(function(){
    $("#menu").menu({
      focus:function(){
         $(this).css("background","snow");  
        }                
    });         
  });
</script>
<style type="text/css">
 /* 菜单的宽度100px,行高35px;*/
   .ui-menu{width: 100px; line-height:35px;}
</style>
<body>
<ul id="menu">
  <li><a href="#">一中</a>
    <ul>
      <li><a href="#">高中部</a>
        <ul>
          <li><a href="#">高一(1)班</a></li>
          <li><a href="#">高一(2)班</a></li>
          <li><a href="#">高一(3)班</a>
            <ul>
              <li><a href="#">胡成</a></li>
              <li><a href="#">李红</a></li>
              <li><a href="#">张三</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">初中部</a>
        <ul>
          <li><a href="#">初一(1)班</a></li>
          <li><a href="#">初一(2)班</a></li>
          <li><a href="#">初一(3)班</a></li>
        </ul>
      </li>
      <li><a href="#">科研部</a></li>
    </ul>
  </li>
  <li><a href="#">二中</a></li>
</ul>
</body>