无涯教程-jQuery - Select menu组件函数

news2024/11/19 3:45:50

小部件选择菜单功能可与JqueryUI中的小部件一起使用,它提供了可替换样式的选择元素。一个简单的选择菜单如下所示。

Select menu - 语法

$( "#menu" ).selectmenu();

Select menu - 示例

以下是显示选择菜单用法的简单示例-

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>jQuery UI Selectmenu - Default functionality</title>
		
      <link rel="stylesheet" 
         href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
			
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
  
      <script>
         $(function() {
            $( "#speed" ).selectmenu();
            $( "#files" ).selectmenu();
            $( "#number" ).selectmenu().selectmenu( "menuWidget" ).addClass( "overflow" );
         });
      </script>
		
      <style>
         fieldset {
            border: 0;
         }
			
         label {
            display: block;
            margin: 30px 0 0 0;
         }
			
         select {
            width: 200px;
         }
			
         .overflow {
            height: 200px;
         }
      </style>
   </head>
	
   <body>
      <div class="demo">
 
         <form action="#">
 
            <fieldset>
		
               <label for="speed">Select a speed</label>
			
               <select name="speed" id="speed">
                  <option>Slower</option>
                  <option>Slow</option>
                  <option selected="selected">Medium</option>
                  <option>Fast</option>
                  <option>Faster</option>
               </select>
 
               <label for="files">Select a file</label>
					
               <select name="files" id="files">
					
                  <optgroup label="Scripts">
                     <option value="jquery">jQuery.js</option>
                     <option value="jqueryui">ui.jQuery.js</option>
                  </optgroup>
						
                  <optgroup label="Other files">
                     <option value="somefile">Some unknown file</option>
                     <option value="someotherfile">Some other file with a
                        very long option text</option>
                  </optgroup>
						
               </select>
 
               <label for="number">Select a number</label>
					
               <select name="number" id="number">
                  <option>1</option>
                  <option selected="selected">2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                  <option>6</option>
                  <option>7</option>
                  <option>8</option>
                  <option>9</option>
                  <option>10</option>
                  <option>11</option>
                  <option>12</option>
                  <option>13</option>
                  <option>14</option>
                  <option>15</option>
                  <option>16</option>
                  <option>17</option>
                  <option>18</option>
                  <option>19</option>
               </select>
					
            </fieldset>
 
         </form>
 
      </div>
   </body>
</html>

这将产生以下输出-

jQuery 中的 Select menu组件函数 - 无涯教程网无涯教程网提供小部件选择菜单功能可与JqueryUI中的小部件一起使用,它提供了可替换样式的选择元素。...https://www.learnfk.com/jquery/widget-selectmenu.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/813471.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于Java的多线程实现

多线程介绍 进程&#xff1a;进程指正在运行的程序。确切的来说&#xff0c;当一个程序进入内存运行&#xff0c;即变成一个进程&#xff0c;进程是处于运行过程中的程序&#xff0c;并且具有一定独立功能。 线程&#xff1a;线程是进程中的一个执行单元&#xff0c;负责当前进…

大数据课程D11——hadoop的Ganglia

文章作者邮箱&#xff1a;yugongshiyesina.cn 地址&#xff1a;广东惠州 ▲ 本章节目的 ⚪ 了解Ganglia的概念&#xff1b; ⚪ 掌握Ganglia的安装操作&#xff1b; ⚪ 掌握Ganglia的监控Flume操作&#xff1b; 一、概述 1. Ganglia是UC Berkeley发起的一个开源…

JVM基础篇-程序计数器

程序计数器 定义 Program Counter Register 程序计数器&#xff08;寄存器&#xff09; 作用:记住下一条jvm指令的执行地址特点 是线程私有的:每个线程都有自己的程序计数器不会存在内存溢出(规定) 作用 左侧:jvm指令 右侧:java代码 0: getstatic #20 // PrintSt…

三维点云与深度图相互转换

点云转深度图 一、效果二、实现原理与代码2.1 获取点云边界2.2 确定图像大小2.3 稀疏点图像填充2.4 完整代码三、由深度图转换回点云信息丢失问题3.1 深度图转点云3.2 深度图转点云代码3.3 多视角的深度图融合一、效果 对点云进行转换,z向表示深度,转换效果如下 二、实现…

Docker安装配置启动Oracle11g容器解决ORA-12541:TNS: 无监听程序连接第三方客户端

Windows下安装可参考我这篇&#xff1a;win11&win7下安装oracle11g数据库全过程 一、下载与启动 前提&#xff1a;需要安装配置好docker(设置镜像源、配置阿里云加速)等&#xff0c;可参考我这篇 基于CentOS7安装配置docker与docker-compose 。 Docker容器相关操作可参考…

【自动化运维】playbook剧本

目录 一、Ansible 的脚本 playbook 剧本1.1playbooks的组成 二、剧本编写实验2.1定义、引用变量2.2使用远程主机sudo切换用户2.3whenn条件判断2.4迭代 三、Templates 模板四、Tags模板 一、Ansible 的脚本 playbook 剧本 1.1playbooks的组成 &#xff08;1&#xff09;Tasks&…

Diffusion扩散模型学习2——Stable Diffusion结构解析-以文本生成图像(文生图,txt2img)为例

Diffusion扩散模型学习2——Stable Diffusion结构解析-以文本生成图像&#xff08;文生图&#xff0c;txt2img&#xff09;为例 学习前言源码下载地址网络构建一、什么是Stable Diffusion&#xff08;SD&#xff09;二、Stable Diffusion的组成三、生成流程1、文本编码2、采样流…

Python自动化测试----生成测试报告

如何才能让用例自动运行完之后&#xff0c;生成一张直观可看易懂的测试报告呢&#xff1f; 对于自动化测试有兴趣的朋友可以观看这个视频&#xff1a; 【整整200集】超超超详细的Python接口自动化测试进阶教程&#xff0c;真实模拟企业项目实战&#xff01;&#xff01; 小编使…

【Ap模块EM】09- 什么是Manifest?

先直观感受一下下面的这个服务定义: -fidl文字描述版本: arxml版本: 了解Manifest之前,我们了解一下AutoSAR是怎么开发的? AUTOSAR方法论 AUTOSAR 提供了一种开发方法论,该方法描述了从抽象系统定义一直到最终 EUC 可执行文件的流程步骤,并包含设计步骤和工作产品列…

读取application-dev.properties的中文乱码【bug】

读取application-dev.properties的中文编码【bug】 2023-7-30 22:37:46 版权 禁止其他平台发布时删除以下此话 本文首次发布于CSDN平台 作者是CSDN日星月云 博客主页是https://blog.csdn.net/qq_51625007 禁止其他平台发布时删除以上此话 bug 读取application-dev.propert…

详解Unity中的Nav Mesh|导航寻路系统 (一)

前言 在类RTS、RPG游戏中&#xff0c;都会提供自动寻路功能&#xff0c;当玩家下达指令后&#xff0c;NPC就会自动计算到达目标的路径&#xff0c;实现这种功能的方式有很多种&#xff0c;其中Unity本身也自带了一种导航寻路系统&#xff0c;该系统会将游戏场景中复杂的对象烘…

STM32入门学习之外部中断

1.STM32的IO口可以作为外部中断输入口。本文通过按键按下作为外部中断的输入&#xff0c;点亮LED灯。在STM32的19个外部中断中&#xff0c;0-15为外部IO口的中断输入口。STM32的引脚分别对应着0-15的外部中断线。比如&#xff0c;外部中断线0对应着GPIOA.0-GPIOG.0&#xff0c;…

SpaceX 摊上事?未获环境许可,星舰发射系统涉嫌违规排放污染物

马斯克“寄予厚望”的星舰SpaceX最近可能摊上事了&#xff0c;疑似未申请环境许可&#xff0c;星舰发射系统涉嫌违规排放污染物。 据报导&#xff0c;SpaceX可能在火焰偏转器系统方面存在环境许可问题&#xff0c;其在火箭发射时&#xff0c;可能涉及违反相关环境法规。 最近&a…

深入学习 Redis - 基于 Spring Data Redis 操作 Redis

目录 一、前置工作 1.1、引入 Spring Data Redis 依赖 1.2、编写配置文件 二、Spring Data Redis 2.1、前置知识 2.2、演示 Demo 一、前置工作 1.1、引入 Spring Data Redis 依赖 1.2、编写配置文件 spring:redis:host: 127.0.0.1port: 8888二、Spring Data Redis 2.1、…

yolo系列笔记(v4-v5)

YOLOv4 YOLOv4网络详解_哔哩哔哩_bilibili 网络结构&#xff0c;在Yolov3的Darknet的基础上增加了CSP结构。 CSP的优点&#xff1a; 加强CNN的学习能力 去除计算瓶颈。 减少显存的消耗。 结构为&#xff1a; 、 其实还是类似与残差网络的结构&#xff0c;保留下采样之前…

标准IO_格式化IO之printf函数

目录 1.可变参数原理 1.1 函数参数入栈原理 1.2 可变参数如何实现&#xff1f; 1.2.1 可变参数实现原理 1.2.2 固定参数有什么用&#xff1f; 1.2.3 va_start,va_arg,va_end如何使用&#xff1f; 2.printf函数实现原理 2.1 printf函数流程 2.2 printf函数格式解析原理…

WebSocket协议解析

文章目录 概要一、WS原理1.1、帧格式 二、WS实战2.1、客户端发起协议升级请求2.2、服务端响应协议升级2.3、核心事件2.4、心跳保活 三、总结 概要 项目中的IM系统是基于WebSocket做的&#xff0c;所以这里聊一下。 说到WS&#xff0c;不得不提HTTP,HTTP是基于TCP&#xff0c;面…

Mycat分片函数详解

Mycat新一代Mysql分布式集群,大数据处理中间件,中国第一开源软件 Checkout项目 可以用eclipse的svn插件来进行项目检出,也可以用Tortoise SVN等工具检出,由于maven(M2)中的buildnumber-maven-plugin 中的SVNkit最高支持1.7的SVN仓库,因此当你用Tortoise SVN 1.8的工具或版…

聊聊原子弹之父:奥本海默

最近诺兰的电影奥本海默即将热映,其改编自Kai Bird和 Martin J. Sherwin的 2005 年Pulitzer Prize 获奖小说:“American Prometheus: The Triumph and Tragedy of J. Robert Oppenheimer”。这本小说作者研究奥本海默25年,才得以成形,可见奥神本人身上的故事曲折和传奇。 …

MP的开发流程-2

RESTful的实现等级 0级&#xff1a;传统的RPC&#xff0c;基于SOAP的WS&#xff0c;调用的服务名&#xff0c;参数放在HTTP协议的body里面&#xff0c;同时必须以POST方式提交&#xff0c;问题在于你必须清楚的知道所有服务&#xff0c;子服务&#xff0c;及其参数的信息&…