jquery tiruan QQ kotak lungsur pilihan akaun log masuk effect_jquery

Apabila log masuk dengan QQ, anda boleh memilih akaun yang anda telah log masuk sebelum ini dan tidak menemui yang sesuai dengan saya Jadi memutuskan untuk membuatnya secara automatik.

Prinsipnya ialah menambah kotak teks dan ul untuk mensimulasikan kotak lungsur dan menggunakan fon untuk mensimulasikan butang lungsur.

1. Cipta kesan statik

Mula-mula gunakan css dan html untuk menjadikannya kelihatan seperti sepatutnya. Dua fon yang saya gunakan di sini adalah fon yang boleh dibuat sendiri di laman web icomoon. Kelebihan menggunakan fon ialah sangat mudah untuk meletakkan kotak input, dan anda juga boleh mengawal saiz, warna, dsb. Satu-satunya kelemahan ialah IE6 dan IE7 tidak boleh memaparkan fon ini kerana ia tidak menyokong pemilih :before , tetapi ia boleh dicapai melalui beberapa kaedah lain Anda boleh mencubanya sendiri. Berikut ialah kod 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. Terdapat gaya dan kelas dalam teg Gaya ini adalah atribut yang diperlukan dan mesti mempunyai

2. Bahagian paling luar dibalut dengan rentang, dan kemudian diberi atribut blok sebaris Sebab elemen sebaris digunakan adalah untuk kemudahan reka letak masa hadapan, tetapi dalam banyak kes menyekat elemen akan Dengan apungan dan gaya lain, ia lebih menyusahkan untuk mengawal

3. Ikon-sudut-bawah Ficomoon sedang mentakrifkan fon

4. Kedudukan atribut span adalah relatif kiri adalah berkod keras

5. Saya menambah tag pada kandungan dalam li Saya hanya mahu malas di sini terpulang kepada kandungan untuk menukar gaya

Berikut ialah kod CSS:

@font-face {
  font-family: 'icomoon';
  src:url('fonts/icomoon.eot?-fl11l');
  src:url('fonts/icomoon.eot?#iefix-fl11l') format('embedded-opentype'),
    url('fonts/icomoon.woff?-fl11l') format('woff'),
    url('fonts/icomoon.ttf?-fl11l') format('truetype'),
    url('fonts/icomoon.svg?-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 dan gaya lain di sini boleh disesuaikan dan gaya CSS3 boleh ditambah untuk mencantikkan mereka. Saya buat gaya ringkas di sini.

2. Cipta kesan khas JS

Semasa saya melakukan JS, saya menghadapi masalah pelik, iaitu, tiada ralat akan dilaporkan dalam mana-mana penyemak imbas, tetapi dalam IE6, ia akan menyebabkan ralat sifat objek yang tidak ditetapkan Akhirnya, saya mendapati bahawa ia adalah kerana daripada masalah pengekodan fail js, bukan UTF-8, cuma tukar pengekodan.

Pertama ialah format pemalam jquery

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

Kemudian tambah parameter lalai

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

Kemudian terdapat kaedah rendering

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

Janakan kotak input, butang, kotak lungsur turun, lampirkan gaya dan masa secara dinamik. Saya meletakkan tiga rendering dalam tiga fungsi masing-masing untuk menjadikannya lebih jelas

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;
      }

Saya menambah simbol $ pada parameter dalam tiga fungsi supaya saya dapat mengetahui bahawa ini adalah objek jquery. Tiada masalah teknikal dalam fungsi ini Semuanya adalah logik yang biasa dan semula jadi Anda juga boleh menukar kod pada bila-bila masa mengikut keperluan anda sendiri Pemalam hanya mempunyai jumlah 50 baris, yang sangat mudah untuk mengubah suai.

Berikut ialah pemalam panggilan:

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

Ia hanya memerlukan satu ayat, yang sangat mudah.

Arahan tambahan:
Baru-baru ini saya menggunakan pemalam ini dalam projek sebenar dan menghadapi beberapa masalah baharu:

1. Dalam projek sebenar, nilai dalam kotak input yang dijana secara dinamik mesti diambil pada akhirnya. parameter lalai , kawalnya 2. Jika tiada kandungan dalam senarai juntai bawah, tidak perlu memanggil kaedah _initSelect

if(options.datas.length > 0)
 _initSelect(_this, this);//初始化下拉列表

3. Selepas mengklik butang turun, kandungan drop-down dipaparkan Anda mesti memilih kandungan tertentu sebelum anda boleh menyembunyikan kotak drop-down. Saya mencari kod yang berkaitan di Internet >

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.

//点击其他地方影藏下拉列表
$(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改变
  }
});