検索
ホームページウェブフロントエンドjsチュートリアルjquery_jquery に基づく編集可能なドロップダウン ボックスの実装コード

原則は、テキストボックスを UL に追加してドロップダウン ボックスをシミュレートし、フォントを使用してドロップダウン ボタンをシミュレートすることです。

1. 静的エフェクトを作成します

まず、CSS と HTML を使用して、見た目を整えます。ここでは の 2 つのフォントを使用しています。これらのフォントは、icoon ウェブサイトで自分で作成できます。フォントを使用する利点は、入力ボックスの配置が非常に便利で、サイズや色なども制御できることです。唯一の欠点は、IE6 および IE7 は :before セレクターをサポートしていないため、このフォントを表示できないことです。ですが、他の方法でも実現できますので、自分で試してみることもできます。以下はHTMLコードです

<span style="display:inline-block;position:relative" class="combox_border">
 <input type="text" class="combox_input"/><font class="ficomoon icon-angle-bottom combox_button" style="display:inline-block"></font>
 <ul style="position:absolute;top:29px;left:-1px" class="combox_select">
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项一</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项二</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项三</a></li>
 <li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >选项四</a></li>
 </ul>
</span>

1. タグにはスタイルとクラスがあり、このスタイルは必須の属性です。
が必要です。 2. 最も外側の部分をspanで囲み、inline-block属性を付与します。 inline要素を使用する理由は、将来のレイアウトの便宜のためです。ブロック要素に置き換えることもできますが、多くの場合、ブロック要素が使用されます。フローティングやその他のスタイルは制御がより困難です
3. Ficomoon icon-angle-bottom はフォント
を定義しています 4. スパンの属性位置は相対的であり、将来的には、ul の位置は jquery left に従って絶対的になるようにする予定です。コード化された
5. li のコンテンツに a タグを追加しました。ここでは、a タグを上に移動すると CSS が変更されるため、移動による特殊な効果を減らすことができます。スタイルを変更するにはコンテンツまで。

以下は CSS コードです:

@font-face {
 font-family: 'icomoon';
 src:url('fonts/icomoon.eot&#63;-fl11l');
 src:url('fonts/icomoon.eot&#63;#iefix-fl11l') format('embedded-opentype'),
 url('fonts/icomoon.woff&#63;-fl11l') format('woff'),
 url('fonts/icomoon.ttf&#63;-fl11l') format('truetype'),
 url('fonts/icomoon.svg&#63;-fl11l#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}
.ficomoon{font-family:'icomoon';}
.icon-angle-top:before {content: "\f102"}.icon-angle-bottom:before {content: "\f103"}
/*下面的可根据自己的实际情况做修改*/
.combox_border{border:1px solid #c2c2c2;height:28px;width:245px}
.combox_input{border:0;line-height:25px;height:25px;padding-left: 5px;width:85%;vertical-align: middle;}
.combox_button{width:12%;text-align:center;vertical-align: middle;cursor:pointer;border-left:1px solid #c2c2c2}
.combox_select{border:1px solid #c2c2c2;border-top:0;width:100%}
.combox_select li{overflow:hidden;height:30px;line-height:30px;cursor:pointer;}
.combox_select a {display: block;line-height: 28px;padding: 0 8px;text-decoration: none;color: #666;}
.combox_select a:hover {text-decoration: none;background:#f5f5f5}

Combox_border やその他のスタイルはカスタマイズでき、CSS3 スタイルを追加して美しくすることができます。ここではシンプルなスタイルを作成しました。

2. JS 特殊効果を作成します

JS を実行しているときに、どのブラウザでもエラーが報告されないのに、IE6 ではオブジェクトのプロパティが設定されていないというエラーが表示されるという奇妙な問題に遭遇しました。最終的に、それが原因であることがわかりました。 js ファイルのエンコードの問題については、UTF-8 ではなく、エンコードを変更するだけです。

最初は jquery プラグイン形式です

(function($){
 $.fn.combox = function(options) {
 
 };
})(jQuery);

次にデフォルトパラメータを追加します

var defaults = { 
 borderCss: "combox_border", 
 inputCss: "combox_input", 
 buttonCss: "combox_button", 
 selectCss: "combox_select",
 datas:[]
};
var options = $.extend(defaults, options);

borderCss 最外面包裹的样式,就是上面的span
inputCss 输入框的样式
buttonCss 按钮的样式,就是
selectCss 下拉列表的样式
datas 下拉列表中的内容

次にレンダリング方法があります

this.each(function() {
var _this = $(this);
_this = _initBorder(_this);//初始化外框CSS IE6中需要有返回值
_this = _initInput(_this);//初始化输入框
_initSelect(_this);//初始化下拉列表
});

入力ボックス、ボタン、ドロップダウン ボックスを動的に生成し、スタイルと時間を追加します。わかりやすくするために、3 つのレンダリングをそれぞれ 3 つの関数に配置しました

       function _initBorder($border) {//初始化外框CSS
 $border.css({'display':'inline-block', 'position':'relative'}).addClass(options.borderCss);
 return $border;
 }
 
 function _initInput($border){//初始化输入框
 $border.append('<input type="text" class="'+options.inputCss+'"/>');
 $border.append('<font class="ficomoon icon-angle-bottom '+options.buttonCss+'" style="display:inline-block"></font>');
 //绑定下拉特效
 $border.delegate('font', 'click', function() {
 var $ul = $border.children('ul');
 if($ul.css('display') == 'none') {
 $ul.slideDown('fast');
 $(this).removeClass('icon-angle-bottom').addClass('icon-angle-top');
 }else {
 $ul.slideUp('fast');
 $(this).removeClass('icon-angle-top').addClass('icon-angle-bottom');
 } 
 });
 return $border;//IE6需要返回值
 }
 
 function _initSelect($border) {//初始化下拉列表
 $border.append('<ul style="position:absolute;left:-1px;display:none" class="'+options.selectCss+'">');
 var $ul = $border.children('ul');
 $ul.css('top',$border.height()+1);
 var length = options.datas.length;
 for(var i=0; i<length ;i++)
 $ul.append('<li><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+options.datas[i]+'</a></li>');
 $ul.delegate('li', 'click', function() {
 $border.children(':text').val($(this).text());
 $ul.hide();
 $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
 });
 return $border;
 }

これが jquery オブジェクトであることがわかるように、3 つの関数のパラメーターに $ 記号を追加しました。これらの関数には技術的な難しい点はなく、必要に応じていつでもコードを変更できるため、非常に簡単です。修正する。

以下は呼び出しプラグインです:

<script type="text/javascript">
$(document).ready(function() {
 $('#combox').combox({datas:['选项一','选项二','选项三']});
})
</script>
</head>
<body>
  <span id="combox"></span>
</body>
</html>

一文だけで済むのでとても便利です。

デモデモ: http://demo.jb51.net/js/2014/combox_jquery/

デモのダウンロード: http://www.jb51.net/jiaoben/199034.html

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
如何使用 Vue 实现可编辑的数据表格?如何使用 Vue 实现可编辑的数据表格?Jun 25, 2023 pm 06:20 PM

随着前端技术的不断发展,数据表格成为企业管理及数据展示的重要工具之一。在日常开发中,有时需要在数据表格中进行数据修改或新增操作,这时候就需要实现可编辑的数据表格。本文将介绍如何使用Vue实现可编辑的数据表格。一、实现思路在实现可编辑的数据表格功能时,我们需要考虑以下几点:数据呈现:将数据渲染到表格中,以便展示和编辑。表格编辑:在表格中对数据进行编辑操作。

如何在Vue中实现多选下拉框如何在Vue中实现多选下拉框Nov 07, 2023 pm 02:09 PM

如何在Vue中实现多选下拉框在Vue开发中,下拉框是常见的表单组件之一。通常情况下,我们都使用单选下拉框来选择一个选项。但是,有时候我们需要实现多选下拉框,以便用户可以同时选择多个选项。在本文中,我们将介绍如何在Vue中实现多选下拉框,并提供具体的代码示例。一、使用ElementUI组件库ElementUI是一套基于Vue的桌面端组件库,提供了丰富的UI

如何使用Layui开发一个支持可编辑的个人日程管理系统如何使用Layui开发一个支持可编辑的个人日程管理系统Oct 25, 2023 am 11:42 AM

如何使用Layui开发一个支持可编辑的个人日程管理系统近年来,随着信息化技术的快速发展和人们生活节奏的加快,个人日程管理变得越来越重要。为了让人们更好地管理自己的时间和任务,我们可以使用Layui,这是一款基于JavaScript的前端UI框架,它提供了丰富的组件和简洁的风格,非常适合用来开发个人日程管理系统。一、环境准备首先,我们需要准备好开发环境。确保你

如何使用Vue和Canvas开发可编辑的矢量图形应用如何使用Vue和Canvas开发可编辑的矢量图形应用Jul 19, 2023 pm 03:07 PM

如何使用Vue和Canvas开发可编辑的矢量图形应用引言:近年来,矢量图形在设计领域的应用越来越广泛,有很多基于矢量图形的设计工具如AdobeIllustrator等。在Web开发中,我们也希望能够开发出可编辑的矢量图形应用,以满足用户对设计的自定义需求。本文将介绍如何使用Vue和Canvas开发可编辑的矢量图形应用,并提供详细的代码示例。准备工作首先,我

Vue文档中的可编辑表格实现方法Vue文档中的可编辑表格实现方法Jun 20, 2023 pm 06:43 PM

Vue.js是目前非常流行的前端框架之一,它使用数据驱动的方式来构建用户界面,具有数据双向绑定、组件化等特点。在Vue.js的文档中,提供了一个实现可编辑表格的方法,本文将介绍这种方法的具体实现步骤。准备数据首先要准备一组数据,这里以学生信息为例。数据格式可以是一个数组,每个元素包含姓名、性别、年龄等属性。students:[{name:'小明

如何利用Layui实现可编辑的表格功能如何利用Layui实现可编辑的表格功能Oct 25, 2023 am 11:27 AM

如何利用Layui实现可编辑的表格功能Layui是一套经典而简洁的前端UI框架,具有丰富的组件和强大的功能。在使用Layui开发过程中,我们可能会遇到需要实现可编辑的表格功能的需求。本文将介绍如何利用Layui的table组件和form表单组件,实现可编辑的表格功能,并提供具体的代码示例。一、引入Layui库首先,在项目中引入Layui库的相关文件。可以选择

Vue移动端下拉框滚动问题解决方案Vue移动端下拉框滚动问题解决方案Jun 29, 2023 pm 11:49 PM

Vue开发中如何解决移动端下拉框滚动问题随着移动端的普及,越来越多的网页应用开始面向移动设备进行开发。而在移动端开发过程中,我们经常会遇到一个问题,就是下拉框在移动设备上的滚动问题。在传统的PC端,下拉框的滚动是由浏览器默认的滚动条控制的,而在移动设备上,并没有滚动条,因此会导致下拉框无法进行滚动。这在某些场景下会造成用户无法选择到下拉框中的所有选项的问题。

Vue组件开发:下拉框组件实现方法Vue组件开发:下拉框组件实现方法Nov 24, 2023 am 09:33 AM

Vue组件开发:下拉框组件实现方法在Vue开发中,下拉框(Dropdown)是一个常见的UI组件。下拉框用于展示一组选项,并允许用户从中选择一个或多个选项。本文将通过具体的代码示例,介绍如何使用Vue实现一个简单的下拉框组件。首先,我们需要创建一个名为Dropdown.vue的单文件组件。在组件的模板中,我们可以使用Vue的指令v-for来循环渲染下拉框的选

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール