下拉_下拉框 - CSDN
精华内容
参与话题
  • select下拉框多选,超级好用!十分强大!

    万次阅读 多人点赞 2020-07-23 10:17:46
    先说点废话:一个需求,想把select变成下拉多选,网上查找了半天,给出的方案都是自定义一个标签,或者弄个什么ul下面li进行选择,看起来就繁琐,本人只想在select上面做文章,不得已,自己写了一个,只需要在select...

         

    正文:

            先说点废话:一个需求,想把select变成下拉多选,网上查找了半天,给出的方案都是自定义一个标签,或者弄个什么ul下面li进行选择,看起来就繁琐,本人只想在select上面做文章,不得已,自己写了一个,只需要在select上加个属性即可,方便实用!

           2019.11.30之前,算是selectMultip的第一个版本,没想到用的人还不少,自然也发现了很多隐藏的bug,虽然它比较简单但大家使用时还是有些困惑,基于以上等原因,selectMultip2.0问世(哈哈),2.0做了全面的升级,不仅解决了之前发现的bug,而且新增了api,使用方法还是原来的步骤:1、引入js文件,2、在select标签上添加属性multip,然后调用方法即可(只有两步哦!)

    可以先访问一下这里哟:演示地址 (不想访问也可以往下读)

    先上图:

    这个是选中后的效果,我们用的是select标签,选中后子标签会变成蓝色,如果想取消,再点击一下即可取消

    取值,调用selectMultip.getVal("22")方法即可:

    赋值,调用selectMultip.setVal(id,data)即可,第二个参数类型可以是字符串或者数组,如图:

    具体取值、赋值、动态加载等可以看下面的说明文档哦!

    那现在就开始使用吧(只需要两步):

    首先,将下面的js代码复制到一个js文件中(js文件名可以命名为selectMultip哦),并将其引入项目中即可。

    (function() {
    		selectMultip = {
    			register: function(id) {
    				//大致思路是:为下拉选创建一个隐藏的子选项,每次单选之后将单选的值追加到隐藏的子选项中,并将子选项选中显示即可
    				//全局查找所有标记multip的select
    				document.querySelectorAll("[multip]").forEach(function(e) {
    					render(e);
    				})
    			},
    			reload: function(id, data, setData) {
    				var htm = "";
    				for(var i = 0; i < data.length; i++) {
    					htm += '<option value="' + data[i].value + '">' + data[i].text + '</option>'
    				}
    				var e = document.getElementById(id);
    				e.innerHTML = htm;
    				render(e);
    				this.setVal(id, setData);
    			},
    			setVal: function(id, str) {
    				var type = Object.prototype.toString.call(str);
    				switch(type) {
    					case "[object String]":
    						document.getElementById(id).val = str;
    						break;
    					case "[object Array]":
    						document.getElementById(id).val = str.toString();
    						break;
    					default:
    						break;
    				}
    			},
    			getVal: function(id) {
    				return document.getElementById(id).val;
    			},
    
    		}
    
    		function render(e) {
    			e.param = {
    				arr: [],
    				valarr: [],
    				opts: []
    			};
    			var choosevalue = "",
    				op;
    
    			for(var i = 0; i < e.length; i++) {
    				op = e.item(i);
    				e.param.opts.push(op);
    				if(op.hasAttribute("choose")) {
    					if(choosevalue == "") {
    						choosevalue = op.value
    					} else {
    						choosevalue += "," + op.value;
    					}
    
    				}
    			}
    
    			//创建一个隐藏的option标签用来存储多选的值,其中的值为一个数组
    			var option = document.createElement("option");
    			option.hidden = true;
    			e.appendChild(option);
    			e.removeEventListener("input", selchange);
    			e.addEventListener("input", selchange);
    
    			//重新定义标签基础属性的get和set方法,实现取值和赋值的功能
    			Object.defineProperty(e, "val", {
    				get: function() {
    					return this.querySelector("[hidden]").value;
    				},
    				set: function(value) {
    					e.param.valarr = [];
    					var valrealarr = value == "" ? [] : value.split(",");
    					e.param.arr = [];
    					e.param.opts.filter(function(o) {
    						o.style = "";
    					});
    					if(valrealarr.toString()) {
    						for(var i = 0; i < valrealarr.length; i++) {
    							e.param.opts.filter(function(o) {
    								if(o.value == valrealarr[i]) {
    									o.style = "color: blue;";
    									e.param.arr.push(o.text);
    									e.param.valarr.push(o.value)
    								}
    							});
    						}
    						this.options[e.length - 1].text = e.param.arr.toString();
    						this.options[e.length - 1].value = e.param.valarr.toString();
    						this.options[e.length - 1].selected = true;
    					} else {
    						this.options[0].selected = true;
    					}
    
    				},
    				configurable: true
    			})
    			//添加属性choose 此属性添加到option中用来指定默认值
    			e.val = choosevalue;
    			//添加属性tip 此属性添加到select标签上
    			if(e.hasAttribute("tip") && !e.tiped) {
    				e.tiped = true;
    				e.insertAdjacentHTML('afterend', '<i style="color: red;font-size: 12px">*可多选</i>');
    			}
    		}
    
    		function selchange() {
    			var text = this.options[this.selectedIndex].text;
    			var value = this.options[this.selectedIndex].value;
    			this.options[this.selectedIndex].style = "color: blue;";
    			var ind = this.param.arr.indexOf(text);
    			if(ind > -1) {
    				this.param.arr.splice(ind, 1);
    				this.param.valarr.splice(ind, 1);
    				this.param.opts.filter(function(o) {
    					if(o.value == value) {
    						o.style = "";
    					}
    				});
    			} else {
    				this.param.arr.push(text);
    				this.param.valarr.push(value);
    			}
    			this.options[this.length - 1].text = this.param.arr.toString();
    			this.options[this.length - 1].value = this.param.valarr.toString();
    			if(this.param.arr.length > 0) {
    				this.options[this.length - 1].selected = true;
    			} else {
    				this.options[0].selected = true;
    			}
    		}
    	})();

    其次,在你的select上面加一个multip属性,如图:

    然后,就是代码的实现:

    调用一下这个selectMultip.register();方法即可。

    这个方法是对标有multip属性的select标签进行注册渲染,这样它就具备了多选的功能!

    完成!


    下面是使用的说明文档,总共四个方法!

    说明文档
    方法名 参数 说明
    selectMultip.register() 将全局下所有具有multip属性的select标签注册成为具有多选功能的下拉选。
    selectMultip.reload(id, data,setData)

    id:select标签上的id值

    data:渲染的数据

    格式如下:[{
            value: "",
            text: "---请选择---"
        }, {
            value: 1,
            text: "薯片"
        }, {
            value: 2,
            text: "大豆油"
        }, {
            value: 3,
            text: "花生"
        }]

    setData:设置默认值,可选。具体格式可参照selectMultip.selVal()方法的第二个参数

    重新渲染,使用于联动或者动态渲染select标签的场景,从后台服务器获得数据之后可调用此方法。

    selectMultip.setVal(id, data)

    id:select标签上的id值

    data: 可以为字符串,如:“1,2,3”或者“a,b,c”

     也可以为数组,如[1,2,3]或者["a","b","c"]

    给标签赋值
    selectMultip.getVal(id) id:select标签上的id值 取值

                


    关于动态渲染说明以及示例

    需要动态加载的select下拉选项我们往往异步请求后台拿到数据后,对下拉选进行拼接,这个繁琐的步骤已经在reload方法中做好了,我们只需要传递正确的数据就可以完成,下面举个例子,假设我们使用jquery的ajax获取后台数据:

    我们代码需要这么写:

    $.ajax({
        url: url,
        type: type ,
        data: param,
        success: function (res) {
            //data中如果是[{value: 1,text: "薯片"}]格式与字段直接传递,如果不是 特别注意  字段名要一致
           //假设我们拿到是数据是[{id: 1,name: "薯片"}]
    
             var data = []
             for(var i = 0;i < res.list.length;i++){
                var obj ={};
                obj.value=res.list[i].id;
                 obj.text=res.list[i].name;
                data.push(obj);
             }
    
             selectMultip.reload(id, data,setData);
    
        },
       
    })

     


    标签属性说明:

    multip:select标签上的属性,用来标识此标签为下拉多选

    tip:select标签上的属性,用来提示用户为多选框如图:

    choose:设置默认选中项,在option标签上添加此属性即可。注意:此属性可能在ie8以下版本不支持(没有亲自测试)


    2019.11.30更新日志:对版本进行全面升级,并且增加动态数据渲染功能,取值/赋值/设置默认值 将更加简单方便,适用于联动等场景,并且修复隐藏bug,代码更加健壮。可以将此称之为selectMultip小框架。

    2019.11.24更新日志:解决取值个数不符问题(对之前使用的小伙伴说声抱歉,在用户多次选择取消之后会出现取值不正确的问题,感谢丶奈何亦是泪提出疑问,本人在仔细测试后才发现确实有此bug,第一时间做了更新,文本中的代码是最新代码,大家可以放心使用)

    2019.11.15更新日志:添加属性choose(默认选中),并添加注释方便使用者二次开发。

    如果还有其他需求等,可以留言,好做更新升级哦!其他不足之处,请多指教!

    展开全文
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...

    实现input标签下拉带搜索功能

    方法一: 使用 bootstrap

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>bootstrap 搜索下拉框</title>
      <!-- jquery 项目已有就无需再引入-->
      <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
      <!-- bootstrap 项目已有 bootstrap就无需再引入-->
      <link href="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
      <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
      <!-- bootstrap-select -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
      <style>
        .bootstrap-select.form-control:not([class*=col-]){width: 200px;}
        .bs-actionsbox, .bs-donebutton, .bs-searchbox{padding: 2px;}
      </style>
    </head> 
    <body>
      <select class="selectpicker show-tick form-control" data-live-search="true">
        <option>四川(sichuan)</option>
        <option>湖南(hunan)</option>
        <option>湖北(hubei)</option>
        <option>广东(guangdong)</option>
        <option>北京(beijing)</option>
        <option>河南(henan)</option>
      </select>
    </body> 
    

    在这里插入图片描述

    方法二:layui

    layui的库无法在线调用,需要下载后,从本地加载

    官网 - 获得 layui

    <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="./static/layui/css/layui.css">
      <style>
        .layui-form-item{ width: 300px;}
      </style>
    </head>
    <body> 
    <form class="layui-form" action="">
      <div class="layui-form-item">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
          <select name="city" lay-verify="required" lay-search>
            <option value=""></option>
            <option value="0">成都</option>
            <option value="1">武汉</option>
            <option value="2">长沙</option>
            <option value="3">合肥</option>
            <option value="4">郑州</option>
          </select>
        </div>
      </div>
    </form>
    </body>
    <script src="./static/layui/layui.js"></script>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
    <script type="text/javascript"> 
    layui.use('form', function(){
        var form = layui.form;
        var $ = layui.$;
        form.render();
        //每次渲染之后手注册事件
        $("dl").prev().find("input").attr("onkeydown","listenSelect.up(event,this)");
    }); 
    </script>
    

    在这里插入图片描述

    在项目中使用 layui

     <link rel="stylesheet" href="/public/static/layui/css/layui.css">
      <td>状态</td>
      <td>
        <div class="layui-form ">
          <select name="city" lay-verify="required" lay-search>
          <option value="">请选择</option>
          <option value="0" >未付款wfk</option>
          <option value="1" >已付款yfk</option>
          <option value="2" >未确认</option>
          <option value="3" >已确认yqr</option>
          <option value="4" >已发货</option>
          <option value="5" >部分发货</option>
          <option value="6" >已收件</option>
          <option value="7" >已换货</option>
          <option value="8" >已退款</option>
          <option value="9" >已退货退款</option>
          <option value="10" >交易关闭</option>
          <option value="11" >交易成功</option>
          </select>
      </div>
    </td>
      <script src="/public/static/jquery.min.js"></script>
      <script src="/public/static/layui/layui.js"></script>
      <script>
        layui.use('form', function(){
        var form = layui.form;
        var $ = layui.$;
        form.render();
    });
    </script>
    

    在这里插入图片描述

    方法四:

    引入 layui插件 实现
    index.html

    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    
    <form action="" method="post">
      <div class="layui-form">
        <select name="abc" id="" lay-search="">      
        <option></option>
        <option>abc</Doption>
        <option>ace</option>
        <option>axb</option>
        <option>azz</option>
        </select>
      </div>
    </form>
    
    <script>
    layui.use(['form', 'element'], function(){
      var form = layui.form,
       element = layui.element;
    })
    </script>
    

    在这里插入图片描述

    方法五:

    不使用任何框架
    此方法不支持所有浏览器

    <p>
        <label for="myFruit">What's your favorite fruit?</label>
        <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
        <datalist id="mySuggestion">
          <option>Blackberry</option>
          <option>Blueberry</option>
          <option>Lemon</option>
          <option>Orange</option>
          <option>Pear</option>
          <option>Watermelon</option>
        </datalist>
    </p>
    

    在这里插入图片描述

    展开全文
  • mui下拉菜单样式

    万次阅读 2018-11-24 11:52:48
    首先,看一下效果 html代码: &lt;div class="mui-input-group"&gt; &lt;div class="mui-input-row"&gt; &lt;label&gt;选择门店&...span clas

    首先,看一下效果

    html代码:

    <div class="mui-input-group">
    	<div class="mui-input-row">
    		<label>选择门店</label>
    		<a class="mui-navigate-right">
    			<span class="mui-badge1">
    			<select class="mui-h5" style="margin:auto; color:#000;">
    				<option value="">全部</option>
    				<option value="1">津</option>
    				<option value="1">冀</option>
    				<option value="1">京</option>
    				<option value="1">津</option>
    				<option value="1">冀</option>
    				<option value="1">京</option>
    				<option value="1">津</option>
    				<option value="1">冀</option>
    			</select>
    			</span> 
    		</a>
    	</div>
    </div>

    css代码:

    .mui-badge1{padding:0px; width:65%; float:right; line-height:42px; font-size:14px;}

     

    展开全文
  • 下拉列表框QComboBox类

    最近需要做一个地址选择下拉列表,如下图:


    QComboBox下拉列表用法还是比较简单的,常用方法和属性:

    (1)addItems

    void addItems ( const QStringList & texts )

    在QComboBox的最后添加一项。

    (2)count

    int count () const

    返回列表项总数。

    (3)currentIndex

    int currentIndex () const

    当前显示的列表项序号。

    (4)currentText

    QString currentText () const

    返回当前显示的文本。

    (5)insertItem

    void insertItem ( int index, const QString & text, const QVariant & userData = QVariant() )

    void insertItem ( int index, const QIcon & icon, const QString & text, const QVariant & userData = QVariant() )

    void insertItems ( int index, const QStringList & list )

    插入一项或多项至序号index处。
    (6)insertSeparator

    void insertSeparator ( int index )

    在序号为index的项前插入分隔线。

    (7)setItemText

    void setItemText ( int index, const QString & text )

    改变序号为index项的文本。

    (8)setMaxVisibleItems

    void setMaxVisibleItems(int maxItems)
    
    设置最大显示下列项 超过要使用滚动条拖拉。
    
    (9)setMaxCount
    void setMaxCount(int max)
    
    设置最大下拉项 超过将不显示
    
    (10)addItem
    void addItem(const QString &text, const QVariant &userData = QVariant())
    
    添加一个下拉选项
    (11)currentIndexChanged(int) 的信号
    当QComboBox当前项发生变化时候,它会发出信号currentIndexChanged(int i),i是改变后当前项的下标,可以编写SLOT来处理,非常有用!
    
    可以下面这么写,实现点击不同选项执行不同的事件
    connect(ComboBox, SIGNAL(currentIndexChanged(int)), this, SLOT(boxChange(int)));
    
    
    /*--------------------------------------------------------------------------------------------------------------------------------*/
    下面内容摘抄自原文:http://blog.sina.com.cn/s/blog_a6fb6cc90101ed6n.html

    很多人在问QComboBox如何设置选项的高度、代理等一些问题!今天就在此分享一下自己的一些小心得。。。

     

    一、基本应用

     

     QComboBox *network_type = new QComboBox();

     

    1、设置样式:

    边框色、选项高度、下拉按钮图标

     network_type->setStyleSheet("QComboBox{border:1px solid gray;}"
      "QComboBox QAbstractItemView::item{height:20px;}" //下拉选项高度
      "QComboBox::down-arrow{image:url(:/icon/arrowdown);}" //下拉箭头
      "QComboBox::drop-down{border:0px;}"); //下拉按钮
     network_type->setView(new QListView());

     

    2、添加选项

    typedef enum
    {
        PROXY_NONE,      //没有代理

        PROXY_BROWSER,   //浏览器代理

        PROXY_HTTP,      //HTTP代理
        PROXY_SOCKS4,    //SOCK4代理
        PROXY_SOCK5,     //SOCK5代理 
    }Proxy_Types;


     network_type->addItem("none", PROXY_NONE);
     network_type->addItem("browser", PROXY_BROWSER);
     network_type->addItem("http", PROXY_HTTP);
     network_type->addItem("socks4", PROXY_SOCKS4);
     network_type->addItem("socks5", PROXY_SOCK5);

     

     network_type->setItemText(0, tr("no proxy"));
     network_type->setItemText(1, tr("use browser"));
     network_type->setItemText(2, tr("http"));
     network_type->setItemText(3, tr("socks4"));
     network_type->setItemText(4, tr("socks5"));

     

    3、获取所选项

    Proxy_Types proxy_type = (Proxy_Types)(network_type->currentIndex());

     

    4、点击不同选项执行的事件

    connect(network_type, SIGNAL(currentIndexChanged(int)), this, SLOT(proxyChange(int)));

    效果如下:

    Qt之QComboBox(基本应用、代理设置)

     

    二、设置代理

        好了,此代理非彼代理也,综上所说的代理为QComboBox的选项,这里要说明的是QComboBox的代理组件!

    先看此图:

    Qt之QComboBox(基本应用、代理设置)

        可以看出下拉选项中不仅包含有文本信息,而且含包含有相应的组件!其实这是模拟的一个用户选择输入框,用户不仅可以输入帐号,而且可以选择想要登录的帐号,并且可进行帐号的删除!

     

        代理选项包含一个用户帐号文本和一个删除按钮,mouseReleaseEvent函数主要获取此代理的文本,用于显示在QComboBox中,删除按钮执行的是获取代理的文本,根据不同的文本删除对应的帐号信息!

    (1)设定代理组成

    AccountItem::AccountItem(QWidget *parent)
    : QWidget(parent)
    {
     mouse_press = false;
     account_number = new QLabel();
     delede_button = new QPushButton();

     QPixmap pixmap(":/loginDialog/delete");
     delede_button->setIcon(pixmap);
     delede_button->setIconSize(pixmap.size());
     delede_button->setStyleSheet("background:transparent;");
     connect(delede_button, SIGNAL(clicked()), this, SLOT(removeAccount()));

     QHBoxLayout *main_layout = new QHBoxLayout();
     main_layout->addWidget(account_number);
     main_layout->addStretch();
     main_layout->addWidget(delede_button);
     main_layout->setContentsMargins(5, 5, 5, 5);
     main_layout->setSpacing(5);
     this->setLayout(main_layout);
    }

    AccountItem::~AccountItem()
    {

    }

    void AccountItem::setAccountNumber(QString account_text)
    {
     account_number->setText(account_text);
    }

    QString AccountItem::getAccountNumber()
    {
     QString account_number_text = account_number->text();

     return account_number_text;
    }

    void AccountItem::removeAccount()
    {
     QString account_number_text = account_number->text();
     emit removeAccount(account_number_text);
    }

    void AccountItem::mousePressEvent(QMouseEvent *event)
    {

     if(event->button() == Qt::LeftButton)
     {
      mouse_press = true;
     }
    }

    void AccountItem::mouseReleaseEvent(QMouseEvent *event)
    {
     if(mouse_press)
     {
      emit showAccount(account_number->text());
      mouse_press = false;
     }
    }

     

    (2)添加代理至QComboBox:

     account_combo_box = new QComboBox();
     list_widget = new QListWidget();
     account_combo_box->setModel(list_widget->model());
     account_combo_box->setView(list_widget);
     account_combo_box->setEditable(true); //设置QComboBox可编辑
     for(int i=0; i<3; i++)
     {
      AccountItem *account_item = new AccountItem();
      account_item->setAccountNumber(QString("safe_") + QString::number(i, 10) + QString("@sina.com"));
      connect(account_item, SIGNAL(showAccount(QString)), this, SLOT(showAccount(QString)));
      connect(account_item, SIGNAL(removeAccount(QString)), this, SLOT(removeAccount(QString)));
      QListWidgetItem *list_item = new QListWidgetItem(list_widget);
      list_widget->setItemWidget(list_item, account_item);
     }

     

    (3)实现代理选项进行的操作

    //将选项文本显示在QComboBox当中

    void LoginDialog::showAccount(QString account)
    {
     account_combo_box->setEditText(account);
     account_combo_box->hidePopup();
    }

     

    //删除帐号时,弹出提示框,与用户进行交互,告知是否确定要删除此帐号的所有信息!

    void LoginDialog::removeAccount(QString account)
    {

     account_combo_box->hidePopup();
     msg_box->setInfo(tr("remove account"), tr("are you sure to remove account?"), QPixmap(":/loginDialog/attention"), false);
     if(msg_box->exec() == QDialog::Accepted)
     {
      int list_count = list_widget->count();
      for(int i=0; i
      {
       QListWidgetItem *item = list_widget->item(i);
       AccountItem *account_item = (AccountItem *)(list_widget->itemWidget(item));
       QString account_number = account_item->getAccountNumber();
       if(account == account_number)
       {
        list_widget->takeItem(i);
        delete item;

        break;
       }
      }
     }
    }

     

        当然,可以试试list_widget的itemClicked()与itemPressed()信号,在指定account_combo_box->setEditText(account)设定文本的时候,会出现一闪而过的情形,所以还是得自定义鼠标事件。

    只要你愿意,代理任你设置:

    Qt之QComboBox(基本应用、代理设置)


    展开全文
  • 当我选择其中一个选项的时候,下拉列表框中那个数据就被隐藏了,当我再次增加一个参数的时候,那个下拉列表框中的数据是隐藏的,比如: 看,下面的下拉列表框没有设备名称这个选项了,这样做是为了限制输入框的个数...
  • 几种实现悬浮下拉菜单的方式

    万次阅读 2017-05-10 20:38:52
    首先是HTML代码<!DOCTYPE html> <title>Title <body><div id="nav" class="nav
  • 微信小程序之下拉列表实现(附完整源码)

    万次阅读 热门讨论 2018-11-15 14:56:52
    跟网页的下拉列表实现是一样的,刚刚开始默认下拉的内容的是不显示的(display:none),然后通过点击的时候,去更改 display 的属性值,来实现下拉的效果。然后下拉的动画的通过 css3 的 animation 来实现的。...
  • 上拉和下拉的解释

    万次阅读 多人点赞 2018-09-08 16:36:28
    下拉电阻:把一个不确定的信号通过电阻连接到高电平,使电信号初始为低电平。 本质:上拉是对器件注入电流,下拉是输出电流 2.上下拉电阻接线方法 上拉电阻接线方法 电阻R12将KEY1网路标识上拉到高电平,在...
  • Select下拉框禁用的三种方式

    万次阅读 2019-07-25 17:52:13
    1.为下拉框添加样式,可以禁用该下拉框: 特点:不会出现无法取值的问题 <select name="name"id="select" class="select" style="pointer-events: none;"></select> ...2.为下拉框添加onfocus和onchange...
  • 在微信里面打开的链接页面如果没有经过特殊处理,下拉的话,会出现这样的情况:大概就是一个深灰色的背景,还有一个源站的域名。本人觉得这个非常丑,并且有时候就不想别人下拉看到我们的源站域名。所以我这里做了一...
  • C# 下拉列表框

    万次阅读 2017-02-09 21:47:54
    下拉列表框 ComboBox既是下拉列表 属性: Items属性:为下拉列表添加相应的项目,与列表框类似 DropDownStyle属性:控制组合框的外观和功能(此属性如果选择DropDownList则只可选择而不能再框中输入,若选择...
  • 原生JS实现下拉刷新

    万次阅读 2020-10-20 18:27:08
    <!DOCTYPE html> <title>Document <title>Pull to Refresh ,height=device-
  • 微信小程序自定义下拉刷新

    万次阅读 热门讨论 2018-07-05 16:47:25
    哈喽,大家好, 微信小程序出来也有好几年了,大部分项目下拉刷新都用的系统自带的,用起来非常方便,有个缺点就是它的样式被微信锁定了,如果想在下拉不同状态显示不同文字就不怎么方便了,最近公司需求,写了一个...
  • 在微信小程序中,用力往下拉动...但是这里注意的是,在app.json里面写上这个属性并不会生效,一定要在需要禁止的页面的json文件加上才会生效enablePullDownRefresh (下拉刷新) 和 disableScroll 同时为true的时候 ...
  • 微信小程序界面下拉刷新实现方法

    万次阅读 2018-06-11 10:49:09
    微信小程序中,通过下拉刷新页面是基本操作,在当前页面排满的情况下继续下拉加载更多内容。
  • 自从谷歌推出SwipeRefreshLayout之后越来越多的博客都是使用SwipeRefreshLayout来完成下拉刷新,但是往往产品经理根本不会使用谷歌的样式.每个公司都有一套自己的下拉样式这个时候就需要我们完全自定义RecyclerView的...
  • mui下拉刷新的整理

    万次阅读 2016-06-14 20:56:47
    下拉刷新可以刷新本页的,也可以刷新子页面 一、刷新本页面的过程: 1、给下拉的div 加id,2、给页面初始化设下拉参数 其中pullrefresh就是第1步中加的Id,pulldownRefresh为实现下拉的方法 mui.init({ pullRefresh...
  • 禁止手机浏览器下拉刷新

    千次阅读 2017-11-08 11:25:16
    <!-- 给 body 加样式 overflow:hidden --> <body style="overflow:hidden"> <!-- TODO: --></body>
  • 比如:在EXCEL中,输入1、2、3,选中后出现十字光标往下拉就应该是4、5、6的,结果出现的都是1111 解决方案:取消冻结窗格 或 自动筛选。 转载于:https://blog.51cto.com/zhaoshilei/2315686...
  • 自动刷百度下拉词优化工具

    万次阅读 2019-04-02 18:37:21
    自动刷百度下拉词优化工具 下拉通刷词软件系统可根据主词联想快速的刷出你所需要的关键词,一般下拉排名在前4位,软件100%有效,出词率达到80%以上,用户后台提交下拉词后,一般3-10天即可见效,尤其是设置多任务刷...
1 2 3 4 5 ... 20
收藏数 379,344
精华内容 151,737
关键字:

下拉