jQuery UI（二）

最新推荐文章于 2023-11-17 19:41:30 发布

凌冰_

最新推荐文章于 2023-11-17 19:41:30 发布

阅读量201

点赞数

分类专栏： jquery easyUI jqueryUI

本文链接：https://blog.csdn.net/hlx20080808/article/details/78753145

版权

jqueryUI 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jquery easyUI

3 篇文章 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>

效果

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>

效果：

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>

效果：

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>

效果