模擬select彈框

tomorrowwu 發布于2019-08-29 12:54 / 3471人閱讀

摘要：模擬彈框功能點點擊顯示下拉框，再次點擊下拉框下拉框消失點擊下拉框將值賦值給點擊下拉框之外區域，下拉框消失模擬彈框模擬下拉請選擇請選擇男女

模擬select彈框

功能點：

點擊text顯示下拉框，再次點擊下拉框下拉框消失

點擊下拉框將值賦值給text

點擊下拉框之外區域，下拉框消失

html





    
    模擬select彈框
    



    
    
        --請選擇--
        
            --請選擇--
            男
            女

css:

/*
* @Author: baby
* @Date:   2017-07-06 12:37:56
* @Last Modified by:   baby
* @Last Modified time: 2017-07-06 14:38:51
*/

.model-select-box {
    position: relative;
    width: 200px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    text-indent: 5px;
}

.model-select-box .model-select-text {
    position: relative;
    width: 100%;
    height: 28px;
    // height: 30px;
    // line-height: 30px;
    color: #666;
    text-indent: 10px;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
}

.model-select-box .model-select-text:after {
    position: absolute;
    top: 10px;
    right: 10px;
    content: "";
    width: 0;
    height: 0;
    border-width: 10px 8px 0;
    border-style: solid;
    border-color: #666 transparent transparent;
}

.model-select-box .model-select-option {
    position: absolute;
    top: 30px;
    left: -1px;
    display: none;
    list-style: none;
    border: 1px solid #e4e4e4;
    border-top: none;
    padding: 0;
    margin: 0;
    width: 100%;
    z-index: 99;
    background-color: #fff;
}

.model-select-box .model-select-option li {
    height: 28px;
    line-height: 28px;
    color: #333;
    font-size: 14px;
    margin: 0;
    padding: 0;
    // text-indent: 10px;
    cursor: pointer;
}

.model-select-box .model-select-option li:hover {
    background-color: #f3f3f3;
}

.model-select-box .model-select-option li.seleced {
    background-color: #f3f3f3;
}

js:

/*
 * @Author: baby
 * @Date:   2017-07-06 12:38:11
 * @Last Modified by:   baby
 * @Last Modified time: 2017-07-06 14:24:53
 * 模擬select彈框
 * 功能點：
 * 1. 點擊text顯示下拉框，再次點擊下拉框下拉框消失
 * 2. 點擊下拉框將值賦值給text
 * 3. 點擊下拉框之外區域，下拉框消失
 *
 */

"use strict";

$(function() {
    selectModel();
});

/**
 * 模擬網頁中所有下拉列表select
 * @return {[type]} [description]
 */
function selectModel() {
    var $box = $("div.model-select-box");
    var $option = $("ul.model-select-option", $box);
    var $txt = $("div.model-select-text", $box);
    var speed = 10;
    /**
     * 單擊某個下拉列表時，顯示當前下拉列表的下拉列表框
     * 并隱藏頁面中其他下拉列表
     */
    $txt.on("click", function() {
        var $self = $(this);
        $option.not($self).siblings("ul.model-select-option").slideUp(speed, function() {
            init($self);
        });
        $self.siblings("ul.model-select-option").slideToggle(speed, function() {
            init($self);
        });
        return false;
    });

    // 點擊選擇，關閉其他下拉
    /**
     * 為每個下拉列表框中的選項設置默認選中標識 data-selected
     * 點擊下拉列表框中的選項時，將選項的 data-option 屬性的屬性值賦給下拉列表的 data-value 屬性，并改變默認選中標識 data-selected
     * 為選項添加 mouseover 事件
     */
    $option.find("li").each(function(index, element) {
        var $self = $(this);
        if ($self.hasClass("selected")) {
            $self.addClass("data-selected");
        }
    }).mousedown(function() {
        $(this).parent().siblings("div.model-select-text").text($(this).text()).attr("data-value", $(this).attr("data-option"));

        $option.slideUp(speed, function() {
            init($(this));
        });
        $(this).addClass("selected data-selected").siblings("li").removeClass("selected data-selected");
        return false;
    }).mouseover(function() {
        $(this).addClass("selected").siblings("li").removeClass("selected");
    });

    // 點擊文檔隱藏所有下拉
    $(document).on("click", function() {
        var $self = $(this);
        $option.slideUp(speed, function() {
            init($self);
        })
    });

    /**
     * 初始化默認選擇
     */
    function init(obj) {
        obj.find("li.data-selected").addClass("selected").siblings("li").removeClass("selected");
    }
}

云服務器 GPU云服務器模擬select 種彈框下彈框彈框

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112222.html

模擬select彈框

摘要：模擬彈框功能點點擊顯示下拉框，再次點擊下拉框下拉框消失點擊下拉框將值賦值給點擊下拉框之外區域，下拉框消失模擬彈框模擬下拉請選擇請選擇男女模擬select彈框功能點：點擊text顯示下拉框，再次點擊下拉框下拉框消失點擊下拉框將值賦值給text 點擊下拉框之外區域，下拉框消失 html 模擬select彈框 ...

ASCH 2019-08-20 17:47 評論0 收藏0
模擬select彈框

摘要：模擬彈框功能點點擊顯示下拉框，再次點擊下拉框下拉框消失點擊下拉框將值賦值給點擊下拉框之外區域，下拉框消失模擬彈框模擬下拉請選擇請選擇男女模擬select彈框功能點：點擊text顯示下拉框，再次點擊下拉框下拉框消失點擊下拉框將值賦值給text 點擊下拉框之外區域，下拉框消失 html 模擬select彈框 ...

xialong 2019-08-01 17:05 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

linkin 2019-08-02 15:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

shadowbook 2019-08-23 18:27 評論0 收藏0
在Vue項目中使用ElementUI(一)

摘要：這是一段內容標題名稱確定點擊確定后的回調函數確認消息彈框提示用戶確認其已經觸發的動作，并詢問是否進行此操作時會用到此對話框。。初始化一個Vue項目 F:Test>vue init webpack Test1 ? Project name test1 ? Project description A Vue.js project ? Author Selience ? Vue buil...

NicolasHe 2019-08-30 11:18 評論0 收藏0