GVKun编程网logo

dropdown css菜单从ltr转换为rtl（cssrem转换工具）

13

在这篇文章中，我们将带领您了解dropdowncss菜单从ltr转换为rtl的全貌，包括cssrem转换工具的相关情况。同时，我们还将为您介绍有关asp.netmvc下拉框Html.DropDownL

在这篇文章中，我们将带领您了解dropdown css菜单从ltr转换为rtl的全貌，包括cssrem转换工具的相关情况。同时，我们还将为您介绍有关asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法、asp.net-mvc – 将HTML.EditorFor转换为下拉列表(html.dropdownfor？)、Bootstrap CSS组件之下拉菜单(dropdown)、Bootstrap 下拉菜单.dropdown的具体使用方法的知识，以帮助您更好地理解这个主题。

本文目录一览：

dropdown css菜单从ltr转换为rtl（cssrem转换工具）

我有一个菜单是ltr：

我转换为rtl：

现在,我希望这个下拉按钮出现在链接“PRODUCT”之前,并且出现2号码框,我在那里制作了一个绿色框.

解决方法

这是菜单的rtl风格 – https://jsfiddle.net/afelixj/m5sn8voj/2/

您可以使用在线提供的rtl转换工具 – https://cssjanus.github.io/.粘贴css,您将立即获得从右到左的CSS.

asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法

asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法

一、非强类型：

Controller:
ViewData["AreId"] = from a in rp.GetArea()
                               select new SelectListItem {
                               Text=a.AreaName,
                               Value=a.AreaId.ToString()
                               };
View:
@Html.DropDownList("AreId")

还可以给其加上一个默认选项：@Html.DropDownList("AreId", "请选择");

二、强类型：

DropDownListFor常用的是两个参数的重载，第一参数是生成的select的名称，第二个参数是数据，用于将绑定数据源至DropDownListFor

Modle:

   public class SettingsViewModel
   {
       Repository rp =new Repository();
       public string ListName { get; set; } 
       public  IEnumerable<SelectListItem> GetSelectList()
       {
               var selectList = rp.GetArea().Select(a => new SelectListItem {
                               Text=a.AreaName,
                               Value=a.AreaId.ToString()
                               });
               return selectList;
           }
       }

Controller:
       public ActionResult Index()
       {
           return View(new SettingsViewModel());
       }

View:
@model Mvc３Applicationtest2.Models.SettingsViewModel
@Html.DropDownListFor(m=>m.ListName,Model.GetSelectList(),"请选择")

您可能感兴趣的文章:
  • ASP.NET MVC实现多选下拉框
  • 详解ASP.NET MVC 下拉框的传值的两种方式
  • ASP .NET 可编辑输入自动匹配的下拉框
  • 详解ASP.NET MVC之下拉框绑定四种方式
  • ASP.NET MVC下拉框联动实例解析
  • ASP.NET中DropDownList下拉框列表控件绑定数据的4种方法
  • ASP.NET实现级联下拉框效果实例讲解
  • ASP.NET多彩下拉框开发实例
  • asp.net中js+jquery添加下拉框值和后台获取示例
  • asp.net 实现下拉框只读功能
  • ASP.NET MVC下拉框中显示枚举项

asp.net-mvc – 将HTML.EditorFor转换为下拉列表(html.dropdownfor？)

asp.net-mvc – 将HTML.EditorFor转换为下拉列表(html.dropdownfor？)

目前我正在使用一个 Html.EditorFor控件在默认的“创建”视图页面这样. 
<%: Html.EditorFor(model => model.IsActive) %>

我想使用值将其转换为下拉列表,并且仍然绑定到视图中的模型.我的问题是两倍.

>如果在下拉菜单中只需要2/3的值.它有一个快速的方式显式地填充2或3个值？
>如果列表很大,需要来自一个SQL查询,该怎么做？

先谢谢您的帮助.

解决方法

为了生成一个下拉列表,您需要在视图模型上使用2个属性：将所选值绑定的标量属性和将包含要显示在下拉列表中的项的集合属性.

所以你可以定义一个视图模型：

public class dropdownlistviewModel
{
    public string SelectedValue { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

然后在您的主视图模型上具有此类型的属性：

public dropdownlistviewModel Foo { get; set; }

现在你可以有一个这种类型的自定义编辑器模板(〜/ Views / Shared / EditorTemplates / dropdownlistviewModel.ascx)：

<%@ Control 
    Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dropdownlistviewModel>" 
%>
<%= Html.DropDownListFor(x => x.SelectedValue,Model.Items) %>

然后在你的主视图中：

<%= Html.EditorFor(x => x.Foo) %>

现在剩下的就是让你的控制器动作渲染主视图来填充Foo属性和相应的值.可以硬编码,来自存储库或任何.没关系.

另一方面,如果您事先知道这些值,您可以在编辑器模板(〜/ Views / Shared / EditorTemplates / YesNoDropDown.ascx)中进行硬编码：

<%= Html.DropDownList(
    "",new SelectList(
        new[] 
        { 
            new { Value = "true",Text = "Yes" },new { Value = "false",Text = "No" },},"Value","Text",Model
    )
) %>

接着：

<%= Html.EditorFor(x => x.IsActive,"YesNoDropDown") %>

或者通过在您的视图模型上装饰IsActive属性：

[UIHint("YesNoDropDown")]
public bool IsActive { get; set; }

接着：

<%= Html.EditorFor(x => x.IsActive) %>

Bootstrap CSS组件之下拉菜单(dropdown)

Bootstrap CSS组件之下拉菜单(dropdown)

Bootstrap下拉菜单，常用在开发项目中，今天为大家介绍介绍

dropdown、dropdown-menu、dropdown-header、divider、dropdown-submenu 例子见下拉菜单.html

<div>
<prehttps://www.jb51.cc/tag/rush/" target="_blank">rush:css;">
//源码
.dropup,.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-Box;
background-clip: padding-Box;
border: 1px solid #ccc;
border: 1px solid rgba(0,.15);
border-radius: 4px;
-webkit-Box-shadow: 0 6px 12px rgba(0,.175);
Box-shadow: 0 6px 12px rgba(0,.175);
}
.dropdown-menu.pull-right {
right: 0;
left: auto;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #777;
white-space: Nowrap;
}

Bootstrap 下拉菜单.dropdown的具体使用方法

Bootstrap 下拉菜单.dropdown的具体使用方法

本章将具体讲解下拉菜单的交互。使用下拉菜单（Dropdown）插件，您可以向任何组件（比如导航栏、标签页、胶囊式导航菜单、按钮等）添加下拉菜单。

下拉菜单.dropdown具体用法

.dropdown <下拉菜单触发器button+下拉菜单ul>

.dropdown　包裹层

.dropdown-toggle 下拉菜单触发器

data-toggle="dropdown  自定义属性 可以与js关联起来

.dropdown-menu  下拉菜单

具体实例：

<div>
 <buttontype="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  Dropdown
  <span></span>
 </button>
 <ularia-labelledby="dropdownMenu1">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
  <li role="separator"></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
 </ul>
</div>

如果你想让菜单默认是打开状态，需要添加一个.open的类

<div>
 <buttontype="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
  Dropdown
  <span></span>
 </button>
 <ularia-labelledby="dropdownMenu1">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
  <li role="separator"></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
 </ul>
</div>

.dropup   向上弹出菜单

通过为下拉菜单的父元素设置 .dropup 类，可以让菜单向上弹出（默认是向下弹出的）

<div>
 <buttontype="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropup
  <span></span>
 </button>
 <ularia-labelledby="dropdownMenu2">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
  <li role="separator"></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
 </ul>
</div>

1、对齐方式：默认左对齐

右对齐：给.dropdown-menu添加.dropdown-menu-right类就可以

注意：它是以父级的位置来对齐的

怎么样让下拉菜单以下拉菜单触发器的右端对齐呢？那就需要给下拉菜单触发器button添加一个.btn block的类

<div>
 <buttontype="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
  Dropup
  <span></span>
 </button>
 <ularia-labelledby="dropdownMenu2">
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another action</a></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Something else here</a></li>
  <li role="separator"></li>
  <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li>
 </ul>
</div>

2、下拉菜单的标题     dropdown-header

在任何下拉菜单中均可通过添加标题来标明一组动作。

如果想让下拉菜单的标题居中，就需要添加一个.text-center的类

<ularia-labelledby="dropdownMenu3">
 ...
 <li>Dropdown header</li>
 ...
</ul>

3、分割线：     .divider　

为下拉菜单添加一条分割线，用于将多个链接分组。

<ularia-labelledby="dropdownMenuDivider">
 ...
 <li role="separator"></li>
 ...
</ul>

4、禁用菜单：disabled

为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

<ularia-labelledby="dropdownMenu4">
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Regular link</a></li>
 <lihttps://www.jb51.cc/tag/dis/" target="_blank">disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >disabled link</a></li>
 <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Another link</a></li>
</ul>

注意：

aria-haspopup="true" 　aria-expanded="true"  为需要借助屏幕阅读器的特殊人群设置的

id="dropdownMenu1"　aria-labelledby="dropdownMenu1"   通过id将触发器和下拉菜单关联起来

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

我们今天的关于dropdown css菜单从ltr转换为rtl和cssrem转换工具的分享已经告一段落，感谢您的关注，如果您想了解更多关于asp.net mvc下拉框Html.DropDownList 和DropDownListFor的常用方法、asp.net-mvc – 将HTML.EditorFor转换为下拉列表(html.dropdownfor？)、Bootstrap CSS组件之下拉菜单(dropdown)、Bootstrap 下拉菜单.dropdown的具体使用方法的相关信息，请在本站查询。

本文标签：

上一篇css – 粘滞式导航栏在向下滚动时创建右边距（css导航栏固定）

下一篇css – font-awesome垂直对齐问题（css 文字垂直对齐）

相关文章