精华内容
下载资源
问答
  • 前端 自定义下拉列表框

    千次阅读 2017-08-27 21:31:20
    今天在公司里,遇到了一个很简单的问题,有一个UI样式固定的下拉列表框。当我拿到这个ui的时候,第一感觉就是简单的select标签就可以解决问题,但是后面在改样式的过程中,遇到了许许多多的问题,包括无法修改选中后...

    今天在公司里,遇到了一个很简单的问题,有一个UI样式固定的下拉列表框。当我拿到这个ui的时候,第一感觉就是简单的select标签就可以解决问题,但是后面在改样式的过程中,遇到了许许多多的问题,包括无法修改选中后默认的蓝色框,option的hover无法改变等等。。。

    在许多次尝试失败后,我决定,定义一个属于自己的下拉列表,当然啦,我并不想用那些组件,虽然用组件很快吧,但是当一个项目中用的组件多了以后,总是会出现好多不可控的因素,相信在座的大牛都比我懂的多,那就开始这次体验吧~~

    效果图:

    嗯。。学了半天gif图还是不会,等小编以后再补上图,后面有源码,大家直接复制即可。。
    

    理一下思路:

    • 通过ul li 俩标签的形式来定义这个列表 显然li中一开始是隐藏的
    • li 标签下的就是我们的标签
    • ul 标签下我会定义一个div 用来装”请选择一个标签” 之类的默认选项
    • 在div 中分为两块 span 和 img
    • span 就是文字”请选择一个标签”
    • img 则是向下向上的图标
    • 点击后,图标会变 span会变 div的边框会变 当然你也可以随意为li(你的标签)添加一些hover样式

    因为公司项目中有jquery,所以有部分jquery的代码,当然你想用js原生实现也可以哦
    好了,就那么简单,让我们来写一次自己的组件吧


    html代码

    <ul class="dropdown" tabindex="1">
            <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
            <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
                <span>请选择标签</span>
                <div class="dp-img">
                    <img src="images/dp-down.png" width="15" height="20">
                </div>
            </div>
    
            <li class="dp-list hide">标签一</li>
            <li class="dp-list hide">标签二</li>
            <li class="dp-list hide">标签三</li>
            <li class="dp-list hide">标签四</li>
    </ul>
    

    简单分析下上述代码,ul,li 结构 下面分为一个<div>和若干个<li>标签。
    <div class="dp-select">下有一个<span>用来装默认标签文字,还有一个<div class="dp-img">用来放最右边那个向上和向下的小图标。
    <li>就是各位一个个的标签啦,我给它定义了一个‘dp-list’的样式
    html就只有那么多了,接下来让我们看看css

    css代码

    <style>
        .dropdown{
            width: 150px;
            height: 30px;
            line-height: 30px;
            padding:0px;
            cursor: pointer;
            outline: 0;
            border:1px solid #8a8a8a;
        }
        .dropdown .dp-list{
            list-style: none;
            width: 150px;
            height: 30px;
            line-height: 30px;
            border-left: 1px solid #8a8a8a;
            border-right: 1px solid #8a8a8a;
            border-bottom: 1px solid #8a8a8a;
            position: relative;
            left: -1px;
    
        }
        .dropdown .dp-list:hover{
            background: #8a8a8a;
            color: #ffffff;
        }
        .dropdown .dp-img{
            float: right;
            width: 20px;
            height: 30px;
            display: flex;
            justify-content:center;
            align-items:center;
            border-left: 1px solid #8a8a8a;
        }
        .hide {
            display: none;
        }
    </style>
    

    css属实没啥好说的,dp-img 也就是我放图标的那个小div,我这里采用的是flex布局,让图标居中。
    当然,如果你们想用background使图标居中也没问题啦,个人习惯而已~
    hide是我定义的一个隐藏li标签的样式,为了让js代码写的少一些。如果不想写,在js中改成display:none 就可以咯

    js代码

    <script type="text/javascript">
        $('.dropdown .dp-select').on('click',function(){
            if($('.dropdown li').hasClass('hide')){
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-up.png');
                //显示li标签
                $('.dropdown li').removeClass('hide');
                //加点点击样式
                $('.dropdown').css('border','1px solid lightblue');
                $('.dropdown .dp-img').css('border-left','1px solid lightblue');
            }else{
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-down.png');
                //显示li标签
                $('.dropdown li').addClass('hide');
                //继续点击样式
                $('.dropdown').css('border','1px solid #8a8a8a');
                $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
            }
        });
        //点击li 标签后发生的事件
        $('.dropdown li').on('click',function(){
            var text = $(this).text();
            console.log(text);
            $('.dp-select span').text(text);
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    
        });
        //失去焦点发生的事件
        $('.dropdown').blur(function(){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        });
    </script>
    
    

    终于看到js了,其实可以发现js代码并不多,好吧,我承认,我写的还是比较冗余的。
    如果精简下的话可能会更少哦!

    pass:这里我用jquery的,不喜欢用jquery的话,可以自己去把其中一些方法替换成js原生~

    第一个方法,为dp-select元素添加了click事件。
    解释下,就是你点默认的那个框的时候,下面的li标签会显示,图标img(就是一开始是向上的图标)你点了以后,就会换成向下的图标。
    jquery.css是我自己加的一些样式,大家可以自己修改。

    第二个方法,给li标签的点击事件,很简单,点击以后替换span中的text值,其他跟上面方法一样,换图标,换样式。。

    第三个方法,这是感觉最有意思的一个方法了,给div添加blur方法。
    因为我们都知道,一个下拉列表框,你在不属于它的地方点击后,应该会缩回去吧。
    为了实现这个效果,我采用给最大的ul标签添加tabindex=“1”
    这样ul标签就可以跟input框一样,使用
    blur,focus`等等方法了。
    失去焦点后,自然是隐藏li 修改样式,修改图标。

    差不多介绍完啦,第一次写博客,很菜。大家在实践过程中会发现ul标签是不是显得没有那么必要?
    当然每一个自己写的小东西需要不停地去优化,以前我用过无数组件,但是自己写一个很小很小的组件的时候,也会发现好多的问题。需要与大家共勉。

    对于以上写的下拉列表,接下来需要考虑的就是封装了。

    如果可以这样子调用我们的自己定义的下拉列表框,会不会很酷?

    <ul class="dp-default my-dark">
            请选择标签
            <li class="dp-list">标签一</li>
            <li class="dp-list">标签二</li>
            <li class="dp-list">标签三</li>
            <li class="dp-list">标签四</li>
    </ul>

    小结

    这样子,感觉像自己创建一个组件一样。下一篇会详细讲讲如何将自己写出来的小东西,再更加进一步的封装,其中还包括对html元素进行封装等等。

    就到这里吧,附上源码。希望能有更多的机会跟大家交流~

    源码

    注意:有俩个图标在 大家可以直接另存为这两张图
    Jquery的话。。自己在网上找一个jquery.js就好了!
    images/dp-down.pngimages/dp-up.png

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <!--  img  #8a8a8a -->
        <style>
            .dropdown{
                width: 150px;
                height: 30px;
                line-height: 30px;
                padding:0px;
                cursor: pointer;
                outline: 0;
                border:1px solid #8a8a8a;
            }
            .dropdown .dp-list{
                list-style: none;
                width: 150px;
                height: 30px;
                line-height: 30px;
                border-left: 1px solid #8a8a8a;
                border-right: 1px solid #8a8a8a;
                border-bottom: 1px solid #8a8a8a;
                position: relative;
                left: -1px;
    
            }
            .dropdown .dp-list:hover{
                background: #8a8a8a;
                color: #ffffff;
            }
            .dropdown .dp-img{
                float: right;
                width: 20px;
                height: 30px;
                display: flex;
                justify-content:center;
                align-items:center;
                border-left: 1px solid #8a8a8a;
            }
            .hide {
                display: none;
            }
        </style>
    
    </head>
    <body>
        <ul class="dropdown" tabindex="1">
            <!-- 用于取消多次快速点击dp-select 后选中“请选择标签” 的文字 -->
            <div class="dp-select" unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
                <span>请选择标签</span>
                <div class="dp-img">
                    <img src="images/dp-down.png" width="15" height="20">
                </div>
            </div>
    
            <li class="dp-list hide">标签一</li>
            <li class="dp-list hide">标签二</li>
            <li class="dp-list hide">标签三</li>
            <li class="dp-list hide">标签四</li>
        </ul>
    
    
        <ul class="dp-default my-dark">
            请选择标签
            <li class="dp-list">标签一</li>
            <li class="dp-list">标签二</li>
            <li class="dp-list">标签三</li>
            <li class="dp-list">标签四</li>
        </ul>
    </body>     
    </html>
    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    
    <script type="text/javascript">
        $('.dropdown .dp-select').on('click',function(){
            if($('.dropdown li').hasClass('hide')){
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-up.png');
                //显示li标签
                $('.dropdown li').removeClass('hide');
                //加点点击样式
                $('.dropdown').css('border','1px solid lightblue');
                $('.dropdown .dp-img').css('border-left','1px solid lightblue');
            }else{
                //点击后更改图标
                $('.dp-img img').attr('src','images/dp-down.png');
                //显示li标签
                $('.dropdown li').addClass('hide');
                //继续点击样式
                $('.dropdown').css('border','1px solid #8a8a8a');
                $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
            }
        });
        失去焦点发生的事件
        $('.dropdown').blur(function(){
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
        });
        点击li 标签后发生的事件
        $('.dropdown li').on('click',function(){
            var text = $(this).text();
            console.log(text);
            $('.dp-select span').text(text);
            //点击后更改图标
            $('.dp-img img').attr('src','images/dp-down.png');
            //显示li标签
            $('.dropdown li').addClass('hide');
            //继续点击样式
            $('.dropdown').css('border','1px solid #8a8a8a');
            $('.dropdown .dp-img').css('border-left','1px solid #8a8a8a');
    
        });
    </script>
    展开全文
  • android的下拉列表框

    千次阅读 2012-12-02 20:03:20
    下拉列表框也是一种常用的组件,形状类似于html的select。功能的话和那个单选按钮有些类似。...1.先来看下下拉列表框标签 android:id="@+id/city" android:prompt="@string/city_label" an

    下拉列表框也是一种常用的组件,形状类似于html的select。功能的话和那个单选按钮有些类似。这次的话就使用这个下拉列表框做一个城市和区域联动的小例子,数据的话简单起见就弄成静态的。就不先扯淡了。

    1.先来看下下拉列表框的标签

     <Spinner
        android:id="@+id/city"
        android:prompt="@string/city_label"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:entries="@array/city_name" 
        />

    这里要注意的就是2处,prompt是列表框的提示如图所示,entries当然就是下拉的内容了,也就是下面显示的上海、南京、昆明


    2.下面就开始一步一步的写这个小例子了,首先写一下静态的数据。我打算把城市写在一个xml文件里。下面是我的xml文件这个文件就放在values文件夹下

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string-array name="city_name">
           <item>上海</item>
           <item>南京</item>
           <item>昆明</item>
        </string-array>
    </resources>
    

    为了让大家看的更清楚,我把strings.xml也贴出来了

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <string name="hello">Hello World, SpinnerActivity!</string>
        <string name="app_name">spinner</string>
        <string name="city_label">选择城市</string>
        <string name="area_label">选择城市</string>
    </resources>
    

    城市的下拉没问题了剩下的就是,区域的级联了,在这里区域就把他放在一个数组里。这里就要用到ArrayAdapter了,对应的事件就是下拉改变事件了这个事件也有一个监听器叫做setOnItemSelectedListener。联动效果是怎么来的呢,其实很简单只需要城市下拉改变我们就把对应的区域动态的添加到二级下拉就OK了。这个操作就需要ArrayAdapterd的支持了。下面先把ArrayAdapter和区域定义一下

    //定义一个字符数组,用来填充区域
        private String[][] areaData=new String[][]{{"浦东新区","徐汇区","普陀区","杨浦区"},{"雨花台区","白下区"},{"西山区","北市区"}};
        //定义下拉列表适配器,用于填充内容
        private ArrayAdapter<CharSequence> adapterArea=null;

    下面就是这个Adapter的用法了

    //实例化列表项
    				adapterArea=new ArrayAdapter<CharSequence>(SpinnerActivity.this,android.R.layout.simple_spinner_item,SpinnerActivity.this.areaData[position]);
    				//设置列表显示风格
    				adapterArea.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    				area.setAdapter(adapterArea);

    对于第一句,第一个参数就是上下文,第二个参数就是下拉框的显示风格,第三个就是我们要填到下拉的数据了

    第二句就是设置下拉框内容的风格了,不写的话显示的是这个样子


    写了的话是这个样子

    说了这么多我就把全部的代码贴出来了,里面也夹杂着一个图片的长按事件这个操作可以切换手机桌面,换桌面的时候不要忘了授权

    <uses-permission android:name="android.permission.SET_WALLPAPER"></uses-permission>

    下面是java代码

    package org.lxh.spinner;
    
    import java.io.IOException;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemSelectedListener;
    import android.widget.ArrayAdapter;
    import android.widget.ImageView;
    import android.widget.Spinner;
    import android.widget.Toast;
    
    public class SpinnerActivity extends Activity {
    	private ImageView image=null;
        private Spinner city=null;
        private Spinner area=null;
        //定义一个字符数组,用来填充区域
        private String[][] areaData=new String[][]{{"浦东新区","徐汇区","普陀区","杨浦区"},{"雨花台区","白下区"},{"西山区","北市区"}};
        //定义下拉列表适配器,用于填充内容
        private ArrayAdapter<CharSequence> adapterArea=null;
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            city=(Spinner)this.findViewById(R.id.city);
            area=(Spinner)this.findViewById(R.id.area);
            image=(ImageView)this.findViewById(R.id.wall);
            image.setOnLongClickListener(new View.OnLongClickListener() {
    			
    			public boolean onLongClick(View v) {
    				//设置桌面之前要先清除单前的桌面
    				try {
    					SpinnerActivity.this.clearWallpaper();
    					SpinnerActivity.this.setWallpaper(image.getResources().openRawResource(R.drawable.fengj));
    				} catch (IOException e) {
    					// TODO Auto-generated catch block
    					e.printStackTrace();
    				}
    				return true;
    			}
    		});
            area.setOnItemSelectedListener(new OnItemSelectedListener(){
    
    			@Override
    			public void onItemSelected(AdapterView<?> parent, View view,
    					int position, long id) {
    				Toast.makeText(SpinnerActivity.this, parent.getItemAtPosition(position).toString(), 1).show();
    				
    			}
    
    			@Override
    			public void onNothingSelected(AdapterView<?> parent) {
    				// TODO Auto-generated method stub
    				
    			}
            	
            });
            city.setOnItemSelectedListener(new OnItemSelectedListener() {
    
    			public void onItemSelected(AdapterView<?> parent, View view,
    					int position, long id) {
    				//实例化列表项
    				adapterArea=new ArrayAdapter<CharSequence>(SpinnerActivity.this,android.R.layout.simple_spinner_item,SpinnerActivity.this.areaData[position]);
    				//设置列表显示风格
    				adapterArea.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    				area.setAdapter(adapterArea);
    				
    			}
    
    			@Override
    			public void onNothingSelected(AdapterView<?> parent) {
    				
    				
    			}
    		});
        }
    }

    下面补上main.xml

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <Spinner
        android:id="@+id/city"
        android:prompt="@string/city_label"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:entries="@array/city_name" 
        />
        <Spinner
        android:id="@+id/area"
        android:prompt="@string/area_label"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
       
        />
        <ImageView
        android:id="@+id/wall"
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content"
        android:src="@drawable/fengj"
        />
    </LinearLayout>
    

    到这里程序就写完了,还是一样有问题就写评论或加我qq.



    展开全文
  • JavaSwing_2.9: JComboBox(下拉列表框

    万次阅读 多人点赞 2017-07-09 00:11:45
    JComboBox,下拉列表框。JComboBox以下列列表的形式展示多个选项,用户可以从下拉列表中选择一个值。

    本文链接: http://blog.csdn.net/xietansheng/article/details/74363699

    Java Swing 图形界面开发(目录)

    1. 概述

    官方JavaDocsApi: javax.swing.JComboBox

    JComboBox,下拉列表框。JComboBox以下列列表的形式展示多个选项,用户可以从下拉列表中选择一个值。

    其中的选项内容由一个 ComboBoxModel 实例来维护。

    如果设置JComboBox为可编辑状态,除了选择指定的选项值外,还允许用户自行输入值(自行输入的值索引为-1)。

    JComboBox 常用构造方法:

    /**
     * 一个 JComboBox 实例维护这一个 ComboBoxModel 实例。
     * ComboBoxModel 实例可以直接创建,也可以通过把 数组 或 集合 传递到 JComboBox 中间接创建。
     * JComboBox 内部创建的 ComboBoxModel 实例是 DefaultComboBoxModel。
     */
    JComboBox()
    
    JComboBox(ComboBoxModel model)
    
    JComboBox(Object[] items)
    
    JComboBox(Vector<?> items)
    

    JComboBox 常用方法:

    // 设置选中的索引
    void setSelectedIndex(int index)
    
    // 获取当前选中的索引
    int getSelectedIndex()
    
    // 获取当前选中的数据项
    Object getSelectedItem()
    
    // 设置选项数据模型
    void setModel(ComboBoxModel<?> model)
    
    // 获取维护选项数据的 ComboBoxModel。
    // 再通过 model.getElementAt(int index) 和 model.getSize() 
    // 可分别 获取指定索引的选项数据 和 选项数量。
    ComboBoxModel<?> getModel()
    
    // 添加选项选中状态改变的监听器
    void addItemListener(ItemListener listener)
    
    // 设置下拉列表框是否可编辑,默认不可编辑。
    // 如果设置为可编辑,则除了选择指定的选项值外,还允许用户自行输入值(自行输入的值索引为-1)
    void setEditable(boolean flag)
    

    2. 代码实例

    package com.xiets.swing;
    
    import javax.swing.*;
    import java.awt.event.ItemEvent;
    import java.awt.event.ItemListener;
    
    public class Main {
    
        public static void main(String[] args) {
            JFrame jf = new JFrame("测试窗口");
            jf.setSize(250, 250);
            jf.setLocationRelativeTo(null);
            jf.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    
            JPanel panel = new JPanel();
    
            // 添加一个标签
            JLabel label = new JLabel("水果:");
            panel.add(label);
    
            // 需要选择的条目
            String[] listData = new String[]{"香蕉", "雪梨", "苹果", "荔枝"};
    
            // 创建一个下拉列表框
            final JComboBox<String> comboBox = new JComboBox<String>(listData);
    
            // 添加条目选中状态改变的监听器
            comboBox.addItemListener(new ItemListener() {
                @Override
                public void itemStateChanged(ItemEvent e) {
                    // 只处理选中的状态
                    if (e.getStateChange() == ItemEvent.SELECTED) {
                        System.out.println("选中: " + comboBox.getSelectedIndex() + " = " + comboBox.getSelectedItem());
                    }
                }
            });
    
            // 设置默认选中的条目
            comboBox.setSelectedIndex(2);
    
            // 添加到内容面板
            panel.add(comboBox);
    
            jf.setContentPane(panel);
            jf.setVisible(true);
        }
    
    }
    

    结果展示:

    result.gif


    展开全文
  • Android 的下拉列表框使用

    千次阅读 2014-05-11 17:19:45
    下拉列表框也是一种常用的组件,形状类似于html的select。功能的话和那个单选按钮有些类似。...1.先来看下下拉列表框标签 1 Spinner 2  android:id="@+id/city"

    法一、

    第一步,还是先新建一个工程

     

    第二步。修改已经生成的res/layout/main.xml。整体替换为:

     

     

    [c-sharp] view plaincopy
    1. <?xml version="1.0" encoding="utf-8"?>    
    2. <LinearLayout    
    3.     android:id="@+id/widget28"    
    4.     android:layout_width="fill_parent"    
    5.     android:layout_height="fill_parent"    
    6.     android:orientation="vertical"    
    7.     xmlns:android="http://schemas.android.com/apk/res/android" >    
    8.     <TextView    
    9.         android:id="@+id/TextView_Show"    
    10.         android:layout_width="fill_parent"    
    11.         android:layout_height="wrap_content"    
    12.         android:text="你选择的是"    
    13.         android:textSize="25sp">    
    14.     </TextView>    
    15.     <Spinner    
    16.         android:id="@+id/spinner_City"    
    17.         android:layout_width="fill_parent"    
    18.         android:layout_height="wrap_content">    
    19.     </Spinner><!-- 定义一个下拉菜单-->    
    20. </LinearLayout>    

     

    第三步。添加关键代码

     

    [c-sharp] view plaincopy
    1. import java.util.ArrayList;     
    2. import java.util.List;     
    3. import android.app.Activity;     
    4. import android.os.Bundle;     
    5. import android.view.MotionEvent;     
    6. import android.view.View;     
    7. import android.widget.AdapterView;     
    8. import android.widget.ArrayAdapter;     
    9. import android.widget.Spinner;     
    10. import android.widget.TextView;     
    11.     
    12. public class spinner extends Activity {     
    13.     /** Called when the activity is first created. */    
    14.     private List<String> list = new ArrayList<String>();     
    15.     private TextView myTextView;     
    16.     private Spinner mySpinner;     
    17.     private ArrayAdapter<String> adapter;     
    18.   
    19.     @Override    
    20.     public void onCreate(Bundle savedInstanceState) {     
    21.         super.onCreate(savedInstanceState);     
    22.         setContentView(R.layout.main);     
    23.         //第一步:添加一个下拉列表项的list,这里添加的项就是下拉列表的菜单项     
    24.         list.add("北京");     
    25.         list.add("上海");     
    26.         list.add("深圳");     
    27.         list.add("南京");     
    28.         list.add("重庆");     
    29.         myTextView = (TextView)findViewById(R.id.TextView_Show);     
    30.         mySpinner = (Spinner)findViewById(R.id.spinner_City);     
    31.         //第二步:为下拉列表定义一个适配器,这里就用到里前面定义的list。     
    32.         adapter = new ArrayAdapter<String>(this,android.R.layout.simple_spinner_item, list);     
    33.         //第三步:为适配器设置下拉列表下拉时的菜单样式。     
    34.         adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);     
    35.         //第四步:将适配器添加到下拉列表上     
    36.         mySpinner.setAdapter(adapter);     
    37.         //第五步:为下拉列表设置各种事件的响应,这个事响应菜单被选中     
    38.         mySpinner.setOnItemSelectedListener(new Spinner.OnItemSelectedListener(){     
    39.             @SuppressWarnings("unchecked")  
    40.             public void onItemSelected(AdapterView arg0, View arg1, int arg2, long arg3) {     
    41.                 // TODO Auto-generated method stub     
    42.                 /* 将所选mySpinner 的值带入myTextView 中*/    
    43.                 myTextView.setText("您选择的是:"+ adapter.getItem(arg2));     
    44.                 /* 将mySpinner 显示*/    
    45.                 arg0.setVisibility(View.VISIBLE);     
    46.             }     
    47.             @SuppressWarnings("unchecked")  
    48.             public void onNothingSelected(AdapterView arg0) {     
    49.                 // TODO Auto-generated method stub     
    50.                 myTextView.setText("NONE");     
    51.                 arg0.setVisibility(View.VISIBLE);     
    52.             }     
    53.         });     
    54.         /*下拉菜单弹出的内容选项触屏事件处理*/    
    55.         mySpinner.setOnTouchListener(new Spinner.OnTouchListener(){     
    56.             public boolean onTouch(View v, MotionEvent event) {     
    57.                 // TODO Auto-generated method stub     
    58.                 /* 将mySpinner 隐藏,不隐藏也可以,看自己爱好*/    
    59.                 v.setVisibility(View.INVISIBLE);     
    60.                 return false;     
    61.             }     
    62.         });     
    63.         /*下拉菜单弹出的内容选项焦点改变事件处理*/    
    64.         mySpinner.setOnFocusChangeListener(new Spinner.OnFocusChangeListener(){     
    65.         public void onFocusChange(View v, boolean hasFocus) {     
    66.         // TODO Auto-generated method stub     
    67.             v.setVisibility(View.VISIBLE);     
    68.         }     
    69.         });     
    70.     }     
    71. }  

     

     

    小结:

     

    第一步:添加一个下拉列表项的list,这里添加的项就是下拉列表的菜单项   
    第二步:为下拉列表定义一个适配器,这里就用到里前面定义的list。   
    第三步:为适配器设置下拉列表下拉时的菜单样式。   
    第四步:将适配器添加到下拉列表上   
    第五步:为下拉列表设置各种事件的响应,这个事响应菜单被选中  


    ——————————————————————————————————————————————————————————————————



    法二、

    下拉列表框也是一种常用的组件,形状类似于html的select。功能的话和那个单选按钮有些类似。这次的话就使用这个下拉列表框做一个城市和区域联动的小例子,数据的话简单起见就弄成静态的。就不先扯淡了。

    1.先来看下下拉列表框的标签

    1 <Spinner
    2    android:id="@+id/city"
    3    android:prompt="@string/city_label"
    4    android:layout_width="wrap_content"
    5    android:layout_height="wrap_content"
    6    android:entries="@array/city_name"
    7    />

    这里要注意的就是2处,prompt是列表框的提示如图所示,entries当然就是下拉的内容了,也就是下面显示的上海、南京、昆明

    Android 的下拉列表框使用

     

    2.下面就开始一步一步的写这个小例子了,首先写一下静态的数据。我打算把城市写在一个xml文件里。下面是我的xml文件这个文件就放在values文件夹下

    1 <?xml version="1.0" encoding="utf-8"?>
    2 <resources>
    3     <string-array name="city_name">
    4        <item>上海</item>
    5        <item>南京</item>
    6        <item>昆明</item>
    7     </string-array>
    8 </resources>

    为了让大家看的更清楚,我把strings.xml也贴出来了

    1 <?xml version="1.0" encoding="utf-8"?>
    2 <resources>
    3     <string name="hello">Hello World, SpinnerActivity!</string>
    4     <string name="app_name">spinner</string>
    5     <string name="city_label">选择城市</string>
    6     <string name="area_label">选择城市</string>
    7 </resources>

    城市的下拉没问题了剩下的就是,区域的级联了,在这里区域就把他放在一个数组里。这里就要用到ArrayAdapter了,对应的事件就是下拉改变事件了这个事件也有一个监听器叫做setOnItemSelectedListener。联动效果是怎么来的呢,其实很简单只需要城市下拉改变我们就把对应的区域动态的添加到二级下拉就OK了。这个操作就需要ArrayAdapterd的支持了。下面先把ArrayAdapter和区域定义一下

    1 //定义一个字符数组,用来填充区域
    2     private String[][] areaData=newString[][]{{"浦东新区","徐汇区","普陀区","杨浦区"},{"雨花台区","白下区"},{"西山区","北市区"}};
    3     //定义下拉列表适配器,用于填充内容
    4     private ArrayAdapter<CharSequence> adapterArea=null;

    下面就是这个Adapter的用法了

    1 //实例化列表项
    2                 adapterArea=newArrayAdapter<CharSequence>(SpinnerActivity.this,android.R.layout.simple_spinner_item,SpinnerActivity.this.areaData[position]);
    3                 //设置列表显示风格
    4                 adapterArea.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    5                 area.setAdapter(adapterArea);

    对于第一句,第一个参数就是上下文,第二个参数就是下拉框的显示风格,第三个就是我们要填到下拉的数据了

    第二句就是设置下拉框内容的风格了,不写的话显示的是这个样子

    Android 的下拉列表框使用

    写了的话是这个样子

    Android 的下拉列表框使用

    说了这么多我就把全部的代码贴出来了,里面也夹杂着一个图片的长按事件这个操作可以切换手机桌面,换桌面的时候不要忘了授权

    1 <uses-permission android:name="android.permission.SET_WALLPAPER"></uses-permission>

    下面是java代码

    01 package org.lxh.spinner;
    02  
    03 import java.io.IOException;
    04  
    05 import android.app.Activity;
    06 import android.os.Bundle;
    07 import android.view.View;
    08 import android.widget.AdapterView;
    09 import android.widget.AdapterView.OnItemSelectedListener;
    10 import android.widget.ArrayAdapter;
    11 import android.widget.ImageView;
    12 import android.widget.Spinner;
    13 import android.widget.Toast;
    14  
    15 public class SpinnerActivity extends Activity {
    16     private ImageView image=null;
    17     private Spinner city=null;
    18     private Spinner area=null;
    19     //定义一个字符数组,用来填充区域
    20     private String[][] areaData=new String[][]{{"浦东新区","徐汇区","普陀区","杨浦区"},{"雨花台区","白下区"},{"西山区","北市区"}};
    21     //定义下拉列表适配器,用于填充内容
    22     private ArrayAdapter<CharSequence> adapterArea=null;
    23     public void onCreate(Bundle savedInstanceState) {
    24         super.onCreate(savedInstanceState);
    25         setContentView(R.layout.main);
    26         city=(Spinner)this.findViewById(R.id.city);
    27         area=(Spinner)this.findViewById(R.id.area);
    28         image=(ImageView)this.findViewById(R.id.wall);
    29         image.setOnLongClickListener(new View.OnLongClickListener() {
    30              
    31             public boolean onLongClick(View v) {
    32                 //设置桌面之前要先清除单前的桌面
    33                 try {
    34                     SpinnerActivity.this.clearWallpaper();
    35                     SpinnerActivity.this.setWallpaper(image.getResources().openRawResource(R.drawable.fengj));
    36                 } catch (IOException e) {
    37                     // TODO Auto-generated catch block
    38                     e.printStackTrace();
    39                 }
    40                 return true;
    41             }
    42         });
    43         area.setOnItemSelectedListener(new OnItemSelectedListener(){
    44  
    45             @Override
    46             public void onItemSelected(AdapterView<?> parent, View view,
    47                     int position, long id) {
    48                 Toast.makeText(SpinnerActivity.this, parent.getItemAtPosition(position).toString(), 1).show();
    49                  
    50             }
    51  
    52             @Override
    53             public void onNothingSelected(AdapterView<?> parent) {
    54                 // TODO Auto-generated method stub
    55                  
    56             }
    57              
    58         });
    59         city.setOnItemSelectedListener(new OnItemSelectedListener() {
    60  
    61             public void onItemSelected(AdapterView<?> parent, View view,
    62                     int position, long id) {
    63                 //实例化列表项
    64                 adapterArea=new ArrayAdapter<CharSequence>(SpinnerActivity.this,android.R.layout.simple_spinner_item,SpinnerActivity.this.areaData[position]);
    65                 //设置列表显示风格
    66                 adapterArea.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
    67                 area.setAdapter(adapterArea);
    68                  
    69             }
    70  
    71             @Override
    72             public void onNothingSelected(AdapterView<?> parent) {
    73                  
    74                  
    75             }
    76         });
    77     }
    78 }

    下面补上main.xml

    01 <?xml version="1.0" encoding="utf-8"?>
    02 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    03     android:orientation="horizontal"
    04     android:layout_width="fill_parent"
    05     android:layout_height="fill_parent"
    06     >
    07     <Spinner
    08     android:id="@+id/city"
    09     android:prompt="@string/city_label"
    10     android:layout_width="wrap_content"
    11     android:layout_height="wrap_content"
    12     android:entries="@array/city_name"
    13     />
    14     <Spinner
    15     android:id="@+id/area"
    16     android:prompt="@string/area_label"
    17     android:layout_width="wrap_content"
    18     android:layout_height="wrap_content"
    19     
    20     />
    21     <ImageView
    22     android:id="@+id/wall"
    23     android:layout_width="wrap_content"
    24     android:layout_height="wrap_content"
    25     android:src="@drawable/fengj"
    26     />
    27 </LinearLayout>

    展开全文
  • 平常一样使用得到下拉列表,也可以标签得到多选列表框,如下: 在标签中加入size和multiple属性就能得到多选列表框,size:设置多选列表框大小,*要设置多选列表框,必须要有的这个属性*multiple:多样的, 多重的,为...
  • 使用下拉列表框进行多选

    千次阅读 2018-12-07 19:19:42
    使用下拉列表框进行多选 下拉列表也可以进行多选操作,在&lt; select &gt;标签中设置multiple="multiple"属性,就可以实现多选功能,在 windows 操作系统下,进行多选时按下Ctrl键同时进行单击...
  • EasyUI ComboBox(下拉列表框

    万次阅读 2016-07-22 21:13:35
    ComboBox(下拉列表框) 扩展自$.fn.combo.defaults。使用$.fn.combobox.defaults重写默认值对象。 下拉列表框显示一个可编辑文本框和下拉式列表,用户可以选择一个值或多个值。用户可以直接输入文本到列表顶部或...
  • 下拉列表和列表标签

    千次阅读 2018-06-14 20:41:51
    html表单Form标签中,以下标签实现表单元素添加:标签 描述&lt;input&gt; 表单输入标签&lt;select&... 文字域标签下拉菜单和列表标签语法:&lt;select&gt;&lt...
  • 可选择和输入的下拉列表框示例

    千次阅读 2018-10-05 12:11:33
    &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type"...可选择和输入的下拉列表框&lt;/title&gt; &lt;style type="text/css"&gt; div,sp
  • 下拉列表框实现

    万次阅读 2010-09-10 16:02:00
    下拉列表框实现 一、实现框架 1 二、实现根视图 1 三、实现DropDownList类 2 四、一些改进 6 cocoa touch不提供下拉框控件,因为他们提供了UIPickerView。为什么还要使用已经成为windows标准控件之一的...
  • js方式实现下拉列表框

    万次阅读 2018-08-18 13:38:59
    原型思想实现函数的调用 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&... p
  • 下拉列表框(JComboBox)

    千次阅读 2016-05-13 14:39:34
    下拉列表框(JComboBox) 构造函数: JComboBox():建立一个新的JComboBox组件。 JComboBox(ComboBoxModel aModel):ListModel建立一个新的JComboBox组件。 JComboBox(Object[] items):利用Array对象建立一个新的...
  • jQuery下拉列表框操作和排序

    千次阅读 2015-01-04 14:09:38
    标签中的option进行排序,option具有两个属性,一个是text一个是value ...PS:在用下拉列表框进行选中一个item时,$(this).selected=true不如 $(this).attr('selected',true)好,因为在某些情况下,
  • 一:文本框和多行文本框 ...input type="text"/>...列表框是将所有选项展示出来,而下拉列表框会将所有选项折叠起来,两者的区别就是选项是否会折叠起来。 三:复选框和单选按钮 单选按钮必须为每一个
  • android自定义Spinner下拉列表框样式

    千次阅读 2012-11-13 11:38:54
    在Android中Spinner就是下拉菜单,它相当于HTML中的标签。 Android中提供的Spinner Widget下拉菜单已经非常好用了,样式也适用, 不过我们还是可以通过定义xml的方式来改变下拉...获取下拉列表框的值 l 调用set
  • 列表类组件(下拉列表框Spinner) 下拉列表框:通常用于提供一系列可以选择的列表项来供用户选择...在activity_main.xml文件中,Spinner标签来定义下拉列表框: 属性: android:layout_width和android:layout_h...
  • 可输入的Web下拉列表框控件

    千次阅读 2007-07-31 12:01:00
    vs2005提供的web下拉列表框 不支持输入,只能选择,我们可以继承该控件来支持输入功能,实现的原理很简单,就是增加一个textbox控件叠加在下拉列表框上,客户端通过脚本来同步这两个控件的值,先看看服务端代码: ...
  • 下拉列表框数据量过大解决方案

    千次阅读 2020-07-26 16:13:47
    下拉列表,从后端获取列表数据,数据量上万条时,如果直接将查询的结果渲染到前端页面,效率是非常低的。我的解决方案是,每次从后端读取100条数据(当然你可以自己限定每次查询的条数),当用户在列表框输入数据...
  • VS2010 下 MFC下拉列表框的用法

    千次阅读 2018-06-26 16:30:36
    最近在写一个串口程序,需要将下拉列表框的数据全部显示,怎么设置都不对,最后终于找到了设置方法:二、如何控制Combo Box的下拉长度1,首先要知道两点:一、那就是在设计界面里,点击一下Combo Box的下拉箭头,...
  • 可选择和输入的下拉列表框

    千次阅读 2013-11-05 13:42:45
    可选择和输入的下拉列表框 div,span,p,td,font{font-size:9pt;} onChange="javascript:document.getElementById('ccdd').value=document.getElementById('aabb').options[document....
  • jquery操作select下拉列表框

    千次阅读 2011-06-25 17:45:00
    近日在使用jquery操作select下拉列表框时遇到了一些需要注意的地方,功能是通过点击事件动态复制一个select到table的td中,并利用td包含的文本内容找到对应的select选中项,代码如下: ...
  • FastAdmin中多选下拉列表框排序问题

    千次阅读 2019-08-15 14:45:30
    FastAdmin中多选下拉列表框排序问题 在使用fastadmin的过程中,可能出现多选需要排序的问题 比如在类型选择的时候选择的是如下顺序 但是保存后,去修改页面发现排序变成如下 如果需要改成按照开始的排序修改 在...
  • C#自定义控件之下拉列表框

    千次阅读 2019-02-12 13:48:56
    设置 DropDownStyle 为DropDownList 将DrawMode 改为OwnerDrawFixed ... 样式就变为下面这样,但是只能在列表中选择,而不能手动输入 public class ComBox : ComboBox { public ComBox() { ...
  • 文本域,支持多行文本输入 ...1、标签是成对出现的,以开始,以结束。 2、cols:多行输入域的列数。 3、rows:多行输入域的行数。 4、在标签之间可以输入默认值。 举例:  联系我们  在这里输入内容...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 61,437
精华内容 24,574
关键字:

下拉列表框用什么标签