dropdown_dropdownlist - CSDN
  • Unity 之 UGUI Dropdown组件使用简析

    千次阅读 2019-06-26 09:04:29
    Unity 之 UGUI Dropdown组件使用简析,动态生成下拉选项内容,代码控制下拉选项操作。

    Unity 之 UGUI Dropdown组件使用简析

    官方文档:https://docs.unity3d.com/Manual/script-Dropdown.html
    来自官方诠释:控件显示当前选择的选项。一旦单击,它将打开选项列表,以便可以选择一个新选项。选择新选项后,关闭的列表再次关闭,控件将显示新选定的选项。如果用户单击控件本身或画布中的任何其他位置,列表也将关闭。

    创建出Unity 定义好的Dropdown组件,大概长成这个样子…

    dropdown

    细心的你会发现,当运行时,会生成一个Blocker,这个时充满当前图层的,这也是为什么当你点击了下拉选项,点击空白处,下拉选项会自动关闭的原因。

    在这里插入图片描述

    看一下生成的Blocker的Inspector面板

    在这里插入图片描述


    下面是一个对DropDown基础操作

    using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class DropDownTest : MonoBehaviour {
    
        public Dropdown dropDown;
    
    	void Start () {
    
            //是否可以点击
            dropDown.interactable = true;
    
            #region 添加下拉选项,,,设置文字,底图
            //添加一个下拉选项
            Dropdown.OptionData data = new Dropdown.OptionData();
            data.text = "方案一";
            //data.image = "指定一个图片做背景不指定则使用默认";
            dropDown.options.Add(data);
    
            //另一种添加方式 , 不过用起来并不比第一个方便,
            List<Dropdown.OptionData> listOptions = new List<Dropdown.OptionData>();       
            listOptions.Add(new Dropdown.OptionData("方案二"));
            listOptions.Add(new Dropdown.OptionData("方案三"));
            dropDown.AddOptions(listOptions);
    
            //设置显示字体大小
            dropDown.captionText.fontSize = 14;
            //dropDown.captionImage = "底图";
            //设置要复制字体大小
            dropDown.itemText.fontSize = 15;
            //dropDown.itemImage = "底图";
    
            //PS:我一般是使用循环 使用第一种形式添加
            #endregion
    
            #region 添加完成就可以使用了,那么当我们想要复用怎么办呢?,这时就用到了移除OptionData,下面的每个注释打开都是一个功能
            //直接清理掉所有的下拉选项,
            dropDown.ClearOptions();
            //亲测不是很好用
            //dropDown.options.Clear(); 
    
            //对象池回收时,有下拉状态的,直接干掉... (在极限点击测试的情况下会出现)
            if (dropDown.transform.childCount == 3)
            {
                Destroy(dropDown.transform.GetChild(2).gameObject);
            }
    
            //移除指定数据   参数:OptionData
            dropDown.options.Remove(data);
            //移除指定位置   参数:索引
            dropDown.options.RemoveAt(0); 
            #endregion
    
            #region 添加监听函数
            //当点击后值改变是触发 (切换下拉选项)
            dropDown.onValueChanged.AddListener((int v) => OnValueChange(v));
            //若有多个,可以将自己当做参数传递进去,已做区分。
            //dropDown.onValueChanged_1.AddListener((int v) => OnValueChange(dropDown.gameobject,v));
            #endregion
        }
    
        /// <summary>
        /// 当点击后值改变是触发 (切换下拉选项)
        /// </summary>
        /// <param name="v">是点击的选项在OptionData下的索引值</param>
        void OnValueChange(int v)
        {
            //切换选项 时处理其他的逻辑...
            Debug.Log("点击下拉控件的索引是..." + v);
        }	
    	
    }
    
    


    内置的方法和属性大家可以去官网查看,文章开头有官网链接哦

    官方源码:

    #region 程序集 UnityEngine.UI, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null
    // E:\program files\Unity\Editor\Data\UnityExtensions\Unity\GUISystem\UnityEngine.UI.dll
    #endregion
    
    using System.Collections.Generic;
    using UnityEngine.Events;
    using UnityEngine.EventSystems;
    
    namespace UnityEngine.UI
    {
        //
        // 摘要:
        //     A standard dropdown that presents a list of options when clicked, of which one
        //     can be chosen.
        //一个标准的下拉菜单,它在单击时显示一个选项列表,可以从中选择一个。
        [AddComponentMenu("UI/Dropdown", 35)]
        [RequireComponent(typeof(RectTransform))]
        public class Dropdown : Selectable, IPointerClickHandler, ISubmitHandler, ICancelHandler, IEventSystemHandler
        {
            protected Dropdown();
    
            //
            // 摘要:
            //     The Image component to hold the image of the currently selected option.
            //用于保存当前选定选项的图像的图像组件。
            public Image captionImage { get; set; }
            //
            // 摘要:
            //     The Text component to hold the text of the currently selected option.
            //用于保存当前选定选项的文本的文本组件。
            public Text captionText { get; set; }
            //
            // 摘要:
            //     The Rect Transform of the template for the dropdown list.
            //下拉列表模板的Rect转换
            public RectTransform template { get; set; }
            //
            // 摘要:
            //     The list of possible options. A text string and an image can be specified for
            //     each option.
            //可能选项的列表。可以为每个选项指定文本字符串和图像。
            public List<OptionData> options { get; set; }
            //
            // 摘要:
            //     A UnityEvent that is invoked when when a user has clicked one of the options
            //     in the dropdown list.
            //当用户单击其中一个选项时调用的UnityEvent 在下拉列表中。
            public DropdownEvent onValueChanged { get; set; }
            //
            // 摘要:
            //     The Text component to hold the text of the item.
            //文本组件来保存项的文本。
            public Text itemText { get; set; }
            //
            // 摘要:
            //     The Image component to hold the image of the item.
            //用于保存项的图像的图像组件。
            public Image itemImage { get; set; }
            //
            // 摘要:
            //     The index of the currently selected option. 0 is the first option, 1 is the second,
            //     and so on.
            //当前选定选项的索引。0是第一个选项,1是第二个选项,等等。
            public int value { get; set; }
    
            public void AddOptions(List<Sprite> options);
            public void AddOptions(List<string> options);
            public void AddOptions(List<OptionData> options);
            //
            // 摘要:
            //     Clear the list of options in the Dropdown.
            //清除下拉列表中的选项。
            public void ClearOptions();
            //
            // 摘要:
            //     Hide the dropdown list.
            //隐藏下拉列表。
            public void Hide();
            //
            // 摘要:
            //     Called by a BaseInputModule when a Cancel event occurs.
            //当发生取消事件时,由BaseInputModule调用。
            // 参数:
            //   eventData:
            public virtual void OnCancel(BaseEventData eventData);
            //
            // 摘要:
            //     Handling for when the dropdown is 'clicked'.
            //处理当下拉框被'点击'。
            // 参数:
            //   eventData:
            //     Current event.
            public virtual void OnPointerClick(PointerEventData eventData);
            //
            // 摘要:
            //     What to do when the event system sends a submit Event.
            //当事件系统发送提交事件时应该做什么。
            // 参数:
            //   eventData:
            //     Current event.
            public virtual void OnSubmit(BaseEventData eventData);
            //
            // 摘要:
            //     Refreshes the text and image (if available) of the currently selected option.
            //     If you have modified the list of options, you should call this method afterwards
            //     to ensure that the visual state of the dropdown corresponds to the updated options.
            //刷新当前选定选项的文本和图像(如果可用)。
            //如果你修改了选项列表,你应该在之后调用这个方法
            //确保下拉菜单的可视状态与更新后的选项相对应。
            public void RefreshShownValue();
            //
            // 摘要:
            //     Show the dropdown list.
            //显示下拉列表。
            public void Show();
            protected override void Awake();
            //
            // 摘要:
            //     Override this method to implement a different way to obtain a blocker GameObject.
            //重写此方法以实现获取拦截器GameObject的另一种方法。
            // 参数:
            //   rootCanvas:
            //     The root canvas the dropdown is under.
            //下拉菜单下的根画布。
            // 返回结果:
            //     The obtained blocker.
            protected virtual GameObject CreateBlocker(Canvas rootCanvas);
            //
            // 摘要:
            //     Override this method to implement a different way to obtain a dropdown list GameObject.
            //重写此方法以实现获取下拉列表GameObject的另一种方法。
            // 参数:
            //   template:
            //     The template to create the dropdown list from.
            //创建下拉列表的模板。
            // 返回结果:
            //     The obtained dropdown list.
            protected virtual GameObject CreateDropdownList(GameObject template);
            protected virtual DropdownItem CreateItem(DropdownItem itemTemplate);
            //
            // 摘要:
            //     Override this method to implement a different way to dispose of a blocker GameObject
            //     that blocks clicks to other controls while the dropdown list is open.
            //重写此方法以实现处理拦截器GameObject的另一种方法
    		//当下拉列表打开时,它阻止对其他控件的单击。
            // 参数:
            //   blocker:
            //     The blocker to dispose of.
            //要处理的阻滞剂。
            protected virtual void DestroyBlocker(GameObject blocker);
            //
            // 摘要:
            //     Override this method to implement a different way to dispose of a dropdown list
            //     GameObject.
            //重写此方法,以实现处理下拉列表的另一种方法
            // 参数:
            //   dropdownList:
            //     The dropdown list to dispose of.
            //要处理的下拉列表。
            protected virtual void DestroyDropdownList(GameObject dropdownList);
            protected virtual void DestroyItem(DropdownItem item);
            protected override void OnValidate();
    
            //
            // 摘要:
            //     Class used internally to store the list of options for the dropdown list.
            //类,用于在内部存储下拉列表的选项列表。
            public class OptionDataList
            {
                public OptionDataList();
    
                //
                // 摘要:
                //     The list of options for the dropdown list.
                public List<OptionData> options { get; set; }
            }
            //
            // 摘要:
            //     Class to store the text and/or image of a single option in the dropdown list.
            //类来存储下拉列表中单个选项的文本和/或图像。
            public class OptionData
            {
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData();
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData(string text);
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData(Sprite image);
                //
                // 摘要:
                //     Create an object representing a single option for the dropdown list.
                //为下拉列表创建一个表示单个选项的对象。
                // 参数:
                //   text:
                //     Optional text for the option.
                //
                //   image:
                //     Optional image for the option.
                public OptionData(string text, Sprite image);
    
                //
                // 摘要:
                //     The text associated with the option.
                public string text { get; set; }
                //
                // 摘要:
                //     The image associated with the option.
                public Sprite image { get; set; }
            }
            //
            // 摘要:
            //     UnityEvent callback for when a dropdown current option is changed.
            //UnityEvent回调函数,用于更改当前下拉选项时的回调。
            public class DropdownEvent : UnityEvent<int>
            {
                public DropdownEvent();
            }
            protected internal class DropdownItem : MonoBehaviour, IPointerEnterHandler, ICancelHandler, IEventSystemHandler
            {
                public DropdownItem();
    
                public Text text { get; set; }
                public Image image { get; set; }
                public RectTransform rectTransform { get; set; }
                public Toggle toggle { get; set; }
    
                public virtual void OnCancel(BaseEventData eventData);
                public virtual void OnPointerEnter(PointerEventData eventData);
            }
        }
    }
    
    展开全文
  • Bootstrap 下拉菜单(Dropdowns)

    千次阅读 2019-07-26 00:13:35
    dropdown指定下拉菜单,下拉菜单都包裹在 .dropdown 里,dropdown-menu指定下拉菜单 <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1"...

    一、Bootstrap 下拉菜单(Dropdowns)

    1.1 基本下拉框

    .dropdown 类用来指定一个下拉菜单。
    我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle=“dropdown” 属性。
    <div> 元素上添加 .dropdown-menu 类来设置实际下拉菜单,然后在下拉菜单的选项中添加 .dropdown-item 类。

    <div class="container">
        <h2>下拉菜单</h2>
        <p>.dropdown 类用来指定一个下拉菜单。</p>
        <p>.dropdown-menu 类来设置实际下拉菜单。</p>
        <p>我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。</p>
        <div class="dropdown">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
                Dropdown button
            </button>
            <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Link 1</a>
                <a class="dropdown-item" href="#">Link 2</a>
                <a class="dropdown-item" href="#">Link 3</a>
            </div>
        </div>
    </div>
    

    在这里插入图片描述

    1.2 下拉菜单中的分割线

    .dropdown-divider类用于定义下拉菜单中的分割线

    <div class="container">
      <h2>下拉菜单中</h2>
      <p>.dropdown-divider 类用于在下拉菜单中创建一个水平的分割线:</p>
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Another link</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.3 下拉菜单中的禁用项

    <div class="container">
      <h2>下拉菜单</h2>
      <p>.active 类会让下拉菜单的选项高亮显示 (添加蓝色背景)。</p>
      <p>如果要禁用下拉菜单的选项,可以使用.disabled 类。</p>
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Normal</a>
          <a class="dropdown-item active" href="#">Active</a>
          <a class="dropdown-item disabled" href="#">Disabled</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.4 指定向上弹出的下拉菜单

    如果你希望下拉菜单向上弹出,可以将 <div> 元素的 class=“dropdown” 替换为 “dropup”:

    <div class="container">
      <h2>下拉菜单</h2>
      <p> .dropup 类用于设置下拉菜单向上弹出:</p><br>
      <div class="dropup">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.5 下拉菜单中添加标题

    .dropdown-dropdown-header 下拉菜单中添加标题

    <div class="container">
      <h2>下拉菜单中</h2>
      <p>.dropdown-header 类用于在下拉菜单中添加标题:</p>
      <div class="dropdown">
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
          Dropdown button
        </button>
        <div class="dropdown-menu">
          <h5 class="dropdown-header">Dropdown header</h5>
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
          <a class="dropdown-item" href="#">Link 3</a>
          <h5 class="dropdown-header">Dropdown header</h5>
          <a class="dropdown-item" href="#">Another link</a>
        </div>
      </div>
    </div>
    

    在这里插入图片描述

    1.6 按钮中设置下拉菜单

    <!DOCTYPE html>
    <html>
    <head>
      <title>Bootstrap 实例</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
      <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
      <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
      <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    </head>
    <body>
    
    <div class="container">
      <h2>按钮中的下拉菜单</h2>
      <div class="btn-group">
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
      
      <div class="btn-group">
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    
      <div class="btn-group">
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">Link 1</a>
          <a class="dropdown-item" href="#">Link 2</a>
        </div>
      </div>
    </div>
    </body>
    </html>
    

    在这里插入图片描述

    展开全文
  • 开源框架DropDownMenu

    2020-07-22 23:33:03
    开源框架DropDownMenu,经过自己一点简单修改,可以更方便使用, 原来的开源代码是需要V4包,并且需要小刀注解,这里都不用了!
  • DROPDOWN-下拉列表

    2018-06-21 17:53:51
    自己生产的是不能直接用的哦 不能全面显示?怎么办?需要增加三句话。参考:...amp;traceid=static void _cbDialog(WM_MESSAGE * pMsg) { WM_HWIN hItem; int NCode; ... WM...

    自己生产的是不能直接用的哦 不能全面显示?怎么办?需要增加三句话。

    参考:https://tieba.baidu.com/p/4983616378?red_tag=1583126393&traceid=



    static void _cbDialog(WM_MESSAGE * pMsg) {
      WM_HWIN hItem;
      int     NCode;
      int     Id;
    
      WM_HWIN hDropd0;
      WM_HWIN hDropd1;
      WM_HWIN hDropd2;
    
    
      switch (pMsg->MsgId) {
      case WM_INIT_DIALOG:
    
        hItem = pMsg->hWin;
        FRAMEWIN_SetTextAlign(hItem, GUI_TA_HCENTER | GUI_TA_VCENTER);
        FRAMEWIN_SetFont(hItem, GUI_FONT_24_ASCII);
    
        hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_0);
        TEXT_SetFont(hItem,  &GBK_16m16);
        TEXT_SetText(hItem, "开门次数:");
    
    
        hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_1);
        TEXT_SetFont(hItem,  &GBK_16m16);
        TEXT_SetText(hItem, "刷卡次数:");
    
        hItem = WM_GetDialogItem(pMsg->hWin, ID_TEXT_2);
        TEXT_SetFont(hItem,  &GBK_16m16);
        TEXT_SetText(hItem, "刷卡周期:");
    
     
        hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_0);
        BUTTON_SetText(hItem, "确认");
        BUTTON_SetFont(hItem,  &GBK_16m16);
    
        hItem = WM_GetDialogItem(pMsg->hWin, ID_BUTTON_1);
        BUTTON_SetText(hItem, "返回");
        BUTTON_SetFont(hItem,  &GBK_16m16);
    
    
        hDropd0  = WM_GetDialogItem(pMsg->hWin, ID_DROPDOWN_0);
        hDropd1  = WM_GetDialogItem(pMsg->hWin, ID_DROPDOWN_1);
        hDropd2  = WM_GetDialogItem(pMsg->hWin, ID_DROPDOWN_2);
    
        DROPDOWN_AddString(hDropd0, "0");
        DROPDOWN_AddString(hDropd0, "100");
        DROPDOWN_AddString(hDropd0, "1000");
        DROPDOWN_AddString(hDropd1, "1000");
        DROPDOWN_AddString(hDropd1, "10000");
        DROPDOWN_AddString(hDropd1, "20000");
        DROPDOWN_AddString(hDropd1, "30000");
        DROPDOWN_AddString(hDropd1, "40000");
        DROPDOWN_AddString(hDropd2, "10");
        DROPDOWN_SetAutoScroll(hDropd0,1);
        DROPDOWN_SetListHeight(hDropd0,50);
        DROPDOWN_SetScrollbarWidth(hDropd0,16);
        DROPDOWN_SetAutoScroll(hDropd1,1);
        DROPDOWN_SetListHeight(hDropd1,100);
        DROPDOWN_SetScrollbarWidth(hDropd1,16);
        DROPDOWN_SetAutoScroll(hDropd2,1);
        DROPDOWN_SetListHeight(hDropd2,0);
        DROPDOWN_SetScrollbarWidth(hDropd2,16);
        break;

    展开全文
  • 下拉框dropdown

    2018-04-15 22:03:24
    container"],包裹所有用到的标签。...2、容器内有一个div [class="c-dropdown"]用来定义下下拉框的 宽度width:80px; 行内块元素display:inline-block; 相对位置position:relativ...

    点击前

    点击后,鼠标悬停

    制作思路:

    1、首先,在html中,有一个容器div [class="container"],包裹所有用到的标签。这个容器是鼠标点击用的。

    2、容器内有一个div [class="c-dropdown"]用来定义下下拉框的

           宽度width:80px;

           行内块元素display:inline-block;

           相对位置position:relative; (相对于自己原来的位置,也为 后代 定义了绝对位置的元素 提供对照的 父元素)

           (重要的是位置,如果需要上下定位,加margin-top定位,不改变元素大小。

               看它的父元素有没有定义text-align属性,有的话,和它设置margin-left也没啥关系微笑

         它同时需要一个用于做点击动作click触发的后代选择器的 class="js-dropdown"

         .on("click","选择器",fn)

    3、容器内有个input标签用来传值,隐藏的不显示,类型设置为type="hidden"。它相当于type="text" style="display:none"

         css中: 隐藏不占用空间:display:none;

                      隐藏占用空间:visibility:hidden;

         为标签定义一个name="参数名" , 它的value="参数"先不用定义,通过js修改,

          此时需要一个用于拿到值的class="js-dropdown__input"  这里通过点击 li 获取到值

         后台java可以拿到 参数名="参数"

    4.接下来需要一个span标签用来显示选定的值蓝色上箭头

       它表面上来看是充当按钮的角色,给它定义一个class="c-button" 清除一下默认的样式,边框

       它用来显示标签,需要以下个属性:

       display:inline-block; 将它定义为行内块元素,为了让它拥有高度。

       overflow:visible;  overflow 属性规定当内容溢出元素框时发生的事情。

                                    visible:内容不会被修剪,会呈现在元素框之外

       white-space:nowrap; 强制内容不换行

       要点击它出现下拉列表,这个span里的可以禁止选中文本(不禁止就把none改成text),为其增加属性:

       -ms-user-select:none; /*IE10*/

       -moz-user-select:none; /*火狐*/

       -webkit-user-select:none; /*webkit浏览器*/ /*Chrome Safari Opero Google 傲游3,猎豹浏览器,百度浏览器*/

       -khtml-user-select:none;/*早期浏览器*/ /*大部分不写?*/

        user-select:none;

     注:把最需要的写法写在最后,因为这是大趋势 ,最后一定会应用最后的最简单的写法,防止和前面写法展现效果和功能不同。

        前辈的讲解:

     http://www.zhangxinxu.com/wordpress/2010/09/%E9%9C%80%E8%AD%A6%E6%83%95css3%E5%B1%9E%E6%80%A7%E7%9A%84%E4%B9%A6%E5%86%99%E9%A1%BA%E5%BA%8F/

       ie6-9不支持该属性,支持标签属性 onselectstart="return false"

       或者写js   document.span.onselectstart=function(){return false};

       Opera12.5不支持该属性,支持私有的标签属性unselectable="on"

      于是,可以在 <span onselectstart="return false;"  unselectable="on" >  不清楚在禁用js后能不能完美退化。

       如果它在导航栏里,需要行内垂直居中 加属性 vertical-align:middle;

       文字的格式,有些标签在框架里或之前有设定,可以把之前继承的格式去掉,也可以继承。

        font:inherit; /*继承*/

        text-transform:none; /*控制文本大小写*/

        text-decoration:none; /*文本修饰*/

        text-align:center; /*文本居中*/

       还有一些其他,比如

       border:0; 清除下它的边框,方便接下来设置样式

       -webkit-appearance:none;   用来渲染样式,none去除系统默认appearance的样式,常用于IOS下移除原生样式。

       当鼠标悬停在其上:hover(如果它有:link和:visited,要放在这2个之后,没有就随意了)或:focus

       看是否需要加边框轮廓,不需要就写 outline:none;

       这里也需要加文本修饰,所以 text-decoration:none; 

       /*hover、active、focus这三个伪类必须是focus、hover、active的顺序

       在focus状态下,也需要触发hover和active

       触发active一定会先触发hover,所以active要放在hover后面

       hover、active、focus称为动态伪类,可应用于任何元素

       IE7不支持:focus,IE6只支持给<a>设置:hover和:active

       另外,这个span没有被禁用时,鼠标悬浮或点击的样式应该是手指样式

        .c-button:not(:disabled){

         cursor:pointer; }

        :disabled选择器匹配每个被禁用的元素

        :not(:displayed)匹配没有禁用的元素

       所以当这个按钮没被禁用时,鼠标悬浮就是手指向上箭头了。

    下面开始给它设置的样式 class="c-button--dropdown

    先设置下内容加padding加border的总大小,用了border-box属性,这样一个width就搞定了。

    box-sizing:border-box; /*接下来设置的width等于内容加padding加border,高度同*/

    width:80px;

    height:30px;

    padding:4px 39px 10px 11px; /*为了给箭头留出空间*/

    接下来设置字体

    color:#48A1FB;

    font-size:14px;

    设置背景和边框:

    background-color:#fff;

    border:1px solid #B7D4EC;

    border-radius:3px;

    如果鼠标悬浮背景有变化,可以设置过渡 从正常到:hover

    -webkit-transition:background-color .2s linear; /*过渡的属性是背景 时间是0.2秒 以相同速度开始至结束的过渡效果*/

    transition:background-color .2s linear;

    设置鼠标悬停状态显示,因为我设置的颜色前后相同,所以看不出变化。

    .c-button--dropdown:hover{

    background-color:#fff;

    }

    接下来把箭头做出来,用:after   (:after选择器在被选元素的内容后面插入内容。用content属性来指定要插入的内容。)

    .c-button--dropdown:after{

    content:""; /*因为做箭头,内容就是空了*/

    position:absolute; /*父元素设置了relative,所以它相对于父元素绝对定位*/

    top:6px;

    right:7px;

    /*制作箭头,将宽度和高度设置为0,边的长度就是等边三角形的底边长,哪个当底边,就给哪个边设置颜色*/

    width:0;

    height:0;

    border:6px solid transparent;

    border-bottom-color:#48A1FB; /*因为是上箭头,所以设置底边*/

    }

    5.需要一个列表ul 

      定义一个class="c-dropdown__list"的ul列表


    position: absolute;
    list-style: none;
    top: 125%;
    left: 0;
    width: 100%;
    margin: 5px 0 0 0;
    padding: 6px 0;
    text-align:center;
    opacity: 0;
    visibility: hidden;
    border-radius: 1px;
    background: #fff;
    -webkit-transition: opacity .25s linear, top .25s linear;
    transition: opacity .25s linear, top .25s linear;


    6.需要一个span制作列表上的箭头

    上代码

    html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="js/jquery2.2.2.min.js"></script>
        <link rel="stylesheet" href="./css/st.css">
    </head>
    <body>
    <div class="container">
        <div class="c-dropdown js-dropdown">
            <!--input是传值的,span才是显示在界面的-->
            <input type="hidden" name="province" class="js-dropdown__input">
            <span class="c-button c-button--dropdown js-dropdown__current">全国</span>
            <ul class="c-dropdown__list">
                <li class="c-dropdown__item" data-dropdown-value="quanguo">全国</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">北京</li>
                <li class="c-dropdown__item" data-dropdown-value="shanghai">上海</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">河南</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">新疆</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">西藏</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">内蒙古</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">黑龙江</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">全国</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">北京</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">上海</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">河南</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">新疆</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">西藏</li>
                <li class="c-dropdown__item" data-dropdown-value="beijing">内蒙古</li>
                <li class="c-dropdown__item" data-dropdown-value="heilongjiang">黑龙江</li>
            </ul>
            <span class="c-triangle"></span>
        </div>
    </div>
    <script src="js/in.js"></script>
    </body>
    </html>

    css 父元素放相对定位 子元素放绝对定位

    *{
        padding:0;
        margin:0;
        box-sizing:border-box;
    }
    **before, *:after{
        box-sizing:border-box;
    }
    html{
        -webkit-tap-highlight-color: transparent;
    }
    body {
        background: #D5E6F4;
        font-family: "Open Sans", "Arial", sans-serif;
        text-rendering: optimizeSpeed;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
    }
    /**
     * Component: Dropdown
     * --------------------------------------------------
     */
    .c-dropdown {
        width:80px;
        position: relative;
        display: inline-block;
        text-align: left;
        margin-top:22px;
    }
    .c-dropdown__list {
        margin: 5px 0 0 0;
        padding: 6px 0;
        list-style: none;
        position: absolute;
        top: 125%;
        left: 0;
        width: 100%;
        opacity: 0;
        visibility: hidden;
        border-radius: 1px;
        background: #fff;
        -webkit-transition: opacity .25s linear, top .25s linear;
        transition: opacity .25s linear, top .25s linear;
        text-align:center;
    }
    /*当下拉展开时,背景才是不透明的*/
    .c-dropdown.is-open .c-dropdown__list{
        width:82px;
        opacity: 1;
        visibility:visible;
        top:125%;
        position: absolute;
        z-index:-1;
        box-sizing:border-box;
        border:1px solid #B7D4EC;
    }
    /*三角形*/
    .c-triangle{
        opacity: 0;
        visibility: hidden;
    }
    .c-dropdown.is-open .c-triangle{
        opacity: 1;
        visibility:visible;
    }
    .c-triangle:after,.c-triangle:before {
        border: 12px solid transparent;
        border-bottom: 12px solid #fff;
        width: 0;
        height: 0;
        position: absolute;
        top: 20.5px;
        left:28px;
        content: ' ';
    }
    .c-triangle:before {
        border-bottom-color: #B7D4EC;
        top: 19px;
    }
    .c-dropdown__item {
        padding: 6px 12px;
        font-size: 14px;
        line-height: 20px;
        cursor: pointer;
        color: #000;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-transition: background-color .25s linear;
        transition: background-color .25s linear;
    }
    .c-dropdown__item:hover {
        background-color: #EBEEF3;
        color: #48A1FB;
    }
    /**
     * Component: Button
     * --------------------------------------------------
     */
    .c-button {
        -webkit-appearance: none;
        margin: 0;
        border: 0;
        overflow: visible;
        font: inherit;
        text-transform: none;
        display: inline-block;
        vertical-align: middle;
        text-decoration: none;
        text-align: center;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        white-space: nowrap;  /*强制span不换行*/
    }
    .c-button:hover, .c-button:focus {
        outline: none;
        text-decoration: none;
    }
    .c-button:not(:disabled) {
        cursor: pointer;
    }
    /**
     * Component: Button
     * Modifier: Dropdown
     * --------------------------------------------------
     */
    .c-button--dropdown {
        box-sizing:border-box;
        width:80px;
        max-width:100px;
        height:30px;
        padding: 4px 39px 10px 11px;
        background-color: #fff;
        color:#48A1FB;
        font-size: 14px;
        border-radius: 3px;
        border:1px solid #B7D4EC;
        -webkit-transition: background-color .2s linear;
        transition: background-color .2s linear;
    }
    .c-button--dropdown:hover {
        background-color: #fff;
    }
    /*箭头*/
    .c-button--dropdown:after {
        content: "";
        position: absolute;
        top: 6px;
        right: 7px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-bottom-color: #48A1FB;
    }

    js

    ;(function ($,window,document,undefined) {
       'use strict';
       //定义最外层容器
        var $container=$('div.container');
        /*click后的.ui.dropdown是它的命名空间,方便移除用的,".js-dropdown"是容器的后代,
          点击容器,在后代元素上执行函数。*/
        $container.on('click.ui.dropdown', '.js-dropdown',function (e) {
            //取消事件的默认动作
            e.preventDefault();
            //设置移除类,有则移除,没有就加上
            $(this).toggleClass('is-open');
        });
        //'.js-dropdown [data-dropdown-value]'用于过滤器的触发事件的选择器元素的后代
        $container.on('click.ui.dropdown', '.js-dropdown [data-dropdown-value]', function (e) {
            e.preventDefault();
            var $item= $(this);
            //遍历所有class=js-dropdown的父元素
            var $dropdown= $item.parents('.js-dropdown');
            //更新input的值为选中的li的值
            $dropdown.find('.js-dropdown__input').val($item.data('dropdown-value'));
            //更新span的值为选中li的值
            $dropdown.find('.js-dropdown__current').text($item.text());
        });
    
        $container.on('click.ui.dropdown',function (e) {
            var $target=$(e.target);
            if(!$target.parents().hasClass('js-dropdown')){
                $('.js-dropdown').removeClass('is-open');
            }
        });
    
    })(jQuery,window,document);

    展开全文
  • vue、Dropdown 下拉菜单、Dropdown属性、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性设计规则何时使用代码演示1.基本2.右键菜单 设计规则 向下弹出的列表。 何时使用 当页面上的操作命令过多时,用此组件可以...
  • JS组件:DropDown(下拉菜单)

    千次阅读 2018-03-16 15:29:05
    第一次写js组件`(∩_∩)′,有什么不对的请随便指点出来,单个下拉菜单组件单个下拉菜单效果图... dropDown = function(id,items,title){ var oDiv, oP, oUL, oLis, oA, oLi; oDiv = document.getElementById(...
  • 组件-Element— Dropdown( 下拉菜单)

    千次阅读 2019-07-04 14:29:09
    组件-Element— Dropdown( 下拉菜单) 组件— 下拉菜单 基础用法 <el-dropdown> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> <...
  • UGUI内核大探究(十三)Dropdown

    千次阅读 2016-09-18 09:07:29
    Dropdown(下拉框)可谓是UGUI的集大成者,在Unity Editor里新建一个Dropdown,会随之附赠Text(Label对象)、Image(Arrow对象)、ScrollRect(Template对象)、Toggle(Template\Viewport\Content\item)和...
  • Bootstrap 组件 - 下拉菜单(Dropdowns)

    千次阅读 2018-05-25 14:51:48
    标记(Markup) 需要使用.dropdown或者其它声明了 position: relative; 的元素来包容下拉触发器和下拉菜单。 &lt;div class="
  • Unity3D UGUI中的dropdown控件使用总结

    万次阅读 2018-06-05 13:31:14
    最近在做公司的项目时使用到了UGUI中的dropdown控件期间遇到了很多问题,在这里总结下。  首先dropdown是可以自动上下弹出的根据你放置的位置自动选择向上,还是向下弹出列表。 可以通过dropdown.addoptions(“放...
  • Unity3D UGUI下拉菜单/Dropdown组件用法、总结 Unity3D中UGUI实现下拉菜单 Chinar-本文提供全流程,中文翻译。 助力快速使用 UGUI 实现 下拉菜单 UGUI 最初是没有下拉菜单的组件的 动态添加监听事件 后来更新...
  • el-dropdown-menu slot="dropdown"&gt; &lt;el-dropdown-item @click.native="refresh"&gt;刷新当前&lt;/el-dropdown-item&gt; &lt;el-dropdown-item @click.native=...
  • 当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click、@change等事件,而el-dropdown-item的事件触发时,el-dropdown下拉框总是会收缩,很不合理。 <el-dropdown trigger="click" placement="left"&...
  • Bootstrap的下拉菜单dropdown

    千次阅读 2018-03-22 14:42:19
    .dropdown 类用来指定一个下拉菜单。我们可以使用一个按钮或链接来打开下拉菜单, 按钮或链接需要添加 .dropdown-toggle 和 data-toggle="dropdown" 属性。&lt;div class="container"&...
  • Dropdown 组件实现思路

    2019-06-11 19:22:52
    概述:Dropdown 下拉菜单与 Select 的区别在于它是包含了一部分操作,所以它的 Option 下拉项要对其进行支持。 publish:2019-03-31 自从我写了关于中后台系统组件的第一篇文章以来,已经三个月了。由于业务场景的...
  • 下拉框插件 dropdown.js介绍

    千次阅读 2018-06-07 10:51:25
    在项目中使用到了dropdown.js插件,把使用的方法以及注意点记录了下来。插件描述:Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持keyvalue搜索,有token和两种模式。地址:...
  • 使用vue element-ui 中的 导航 发现 el-dropdown-menu 绑定click事件不起作用 &lt;el-dropdown&gt; &lt;i class="el-icon-setting" style="margin-right: 15px"&gt;&lt;/...
  • Unity3D开发之遇上Dropdown

    千次阅读 2017-11-23 13:48:24
    unity应该是在5.0版本更新了新的UI组件,Dropdown。以前实现这个功能都需要自己来组装。现在集成化确实对开发者来说更快更方便。下面说下我在开发中遇到的跟Dropdown相关的问题。 unity的UGUI组件功能绑定更偏向于...
  • Unity3D UGUI下拉菜单/Dropdown每次点击都可用 Unity3D中UGUI实现下拉菜单 Chinar-本文提供全流程...右键层次列表→ UI → Dropdown 即可完成一个下拉菜单的创建 扩展 Dropdown 组件,开启被选择按钮,再次被点击仍然可
1 2 3 4 5 ... 20
收藏数 36,001
精华内容 14,400
关键字:

dropdown