コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > jquery模倣QQログインアカウント選択ドロップダウンボックスeffect_jquery

jquery模倣QQログインアカウント選択ドロップダウンボックスeffect_jquery

WBOY
リリース： 2016-05-16 15:09:52
オリジナル
1320 人が閲覧しました

QQでログインするときに、以前ログインしたアカウントを選択できるのですが、これはWebサイトにログインするときにも使えるので、こんなプラグインを作りたいと思い、ネットで色々探しました。私に合ったものが見つからなかったので、自動的に作成することにしました。

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

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

まず、CSS と HTML を使用して、見た目を整えます。ここで使用する2つのフォントは、icomoonのWebサイトで自作できるフォントです。フォントを使用する利点は、入力ボックスの配置が非常に便利で、サイズや色なども制御できることです。唯一の欠点は、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)">选项一</a></li>
    <li><a href="javascript:void(0)">选项二</a></li>
    <li><a href="javascript:void(0)">选项三</a></li>
    <li><a href="javascript:void(0)">选项四</a></li>
  </ul>
</span>
ログイン後にコピー

1. タグにはスタイルとクラスがあり、このスタイルは必須の属性です。

が必要です。

2. 最も外側の部分をspanで囲み、inline-block属性を付与します。これは、将来のレイアウトの便宜のためであり、ブロック要素に置き換えることも可能です。多くの場合、ブロック要素は float やその他のスタイルの場合、

を制御するのがさらに面倒になります。

3. Ficomoon icon-angle-bottom はフォントを定義しています

4. スパンの属性位置は相対的です。将来的には、ul の位置を jquery Left に基づいて取得できるようにする予定です。ハードコーディングされている

5. li のコンテンツに a タグを追加しました。a タグには :hover 疑似クラスがあり、記述を減らして移動できます。特殊効果は内容次第です

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);
ログイン後にコピー

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

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)">'+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>
ログイン後にコピー

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

追加手順:
私は最近実際のプロジェクトでこのプラグインを使用しましたが、いくつかの新しい問題に遭遇しました:

1. 実際のプロジェクトでは、動的に生成された入力ボックスの値を最後に取得する必要があります。この場合、新しい inputId を追加する必要があります。デフォルトのパラメータ 、それを制御します

2. ドロップダウン リストにコンテンツがない場合は、_initSelect メソッドを呼び出す必要はありません 

if(options.datas.length > 0)
 _initSelect(_this, this);//初始化下拉列表
ログイン後にコピー

3. 下ボタンをクリックすると、ドロップダウン ボックスを非表示にする前に、特定のコンテンツを選択する必要があります。これは不便です。 > 

//点击其他地方影藏下拉列表
$(document).click(function(e) {
  e = window.event || e; // 兼容IE7
  var $obj = $(e.srcElement || e.target);
  if($obj.closest($border).length <= 0) {
   $ul.hide();
   $border.children('font').removeClass('icon-angle-top').addClass('icon-angle-bottom');//确定的时候要将下拉的icon改变
  }
});
ログイン後にコピー
以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。

関連ラベル：
jquery仿QQ登录账号选择 jquery选择下拉框 jquery下拉框 jquery选择下拉
ソース：php.cn
前の記事：互換モードでの Ajax エラーに対する迅速な解決策_jquery 次の記事：Javascriptにおける複数の継承メソッドの比較分析_基礎知識
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2244
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2384
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1992
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1881
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1950
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート