下拉框選擇

1,簡單下拉框

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" ><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style type="text/css">ul{padding: 0;margin:0;}ul li{height: 25px;line-height:25px;list-style: none;border: 1px solid #ccc;}</style>
</head>
<body><div class="wrap"><div class="tg-select" ><input value="請選擇" readonly="readonly" type="text"><ul style="display: none;"><li data-value="1">1</li><li data-value="2">2</li><li data-value="3">3</li><li data-value="4">4</li></ul></div>		</div><script>$('.tg-select').click(function(){$(this).find('ul').toggle();})$('.tg-select li').click(function(){var val=$(this).text();$(this).parents('.tg-select').find('input').val(val);})</script>
</body>
</html>

2,帶遮罩層的下拉框選擇

?

?

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" ><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui, maximum-scale=1"><script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script><style type="text/css">*{padding: 0;margin: 0;}.input_select{width:150px; height:24px; line-height:24px;}#dropdown{width:170px;position:relation;}.drop-mask{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);z-index:99;display:none;}#dropdown ul{position:absolute;display:none;width: 100%;left: 0;bottom: 0;z-index:100;}#dropdown ul li{background:#fff;text-align:center;height:30px;line-height:30px;min-height:30px;width:auto;border-bottom: 1px solid #d4d4d4;}#dropdown ul li a{display:block;  color:#807a62; text-decoration:none} #dropdown ul li a:hover{background:#f4f4f4; color:#369} </style>
</head>
<body><div class="drop-mask"></div> <span><div id="dropdown"> <input readonly class="frameOrEngine input_select" type="text"  placeholder="請輸入選中數" />                         <ul> <li><a rel="4">4</a></li> <li><a rel="5">5</a></li> <li><a rel="6">6</a></li> <li><a rel="7">7</a></li><li><a rel="8">8</a></li> <li><a rel="9">9</a></li>  </ul>                             </div>                     </span> <script>    $(".input_select").click(function(){ var ul = $("#dropdown ul"); if(ul.css("display")=="none"){ ul.slideDown("fast"); $(".drop-mask").show();}else{ ul.slideUp("fast"); $(".drop-mask").hide();} });$("#dropdown ul li a").click(function(){ var txt = $(this).text(); $(".input_select").val(txt); $("#dropdown ul").hide(); $(".drop-mask").hide();});                    </script>    
</body>
</html>

?

轉載于:https://www.cnblogs.com/lvziyan/p/5916608.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/256303.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/256303.shtml
英文地址,請注明出處:http://en.pswp.cn/news/256303.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基于C#的TCP/IP協議應用(一)

一、背景與概念 1.標準以太網 以太網是美國Xerox&#xff08;施樂&#xff09;公司的Palo Alto研究中心于1975年研制成功的&#xff0c;其核心技術起源于ALOHA網。目前以太網是指符合IEEE 802.3標準的局域網(LAN)產品組&#xff0c;其中IEEE 802.3是一組電氣與電子工程師協會…

WORD文檔的超鏈接無法打開——“由于本機的限制該操作已被取消”的解決方法

之前我電腦還很正常&#xff0c;最近裝了一個打印機后&#xff0c;放在word文檔的文字超鏈接就打不開了&#xff0c;提示說“由于本機的限制該操作已被取消”&#xff0c;請各位高手指導下該怎樣解決這個問題&#xff1f; WORD文檔的超鏈接無法打開的原因是文件在插入超鏈接之…

廣義表的實現

廣義表是一種非線性表的數據結構&#xff0c;是線性表的一種推廣。他放松了對原子的控制&#xff0c;容許原子有自身的結構。其實現如下&#xff1a; #include<iostream>using namespace std;#include<assert.h>enum Type //原子類型有三種:頭結點&#xff0c…

C#中List列表與Datagridview的用法

初始化 創建空列表 List<int> List new List<int>();2.使用var類型的前提是預先知道變量的類型&#xff0c;會根據變量賦值來判定屬于什么類型&#xff0c;但此種賦值方法只能給局部變量賦值。 var list1 new List<string>();具體見&#xff1a; C#列表L…

Byte和byte[]數組

Byte和byte[]數組&#xff0c;“表示一個 8 位無符號整數, 一般為8位二進制數”。 Byte是計算機最基礎的存儲單位和最基礎的通訊單位。 而所有的類型都是支持由byte[]類型轉換而來。 為什么說Byte是最基礎類型那&#xff0c; 其實這里的關鍵所在是&#xff0c;計算機最基礎的算…

【圖像處理】——opencv常用函數

目錄 讀取圖像 注意: 1、imread和plt.show以及pil.image,show的區別: 2、imread中的rgb的順序 顯示圖像

網絡協議:TCP/IP、SOCKET、HTTP

網絡七層 由下往上分別為物理層、數據鏈路層、網絡層、傳輸層、會話層、表示層和應用層。其中物理層、數據鏈路層和網絡層通常被稱作媒體層&#xff0c;是網絡工程師所研究的對象&#xff1b;傳輸層、會話層、表示層和應用層則被稱作主機層&#xff0c;是用戶所面向和關心的內…

halcon自標定

概念 該算法可以在不使用標定板的情況下計算相機內參&#xff0c;從而進行畸變校正&#xff0c;適用于畸變較大的情況。算法很簡單&#xff1a; 1.求出圖像邊緣應進行分割。 2.基于篩選線段的自標定radial_distortion_self_calibration。 3.得到標定區域。 4.根據指定的徑向畸…

jdk動態代理

簡單的說&#xff0c;代理模式是在目標對象和訪問對象之間增加了一層代理對象&#xff0c;所有的訪問對象通過代理對象來實現對目標對象的調用。 代理對象和目標對象實現同一個接口&#xff0c;由代理對象來調用目標對象&#xff0c;對于外部來說&#xff0c;代理對象就可以替代…

【圖像處理】——圖像的灰度化處理(Python實現三種方法——最大值法、平均值法、加權均值法、gamma校正)

目錄 一、什么是圖像的灰度化? 二、灰度化的幾種方法(最大值法、平均值法、加權均值法、gamma校正)

配置https

引子&#xff1a; 最近在一篇文章中了解到EFF(電子前哨基金會)為了推廣https協議&#xff0c;成立了一個letsencrypt項目&#xff0c;可以發放免費的證書&#xff0c;此證書可以被大多數主流瀏覽器所信任&#xff0c;這個邪惡的念頭一爆發&#xff0c;就讓我走上了一條坎坷的不…

C# —— 序列化與反序列化

概念 序列化 通過使用不同的類(BinaryFormatter,SoapFormatter,XmlSerializer)將對象狀態轉換為可保持或傳輸的格式的過程,具體是將對象轉變為字節流,其目的是為了保存數據的狀態,方便后續還原調用。包括三種序列化形式:二進制序列化,SOAP序列化,XML序列化。于此過…

CentOS 6.5安裝VNC server

1. 安裝桌面&#xff0c;安裝時選擇了Desktop可以忽略 # yum groupinstall Desktop # yum install gnome-core xfce4 firefox 2. 安裝VNC server # yum install tigervnc-server 3. 配置服務 # chkconfig vncserver on 4. 設置VNC用戶密碼 # vncpasswd 5. 配置文件 # vi /etc/s…

【圖像處理】——圖像灰度直方圖的繪制(直接調用函數和自定義函數)

目錄 一、灰度直方圖概念 二、直接調用opencv的函數caclHist() 1、函數介紹 2、實例 <

Codeforces 722C. Destroying Array

C. Destroying Arraytime limit per test1 secondmemory limit per test256 megabytesinputstandard inputoutputstandard outputYou are given an array consisting of n non-negative integers a1,?a2,?...,?an. You are going to destroy integers in the array one by o…

C#中數據類型及其轉換知識點匯總

概念 C#中數據類型分為兩大類&#xff0c;分別是值類型和引用類型。 值類型變量是從類 System.ValueType 中派生出來的&#xff0c;當聲明一個值類型變量時&#xff0c;系統分配內存來存儲值。 整形 包括8種類型&#xff0c;區別在于字節數和有無符號。 浮點型 float占用…

10億個字符串的排序問題

一、問題描述 有一個大文件&#xff0c;里面有十億個字符串&#xff0c;亂序的&#xff0c;要求將這些字符串以字典的順序排好序 二、解決思路 將大文件切割成小文件&#xff0c;每個小文件內歸并排序&#xff1b; 對所有的小文件進行歸并排序——多重歸并排序 三、解決方案 3.…

MVC學習IIS的不同版本(一)

一&#xff1a;IIS5.0運行在進程InetInfo.exe中&#xff0c;該進程寄宿著一個名為World Wide Publishing Service&#xff08;W3VC&#xff09;的window服務。 W3VC的主要功能&#xff1a;包括HTTP請求的監聽、工作進程和配置管理 檢測到HTTP 請求時&#xff1a; 根據擴展名判斷…

Halcon中visualize_object_model_3d算子詳解

概念 此函數用于顯示3d模型。該函數功能很多,包括設置位姿,顏色,鼠標翻轉、縮放、平移,選擇和取消選擇目標,降低鼠標靈敏度,切換檢查模式等。 參數 visualize_object_model_3d( : : WindowHandle, ObjectModel3D, CamParam, PoseIn, GenParamName, GenParamValue, Tit…