精华内容
下载资源
问答
  • 2022-04-19 22:25:32

    一、关键代码

    一)、创建单个下拉列表框的内容(项)

    1. 可以先创建下拉列表框,然后不断的一个个添加内容元素,注意泛型的使用,泛型这里选择字符串(String)。
    2. 单个创建下拉下拉列表框的内容元素,可以创建多个,下方源码只创建一个(“PC120挖机”)。
    3. 需要注意在源码前面添加下拉列表框的包类。import javax.swing.JComboBox;// 下拉框列表
    		// combo(连击),String<字符串>
    		JComboBox<String> comboBox_1=new JComboBox<>();
    		comboBox_1.addItem("PC120挖机");// 下拉框列表添加内容。Item(条款,项)
    

    二)、字符串数组添加多个下拉列表框的内容(项)

    • 也可以先创建字符串数组,数组里添加多个内容(项),然后将这个字符串数组的数据添加到下拉列表框中。
    		String items_1[]={"54m天泵","56m天泵","62m天泵"};// 建立数组
    		JComboBox<String> comboBox_1=new JComboBox<>(items_1);// 使用数组String添加下拉元素
    

    三)、模型方法给下拉列表框添加内容(项)

    1. 需要注意泛型的添加,不加有些JDK版本报错。源码本身无问题,但会因版本的兼容性问题报错。
    2. 模型方法注意添加模型相关的包类。
      import javax.swing.ComboBoxModel;// 下拉框列表模型
      import javax.swing.DefaultComboBoxModel;// 默认下拉框列表模型
    3. 模型方法的好处之一是当要在原来内容的基础上,继续加某一项内容(项)时,编写相关插入的相关代码便可。如:
      model_1.addElement(tmp);// 向数组模型添加元素 Element(元素)
      注意: 上行一行代码,这里只做说明使用,本文源码未使用。
    		JComboBox<String> comboBox_1=new JComboBox<>();// 新建下拉框列表
    		String items_1[]={"小户型","大户型","工区"};
    		// 下行不加<String>会因版本问题报错
    		ComboBoxModel<String> cm_1=new DefaultComboBoxModel<>(items_1);// 创建下拉框列表模型
    		comboBox_1.setModel(cm_1);// 向列表中添加模型
    

    二、简单说明

    • 大致流程说明。大致的流程也可观看流程图得知。先创建窗体f和容器c,将容器嵌入窗体中。设置窗体点击×即关闭程序,窗体可见,初始不设置布局。以上主要为way1的相关源码。然后创建一个下拉列表框,并给下拉列表框添加内容(元素)。添加内容有三种方法,源码看way2、way3、way4部分,分别为三种添加内容(项、元素)的方法。
    • way2的源码流程,先创建下拉列表框,然后逐个添加内容元素,最后再以动作监听,输出信息框的方式展示运行效果。
    • way3的源码流程,先创建字符串数组,数组中编辑好内容元素,然后将字符串数组添加到下拉列表框中,最后和way2一样以信息框展示运行效果。
    • way4的源码流程,创建下拉列表框,创建数组,将数组引入模型中,将模型添加到下拉列表框中。然后添加事件监听,通过输入信息框的方式展示运行效果。模型个泛型需要设置好,因为有的JDK版本会提示因编译的安全问题报错而无法编译。
    • Main一类。创建Demo类,功能的组合,如way1接way2,或者way1接way3。本文直接创建3个way1的窗体。

    三、流程图

    窗体
    容器
    初始不设置布局
    下拉列表框
    添加元素方法way2
    添加元素方法way3
    添加元素方法way4
    分别创建多个元素
    设置可编辑
    动作监听弹出信息框
    字符串数组创建元素
    设置不可编辑
    动作监听弹出信息框
    模型方法创建元素
    动作监听弹出信息框

    四、源码

    一)、源码A

    • 窗体里添加一个下拉列表框,和一个按钮。点击按钮弹出信息框,信息框的内容:索引和选择的内容。给下拉列表框里添加元素,代码有三种方法来实现。这里分别用方法way2、way3、way4(way1为窗体的属性)。本文源码是选择直接编译成三个窗体,各显示三个方法的效果。毕竟注释后一个个分别编译后的效果对比性较差,直接在桌面共同生成三个方法各自的效果对比性更好。
    • 注意:编译后三个窗体,是重合的,分别拉开分析便可。
    /*	【程序思想】
    *	下拉列表框组件
    */
    
    import java.awt.Container;// 容器
    
    import java.awt.event.ActionListener;// 动作监听
    import java.awt.event.ActionEvent;// 动作事件
    
    import javax.swing.JFrame;// 窗体
    import javax.swing.JComboBox;// 下拉框列表
    import javax.swing.ComboBoxModel;// 下拉框列表模型
    import javax.swing.DefaultComboBoxModel;// 默认下拉框列表模型
    import javax.swing.JButton;// 按钮
    import javax.swing.JOptionPane;// 选择 窗格
    
    class Demo{
    	JFrame f=new JFrame();// 窗体
    	Container c;// 容器
    
    	/*
    		way1
    		窗体的基本属性
    	*/
    	void way1(){
    		f.setBounds(400,200,500,400);// 位置、尺寸
    		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// 点×即关闭
    		c=f.getContentPane();// 容器c嵌入窗体
    		c.setLayout(null);// 初始容器c不设置布局
    	}
    
    	/*
    		way2
    		下拉框列表属性的设置,方法一
    	*/
    	void way2(){
    		
    		// combo(连击),String<字符串>
    		JComboBox<String> comboBox_1=new JComboBox<>();
    		comboBox_1.addItem("PC120挖机");// 下拉框列表添加内容。Item(条款)
    		comboBox_1.addItem("YC60挖机");// 下拉框列表添加内容。Item(条款)
    		comboBox_1.addItem("PC220炮机");// 下拉框列表添加内容。Item(项,项目)
    		
    		comboBox_1.setBounds(15,10,100,20);// 下拉框的坐标、尺寸。绝对布局
    		c.add(comboBox_1);
    
    		comboBox_1.setEditable(true);// 列表框可编辑
    
    		JButton btn_1=new JButton("按钮way2");
    		// Action(动作),performed(执行),Message(信息),dialog(对话框),selected(挑选),index(指数)
    		btn_1.addActionListener(new ActionListener(){
    			public void actionPerformed(ActionEvent e){
    				JOptionPane.showMessageDialog(f,
    					"选择的索引:"+comboBox_1.getSelectedIndex()+"\n"+
    					"选择的内容为:"+comboBox_1.getSelectedItem()
    				);
    				
    			}
    
    		});
    		btn_1.setBounds(120,20,110,40);// 按钮的坐标、尺寸
    		c.add(btn_1);
    	}
    
    	/*
    		way3
    		下拉框列表的属性设置,方法二
    	*/
    	void way3(){
    		String items_1[]={"54m天泵","56m天泵","62m天泵"};// 建立数组
    		JComboBox<String> comboBox_1=new JComboBox<>(items_1);// 使用数组String添加下拉元素
    
    		comboBox_1.setBounds(20,15,90,30);// 下拉框列表的位置、尺寸
    		c.add(comboBox_1);
    
    		comboBox_1.setEditable(false);// 列表框不可编辑
    
    		JButton btn_1=new JButton("按钮way3");
    		// Action(动作),performed(执行),Message(信息),dialog(对话框),selected(挑选),index(指数)
    		btn_1.addActionListener(new ActionListener(){
    			public void actionPerformed(ActionEvent e){
    				JOptionPane.showMessageDialog(f,
    					"选择的索引:"+comboBox_1.getSelectedIndex()+"\n"+
    					"选择的内容为:"+comboBox_1.getSelectedItem()
    				
    				);
    				
    			}
    
    		});
    		btn_1.setBounds(120,20,110,40);// 按钮的坐标、尺寸
    		c.add(btn_1);
    	}
    
    	/*
    		way4
    		下拉框的属性,方法三
    		模型方法
    	*/
    	void way4(){
    		// <泛型:字符串>
    		JComboBox<String> comboBox_1=new JComboBox<>();// 新建下拉框列表
    		String items_1[]={"小户型","大户型","工区"};
    		// 下行不加<String>会因版本问题报错
    		ComboBoxModel<String> cm_1=new DefaultComboBoxModel<>(items_1);// 创建下拉框列表模型
    		comboBox_1.setModel(cm_1);// 向下拉列表中添加模型
    
    		comboBox_1.setBounds(20,18,90,25);// 下拉框列表坐标、大小
    		c.add(comboBox_1);
    
    		JButton btn_1=new JButton("按钮way4");
    		// Action(动作),performed(执行),Message(信息),dialog(对话框),selected(挑选),index(索引)
    		btn_1.addActionListener(new ActionListener(){
    			public void actionPerformed(ActionEvent e){
    				JOptionPane.showMessageDialog(f,
    					"选择的索引:"+comboBox_1.getSelectedIndex()+"\n"+
    					"选择的内容为:"+comboBox_1.getSelectedItem()
    				);
    				
    			}
    
    		});
    		btn_1.setBounds(120,20,110,40);// 按钮的坐标、尺寸
    		c.add(btn_1);
    	}
    
    	public static void main(String[] args) {
    		Demo d=new Demo();
    		d.way1();// 窗体a属性
    		d.way2();// 下拉框列表的属性,编写方式1
    
    		Demo d_2=new Demo();
    		d_2.way1();// 再新建一个窗体b
    		d_2.way3();// 下拉框列表的属性,编写方式2
    
    		Demo d_3=new Demo();
    		d_3.way1();// 新建窗体c
    		d_3.way4();// 下拉框列表的属性,编写方式3,模型
    		
    		d.f.setVisible(true);// 窗体可见
    		d_2.f.setVisible(true);
    		d_3.f.setVisible(true);
    	}
    }
    
    

    二)、源码A的运行效果

    1.默认编译效果

    (1)、默认的编译效果,三个窗体因方法way1设置的坐标大小相同,所以在同一位置。如下图。我们分别拉开展示就好。
    在这里插入图片描述
    (2)、拉开最前面的两个窗体,让三个窗体在同一桌面平面展示。如下:
    在这里插入图片描述

    2.方法way2的窗体

    (1)、点击“按钮way2”,效果如下:
    在这里插入图片描述
    (2)、 “按钮way2”窗体的下拉列表框是可以编辑的,源码A中有相关的代码。这里我们编辑“推土机”后点击“按钮way2”,效果如下:
    在这里插入图片描述

    3.方法way3的窗体

    (1)、选择下拉列表框中的“62m天泵”,如下:
    在这里插入图片描述
    (2)、点击“按钮way3”,效果如下:
    在这里插入图片描述

    4.方法way4的窗体

    (1)、选择下拉列表框中的“大户型”,如下:

    • 注意:way4使用模型方法添加元素。
      在这里插入图片描述
      (2)、点击“按钮way04”的效果如下:
      在这里插入图片描述

    五、结语

    模型方法不设置好或不设泛型的话,有时候编译报错,作者的JDK版本便无法编译,不是常见的缺什么内容或类相关的报错,而是大致意思是说这个方法不安全不给你编译的报错。但有的版本不设置泛型便可编译运行。对于窗体的运行效果,想着一个个编译截图上传太麻烦,便选择生成三个方法下不同编译效果的窗体,这样对比也比较直观。其实这里“比较”的方向意思是三个方法都可以达成相同的效果,而不是各窗体的这个和哪个看起来怎么怎么样的不同。编译直观不同的地方是各方法里又另外添加了些功能代码,如:way2窗体的下拉列表框可编辑,way3窗体的下拉列表框不可编辑。但根本上元素类下拉选择的效果各方法却是一样的。

    六、定位日期

    2022.4.19;23:25 流程图、源码、源码运行效果的内容
    2022.4.20;23:30

    更多相关内容
  • 主要介绍了Python 窗体(tkinter)下拉列表框(Combobox)实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 2022年 Uibot中级实践题-下拉列表框操作,ABC三个空各填1条语句。亲测通过。
  • 主要介绍了Java Swing JComboBox下拉列表框的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 这是一款点击input弹出日期时间选择插件,可以下拉列表进行选择日期时间代码,jQuery点击弹出下拉框日期选择代码。
  • javascript下拉列表框,内容为当前年份及前后50年,默认选择为当前年份 代码如下: [removed] [removed]=function(){ //设置年份的选择 var myDate= new Date(); var startYear=myDate.getFullYear()-50;//起始年份 ...
  • 本文实例讲述了jQuery ajax+PHP实现的级联下拉列表框功能。分享给大家供大家参考,具体如下: 一 代码 fun.js: // JavaScript Document $(document).ready( function(){ $.get(returnpc.php?flag=p, null, ...
  • 主要介绍了PHP ADODB生成下拉列表框功能,结合实例形式分析了php使用ADODB类进行数据库操作及下拉列表框显示的相关操作技巧,需要的朋友可以参考下
  • 主要介绍了javascript对下拉列表框(select)的操作。需要的朋友可以过来参考下,希望对大家有所帮助
  • 如果想实现可选择和输入的下拉列表框,那么下面有个不错的示例,希望大家可以参考下
  • Axure RP 8 带滚动条带筛选的下拉列表框 圆角文本框,添加元件库就可以直接拖出来用
  • 主要介绍了JS设置下拉列表框当前所选值的方法,涉及JavaScript结合jsp动态设置select下拉列表框的相关技巧,需要的朋友可以参考下
  • 在编程过程中,我们对下拉列表框的取值很多时候都是获取option中的value,但是也有需要获取显示在页面中的值的时候,例如想获得”value”>ShowText中”ShowText”,我们该如何获取呢?方法很简单,具体代码如下: ...
  • 这是一款jQuery实现带搜索过滤功能的下拉列表框,可以多选项进行分组,设置选项的图标,对选项进行搜索过滤,以及进行多选选择。
  • 这篇文章主要介绍了wxpython自定义下拉列表框过程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 自定义wxpython下拉列表框,支持修改边框颜色,按钮图标...
  • 本文实例讲述了JavaScript实现下拉列表框数据增加、删除、上下排序的方法。分享给大家供大家参考。具体如下: 这里实现在一个支持多选的下拉列表框内进行数据项的添加、删除、向上、向下移动操作,我们在一些人才...
  • 此框下拉列表框可输入,可根据输入内容自动过滤模糊查询到的option值,点击弹框下拉列表框,选择完毕后下拉列表框自动隐藏,非常好用
  • 主要介绍了Android编程实现多列显示的下拉列表框Spinner功能,结合具体实例形式分析了Android多列表显示功能的相关布局操作实现技巧,需要的朋友可以参考下
  • 主要为大家介绍了jQuery实现多级联动下拉列表查询,感兴趣的小伙伴们可以参考一下
  • 主要介绍了JS+CSS实现美化的下拉列表框效果,涉及javascript针对下拉列表框样式的相关操作技巧,非常美观大方,需要的朋友可以参考下
  • 主要介绍了JS检索下拉列表框中被选项目的索引号(selectedIndex),本文通过实例代码图文详解的形式给大家介绍的非常详细,需要的朋友可以参考下
  • 主要介绍了js操纵dom生成下拉列表框的方法,需要的朋友可以参考下
  • 主要介绍了php使用数组填充下拉列表框的方法,涉及php操作数组的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
  • axure下拉列表框单选框First, let’s clarify what exactly is a dropdown menu, and what is a combo box, aren’t they the same? Well … no, not really, let me explain. 首先,让我们弄清楚什么是下拉菜单,...

    axure下拉列表框单选框

    First, let’s clarify what exactly is a dropdown menu, and what is a combo box, aren’t they the same? Well … no, not really, let me explain.

    首先,让我们弄清楚什么是下拉菜单,什么是组合框,不是吗? 好吧……不,不是,让我解释一下。

    Technically speaking, a dropdown menu is different from a combo box. A combo box is a combination of a dropdown menu and text input (confined to a set list of values).

    从技术上讲,下拉菜单与组合框不同。 组合框是下拉菜单和文本输入(仅限于一组设置的值)的组合。

    In other words a combo box is more difficult to prototype because of the dual nature of the control and in this article we will see how we can tackle this problem starting with a simple dropdown menu.

    换句话说,由于控件的双重特性,组合框更难以原型化,在本文中,我们将看到如何从一个简单的下拉菜单开始解决这个问题。

    So, this article has 2 parts, on the first part you will learn how to prototype a simple dropdown menu and in the second part we will expand this control into a combo box.

    因此,本文分为两部分,第一部分将学习如何为简单的下拉菜单创建原型,第二部分将将该控件扩展为组合框

    先决条件 (Prerequisites)

    To follow along, you’ll need to be a little familiar with Axure and have some understanding about widgets, interactions, local variables and expressions.

    要继续学习,您需要对Axure有所了解,并对小部件,交互,局部变量和表达式有所了解。

    Also, if you haven’t done it yet, you can download Axure the latest version from Axure Website.

    另外,如果您尚未执行此操作,则可以从Axure网站下载最新版本。

    第1部分-下拉菜单 (PART 1 — Dropdown menu)

    Dropdowns menus are easy to prototype in Axure, using simple Shape widgets and a Repeater widget for the list of options. To make this control self-contained (without dependencies) we will not use global variables, this will help us to easily reuse the dropdown menu in other projects.

    使用简单的Shape部件和Repeater部件作为选项列表,可以轻松在Axure中创建下拉菜单的原型。 为了使该控件自成一体(没有依赖项),我们将不使用全局变量 ,这将帮助我们轻松地在其他项目中重用下拉菜单。

    我们将创造什么 (What we will create)

    Axure — Dropdown menu
    Dropdown menu
    下拉式菜单

    In this part, we will create a simple dropdown menu (a well known input control pattern) used in mobile or desktop UI. There are multiple variations of this type of control (like: pull-down buttons, pop-up menus, droplist and so on) but the principles shown here can be applied to any variation. This type of control allows the user to select an option from a predefined list of options, usually the selected option is then displayed inside the dropdown. If you want to learn more about this control type you can take a look at the Apple HIG pull-down button (a.k.a pop-up menu) here: https://developer.apple.com/design/human-interface-guidelines/macos/buttons/pull-down-buttons/

    在这一部分中,我们将创建一个简单的下拉菜单 (一种众所周知的输入控件模式),该菜单用于移动或桌面UI 。 此类控件有多种变体(例如:下拉按钮,弹出菜单,下拉列表等),但是此处显示的原理可以应用于任何变体。 这种类型的控件允许用户从预定义的选项列表中选择一个选项,通常所选的选项随后会显示在下拉菜单中。 如果您想了解有关此控件类型的更多信息,可以在这里查看Apple HIG下拉按钮(又名弹出菜单): https : //developer.apple.com/design/human-interface-guidelines/ macos /按钮/下拉按钮/

    分步说明 (Step-by-step instructions)

    The level of difficulty is easy to medium. Everything was broken into 2 steps so you can follow along more easily.

    难易程度中等。 一切都分为2个步骤,因此您可以更轻松地进行后续操作。

    1. Building the necessary shapes

      建立必要的形状
    2. Adding interactivity

      增加互动

    步骤1 —建立必要的形状 (Step 1 — Building the necessary shapes)

    In this step we are going to create all the necessary shapes for our dropdown menu control. To see an overview of the shapes and structure take a look at the image below.

    在这一步中,我们将为下拉菜单控件创建所有必要的形状。 要查看形状和结构的概述,请看下面的图片。

    Axure — dropdown menu shapes

    Basically, we have only one group called “dropdown” and inside we have 2 main groups:

    基本上,我们只有一个称为“ 下拉列表 ”的组,内部有两个主要组

    • dropdown_selection” group — In this group we have all the necessary elements to form the dropdown selection part

      dropdown_selection ”组-在此组中,我们具有构成下拉选择部分的所有必要元素

    • dropdown_list” group — this group defines the list of options

      dropdown_list ”组-该组定义选项列表

    If you don’t have too much experience with Axure shape widgets then you can read more about them here: https://docs.axure.com/axure-rp/reference/shapes/.

    如果您对Axure形状小部件没有太多经验,则可以在这里阅读有关它们的更多信息: https : //docs.axure.com/axure-rp/reference/shapes/

    Here are more details about each group shapes and properties (these properties can be changed to fit your needs):

    以下是有关每个组的形状和属性的更多详细信息(可以更改这些属性以满足您的需要):

    The “dropdown_selection” group contains:

    dropdown_selection ”组包含:

    selected_value:

    selected_value

    • Width/Height: 258/26

      宽/高:258/26
    • Fill: #FFFFFF

      填写:#FFFFFF

    dropdown_label:

    dropdown_label

    • Text fill: #1A1816, opacity: 60%

      文字填充:#1A1816,不透明度:60%
    • Font size: 12

      字体大小:12

    dropdown_bg:

    dropdown_bg

    • Width/Height: 38/38

      宽/高:38/38
    • Fill: #FFFFFF

      填写:#FFFFFF
    • Corner: 4

      角球:4
    • Shadow: fill: #1A1816, opacity: 20%, x: 0, y: 1, blur: 2

      阴影:填充:#1A1816,不透明度:20%,x:0,y:1,模糊:2

    The “dropdown_selection” group contains:

    dropdown_selection ”组包含:

    dropdown_values_list | option_value:

    dropdown_values_list | option_value

    • Text fill: #1A1816

      文字填充:#1A1816
    • Font size: 16

      字体大小:16

    dropdown_list_bg:

    dropdown_list_bg

    • Width/Height: 38/38

      宽/高:38/38
    • Fill: #FFFFFF

      填写:#FFFFFF
    • Corner: 4

      角球:4
    • Shadow: fill: #1A1816, opacity: 20%, x: 0, y: 1, blur: 2

      阴影:填充:#1A1816,不透明度:20%,x:0,y:1,模糊:2

    An important thing to mention here is how the dropdown_values_list Repeater is set up, on the data section we have only one column Value and the values are: 1,2,3

    这里要提到的重要事情是如何设置dropdown_values_list转发器,在数据部分上,我们只有一列Value ,值分别为:1,2,3

    You can learn more about String functions from here: https://docs.axure.com/axure-rp/reference/repeaters/

    您可以从此处了解有关String函数的更多信息: https : //docs.axure.com/axure-rp/reference/repeaters/

    第2步-添加互动 (Step 2 — Adding interactivity)

    The dropdown menu has 2 interactions added on different groups/elements to make everything work. Here are the details:

    下拉菜单在不同的组/元素上添加了2种交互方式,以使一切正常。 详细信息如下:

    Axure — dropdown menu — interactivity (selection)

    The first interaction is added to the dropdown_selection group on the Click or Tap event to Show/Hide the list of values but also to Rotate the dropdown arrow accordingly

    第一次交互将添加到Click或Tap事件的dropdown_selection组中,以显示/隐藏值列表,还相应地旋转下拉箭头

    1. Action Show/Hide:

      动作显示/隐藏

    • Toggle

      切换
    • Target: dropdown_list

      目标:dropdown_list
    • Animate Show: slide down, 250ms, ease in out cubic

      动画显示:向下滑动250毫秒,向内移动三次
    • Animate Hide: slide up, 250 ms, ease in out cubic

      动画隐藏:向上滑动250毫秒,渐出立方

    2. Action Rotate:

    2.动作旋转

    • Target: arrow_icon

      目标:arrow_icon
    • Rotate: clockwise, by: 180

      旋转:顺时针旋转:180
    • Animate: ease in out cubic, 250ms

      动画:缓入立方,250ms
    Axure — dropdown menu — interactivity (value list)

    Another interaction is added to the dropdown_values_list Repeater on the Item Loaded event to set up the way the option is rendered

    Item Loaded事件上,将另一个交互添加到dropdown_values_list转发器中,以设置呈现选项的方式

    1. Action Set Text:

      动作集文字

    • Target: option_value

      目标:option_value
    • Set to: text

      设置为:文字
    • Value: [[Item.Value]] lbs (this is an expression where Item.Value is the value from the Value column)

      值:[[Item.Value]]磅(这是一个表达式,其中Item.Value是“值”列中的 )

    Axure — dropdown menu — interactivity (option value)

    The last interaction is on the option_value item from the Repeater on the Click or Tap event to respond to the changing of the selection(option)

    最后一次交互是在Click或Tap事件中来自Repeater的option_value项目上,以响应选择(选项)的更改

    1. Action Set Text:

      动作集文字

    • Target: selected_value

      目标:selected_value
    • Set to: text

      设置为:文字
    • Value: [[Item.Value]] lbs (this is an expression where Item.Value is the value from the Value column)

      值:[[Item.Value]]磅(这是一个表达式,其中Item.Value是“值”列中的 )

    2. Action Show/Hide: — here we are hiding the list of options

    2.动作显示/隐藏 :-这里我们隐藏了选项列表

    • Hide

      隐藏
    • Target: dropdown_list

      目标:dropdown_list

    3. Action Rotate: — we rotate back the arrow

    3. 旋转动作:—向后旋转箭头

    • Target: arrow_icon

      目标:arrow_icon
    • Rotate: clockwise, by: 180

      旋转:顺时针旋转:180
    • Animate: ease in out cubic, 250ms

      动画:缓入立方,250ms

    If you are not really familiar with events, actions, cases you can read more about them on the Axure website https://docs.axure.com/axure-rp/reference/events-cases-actions/.

    如果您不太熟悉事件,操作和案例,则可以在Axure网站https://docs.axure.com/axure-rp/reference/events-cases-actions/上阅读有关它们的更多信息。

    This is it, we now have a simple and functional dropdown menu so let’s move on to combo boxes..

    就是这样,我们现在有了一个简单实用的下拉菜单,因此让我们继续使用组合框。

    第2部分-组合框 (PART 2 — Combo box)

    Combo boxes are a little more complex to prototype. I’m not going to repeat the same steps from the drop down menu, but we are going to concentrate on the differences.

    组合框的原型要复杂一些。 我不会从下拉菜单中重复相同的步骤,但是我们将专注于差异。

    Axure — combo box — global variable

    One thing to mention before moving on, is that in our case we will use a global variable to temporarily store a selection value, we can avoid doing this by creating a hidden Label widget to hold this temporary value (this option can be explored by you if you want).

    在继续之前要提到的一件事是,在我们的例子中,我们将使用全局变量来临时存储选择值,我们可以通过创建一个隐藏的Label小部件来保存此临时值来避免这样做(您可以探索此选项)如果你想)。

    我们将创造什么 (What we will create)

    Axure — Combo box
    Combo Box
    组合框

    In this second part, we will create a simple combo box. There are multiple variations of this type of control but the principles shown here can be applied to any variation. If you want to learn more about this control type you can take a look at the Apple HIG for combo boxes here: https://developer.apple.com/design/human-interface-guidelines/macos/fields-and-labels/combo-boxes/

    在第二部分中,我们将创建一个简单的组合框。 这种控制类型有多种变体,但此处显示的原理可以应用于任何变体。 如果要了解有关此控件类型的更多信息,可以在此处查看Apple HIG组合框: https : //developer.apple.com/design/human-interface-guidelines/macos/fields-and-labels/组合框/

    分步说明 (Step-by-step instructions)

    The level of difficulty is easy to medium. Everything was broken into 2 steps so you can follow along more easily.

    难易程度中等。 一切都分为2个步骤,因此您可以更轻松地进行后续操作。

    1. Building the necessary shapes

      建立必要的形状
    2. Adding interactivity

      增加互动

    步骤1 —建立必要的形状 (Step 1 — Building the necessary shapes)

    The structure for this combo box is similar to the dropdown, so we will concentrate on what is different.

    该组合框的结构类似于下拉列表,因此我们将集中于不同之处。

    Axure — combo box shapes

    First off, I’ve replaced the “selected_valueLabel with an Text Field named “input_value”. We will use this input field to allow the user to input any number (eg: 1,2,3,4,5 and so on), once the user has finish with the input on Lost Focus event we will reformat the render to be displayed as “X lbs”, where the X is the number input.

    首先,我用名为“ input_value ”的文本字段替换了“ selected_value标签 。 我们将使用此输入字段来允许用户输入任何数字(例如:1,2,3,4,5,依此类推),一旦用户完成Lost Focus事件的输入,我们将重新格式化为显示为“ X lbs”,其中X是输入的数字。

    I’ve also added 2 more shapes:

    我还添加了2种形状:

    • dropdown_hotspot — is now used to trigger the the list of values (instead of the dropdown_selection group)

      dropdown_hotspot —现在用于触发值列表(而不是dropdown_selection组)

    • separator_vertical — used to visually separate the input part from the dropdown button

      spacer_vertical-用于从下拉按钮中直观地分离输入部分

    第2步-添加互动 (Step 2 — Adding interactivity)

    The first interaction is added to the dropdown_hotspot (which is the same from the dropdown menu dropdown_selection group) on the Click or Tap event to Show/Hide the list of values but also to Rotate the dropdown arrow accordingly.

    第一次交互将添加到Click或Tap事件上的dropdown_hotspot (与下拉菜单dropdown_selection组相同)以显示/隐藏值列表,并相应地旋转下拉箭头。

    Axure — combo box — interactivity

    Most of the interactivity is happening on the input_value Text Field we will respond to the Got Focus/Lost Focus events and optionally to the Loaded event.

    大多数交互发生在input_value文本字段上,我们将响应“ 获得焦点” /“失去焦点”事件,并可选地响应“ 已加载”事件。

    Axure — combo box — interactivity (input selector)

    Let’s see what is happening, we have some actions on the Got Focus/Lost Focus events to handle the user input, so while the input_value Got Focus we will clear the existing value (this is the reason why we need the input_valuer_var to simply hold the current value) and wait for user input, now the tricky part is on the Lost Focus event, here we need to check if the user has typed a new value or he simply exit without any change and to properly handle this in Axure we make use of Cases/Conditions.You can learn more about Conditional Logic on Axure website https://docs.axure.com/axure-rp/reference/conditional-logic/

    让我们看看发生了什么,我们对Got Focus / Lost Focus事件采取了一些措施来处理用户输入,因此,在input_value Got Focus时,我们将清除现有值(这就是为什么我们需要input_valuer_var来简单保存输入值的原因。当前值)并等待用户输入,现在棘手的部分是Lost Focus事件,在这里我们需要检查用户是否键入了新值,或者他只是直接退出而没有任何更改,并在Axure中正确处理此问题例/条件 。您可以了解更多有关条件逻辑上Axure网站https://docs.axure.com/axure-rp/reference/conditional-logic/

    Below are the action details for each event (FYI: the current widget is input_value).

    以下是每个事件的操作详细信息(仅供参考:当前小部件为input_value )。

    Event: Loaded — this is optional and is used to initialize with the global variable value

    事件: 已加载 -这是可选的,用于使用全局变量值进行初始化

    1. Action Set Text: — here we are clearing the text from the input_value widget

      操作集文本 :—在这里,我们从input_value小部件中清除文本

    • Target: This

      对象:这个
    • Set To: value of variable

      设置为:变量值
    • Value: input_value_var

      值:input_value_var

    Event: Got Focus

    事件: 获得关注

    1. Action Set Variable Value: — we are storing the current value to the global variable

      动作集变量值 :—我们将当前值存储到全局变量

    • Target: input_value_var

      目标:input_value_var
    • Set to: text on widget

      设置为:小部件上的文本
    • Widget: This

      窗口小部件:此

    2. Action Set Text: — here we are clearing the text from the input_value widget

    2.操作集文本 :—在这里,我们从input_value小部件中清除文本

    • Target: This

      对象:这个
    • Set To: text

      设置为:文本
    • Value:

      值:

    Event: Lost Focus

    事件: 失去焦点

    Case: NoChange | Condition: If text on This equals “”

    案例:NoChange | 条件: 如果 “此”上的文字等于“”

    1. Action Set Text: — here we are clearing the text from the input_value widget

      操作集文本 :—在这里,我们从input_value小部件中清除文本

    • Target: This

      对象:这个
    • Set To: value of variable

      设置为:变量值
    • Value: input_value_var

      值:input_value_var

    Case: NewText | Condition: Else If text on This not equals “”

    案例:NewTex t | 条件: 否则如果 “此不等于”上的文字

    1. Action Set Text: — here we are clearing the text from the input_value widget

      操作集文本 :—在这里,我们从input_value小部件中清除文本

    • Target: This

      对象:这个
    • Set To: value of variable

      设置为:变量值
    • Value: [[This.text.trim()]] lbs

      值:[[This.text.trim()]]磅

    2. Action Set Variable Value:

    2.操作集变量值

    • Target: input_value_var

      目标:input_value_var
    • Set to: text on widget

      设置为:小部件上的文本
    • Widget: This

      窗口小部件:此

    The last interaction is on the option_value item from the Repeater on the Click or Tap event to respond to the changing of the selection(option) which is the same as on the dropdown menu.

    最后一次交互是在Click或Tap事件上的Repeater的option_value项上,以响应对选择(选项)的更改,该更改与下拉菜单上的相同。

    Yee! That’s it!

    !! 而已!

    Creating a dropdown menu is easy in Axure but the combo box can be a little challenging. I hope this article helped you to easily tackle dropdown menus and combo boxes.

    在Axure中创建下拉菜单很容易,但是组合框可能会有些挑战。 我希望本文能帮助您轻松解决下拉菜单和组合框。

    You can also download the Axure file from here: https://hi.switchy.io/1j2y

    您也可以从此处下载Axure文件: https ://hi.switchy.io/1j2y

    Image for post
    UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in. UX Para Minas Pretas (UX For Black Women),这是一个巴西组织,致力于通过采取行动,赋权和知识共享的举措来促进科技行业中的黑人女性平等。 对系统性种族主义保持沉默是不可行的。 建立您相信的设计社区。

    翻译自: https://uxdesign.cc/how-to-create-dropdown-menus-and-combo-boxes-in-axure-a3741b367e68

    axure下拉列表框单选框

    展开全文
  • php 如何取得select下拉列表框的值,其实就是需要设置下name属性获取下即可。
  • 主要为大家详细介绍了Android下拉列表选项,及指示箭头动画的制作代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • ListView 中实现可编辑文本或双击出现下拉列表框 重写listview空间,在控件中添加下拉框和文本框

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 149,177
精华内容 59,670
关键字:

如何做下拉列表框