jQuery UI（二）

港控/mmm° 2023-10-17 17:23 18阅读 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>

效果

![Center 4][]

[Center]: https://img-blog.csdn.net/20171208164045244?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: https://img-blog.csdn.net/20171208164056163?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 2]: https://img-blog.csdn.net/20171208164330224?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 3]: https://img-blog.csdn.net/20171208164537908?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 4]: https://img-blog.csdn.net/20171208165334789?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaGx4MjAwODA4MDg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

发表评论取消回复

表情：

评论列表（有 0 条评论，18人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 入门教程(39): jQuery UI Slider 示例（二）

前面的slider 例子Slider都是水平显示的，Slider也可以显示成垂直的，这可以通过配置orientation ，将其值设为“vertical”。基本用法

浅浅的花香味﹌/ 2024年02月17日 14:12/ 0 赞/ 66 阅读

相关 jQuery 入门教程(34): jQuery UI Dialog 示例（二）

模式对话框如想对话框显示为模式的，可以通过配置modal: true来设置。 <table style=""> <tbody style=""> <tr

ゝ一世哀愁。/ 2024年02月17日 14:11/ 0 赞/ 70 阅读

相关 jQuery 入门教程(27): jQuery UI Button示例（二）

本例为使用jQuery的一个实用的例子，显示媒体播放器的控制条。其中按钮的图标使用jQuery库自带的CSS定义的一些图标（比如ui-icon-seek-end等）。

浅浅的花香味﹌/ 2024年02月17日 14:11/ 0 赞/ 68 阅读

相关 jQuery UI（二）

dialog插件：常用的对话框展现形式分为普通对话框和form对话框 <link href="jquery-ui-1.12.1.custom/jquery-ui.cs

港控/mmm°/ 2023年10月17日 17:23/ 0 赞/ 19 阅读

相关 jQuery 入门教程(29): jQuery UI Datepicker 示例（二）

显示月份和年份选择下拉框 changeMonth 和changeYear 选择可以打开和关闭月份和年份下拉选择框。 <table style=""> <tbo

超、凢脫俗/ 2023年10月16日 19:07/ 0 赞/ 52 阅读

相关 jQuery 入门教程(42): jQuery UI Tab 示例（二）

支持收缩和展开缺省情况下，标签页是展开的，可以通过设置collapsible为true使得标签页支持收缩和展开。 <table style=""> <tbo

傷城~/ 2023年10月16日 19:07/ 0 赞/ 46 阅读

相关 jQuery 入门教程(24): jQuery UI Autocomplete示例（二）

如果一个输入框可以接受多个输入项，比如选择你喜欢的语言，以逗号隔开，这是也可以使用AutoComplete为每个输入项提供输入提示。不过此时除了设置数据源外，还需要添加

谁践踏了优雅/ 2023年10月16日 19:06/ 0 赞/ 61 阅读

相关 jQuery与jQuery ui学习

在经过了一系列的里程碑版本，beta和RC版本的发布后，jQuery UI团队宣布发布稳定版本1.9.0，其中包含了新的widgets，对API进行了重新设计以及bug修复。

旧城等待，/ 2022年08月27日 14:56/ 0 赞/ 295 阅读

相关 JQuery UI Autocomplete

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport"

深藏阁楼爱情的钟/ 2022年07月12日 11:42/ 0 赞/ 254 阅读

相关 jQuery-UI

> [https://wildye.cn/posts/3505c7d5/][https_wildye.cn_posts_3505c7d5] jQuery UI包含了许多维持状

àì夳堔傛蜴生んèń/ 2022年05月29日 07:14/ 0 赞/ 190 阅读