所谓的 Ajax 拖拉 UI,就是直接用鼠标进行拖拉排序,这种方式对用户来说操作速度更快. 拖拉的 UI 需要额外的前端套件,这里介绍 jQuery UI 的 Sortable Plugin,并直接使用 jquery-ui-rails 这个 gem 来安装 编辑 Gemfile Gemfile + gem 'jquery-ui-rails' 编辑 app/assets/javascripts/admin.js app/assets/javascripts/admin.js //= require…

UWP学习记录11-设计和UI 1.输入和设备 通用 Windows 平台 (UWP) 中的用户交互组合了输入和输出源(例如鼠标.键盘.笔.触摸.触摸板.语音.Cortana.控制器.手势.注视等)以及支持扩展体验(包括鼠标滚轮和按钮.笔橡皮擦.筒状按钮.触摸键盘和后台应用服务)的各种模式或修饰符. 具体各种输入的详细处理方法,以后用到的时候再深入. 通用 Windows 平台 (UWP) 应用也支持很多种设备,了解支持的设备将帮助你提供每个外形规格的最佳用户体验. 针对特定设备进行设计时,主要…

UWP学习记录10-设计和UI之控件和模式7 1.导航控件 Hub,中心控件,利用它你可以将应用内容整理到不同但又相关的区域或类别中. 中心的各个区域可按首选顺序遍历,并且可用作更具体体验的起始点. 中心的内容可以显示在全景视图中,这样用户一眼就能看见新增内容.可用功能和相关信息. 中心通常具有一个页标题,每个内容部分各有一个部分标题. Pivot,透视表控件,用于导航经常访问的不同内容类别. 透视表允许在两个或多个内容窗格之间进行导航,并且依靠文本标题来表明内容的不同部分. SemanticZ…

UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象,例如椭圆.矩形.直线.贝塞尔曲线等,Path 是最通用的 Shape,因为使用它可以定义任意几何图形.图形这块,是和wpf一样的. 2.布局控件 布局控件这块,大体上也是和wpf一样的.布局控件包含边框(Border).画布(Canvas).网格(Grid).RelativePanel.Stack…

UWP学习记录8-设计和UI之控件和模式5 1.日历.日期和时间控件 日期和时间控件提供了标准的本地化方法,可供用户在应用中查看并设置日期和时间值. 有四个日期和时间控件可供选择,选择的依据如下: 日历日期选取器是一个下拉式控件,该控件已针对从日历视图中选取某个日期进行了优化,尤其是能够显示诸如星期几或丰富的日历信息等上下文信息. 可以修改日历以提供其他上下文或限制可用日期. 日历视图让用户查看可按月份.年份或十年期浏览的日历,并与之交互. 用户可选择单个日期或一组日期. 它没有选取器图面,并且…

UWP学习记录7-设计和UI之控件和模式4 1.翻转视图 使用翻转视图浏览集合中的图像或其他项目(例如相册中的照片或产品详细信息页中的项目),一次显示一个项目. 对于触摸设备,轻扫某个项将在整个集合中进行浏览. 对于鼠标,导航按钮显示在鼠标悬停位置上. 对于键盘,使用箭头键移动浏览该集合. 翻转视图最适合浏览小到中型集合中的图像(最多 25 个项目左右). 此类集合的示例包括产品详细信息页中的项目或相册中的照片. 虽然微软不建议将翻转视图用于大多数大型集合,但是该控件通用于查看相册中的个别图像.…

UWP学习记录6-设计和UI之控件和模式3 1.按钮 按钮,响应用户输入和引发 Click 事件的控件. 使用<Button>就能创建一个按钮控件了.按钮是 ContentControl,它的 XAML 内容属性为 Content.可以将任何对象设置为按钮的内容. 如果内容是一个 UIElement,则会在按钮中呈现它. 如果该内容是另一种类型的对象,则会在按钮中显示其字符串表示形式. RepeatButton 是一个从按下到释放为止重复引发 Click 事件的按钮. 设置 Delay 属性来…

UWP学习记录5-设计和UI之控件和模式2 1.应用栏和命令栏 CommandBar 控件是一款通用.灵活.轻型的控件,可显示复杂内容(如图像或文本块)以及简单的命令(如 AppBarButton.AppBarToggleButton 和 AppBarSeparator 控件).XAML 提供 AppBar 控件和 CommandBar 控件.对于 Windows 10 中的新应用,微软建议改用 CommandBar 控件. 命令栏分为 4 个主要区域: “查看更多”[•••] 按钮显示在该栏的…

UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用,范围从简单按钮到网格视图之类的功能强大的数据控件. 模式是合并多个控件来创造新内容的一种方式. 应用添加控件实现UI,主要是三个步骤: A.将控件添加到你的应用 UI. B.设置控件的属性,如宽度.高度或前景色. C.将代码添加到控件的事件处理程序,从而使其执行一些任务. 添加应用一般通过: A.1…

UWP学习记录3-设计和UI之样式 1.颜色 在系统的“设置”>“个性化”>“颜色”里,提供了主题色选择.选定主题色后,会根据颜色亮度的 HSB 值创建浅色和深色的主题色. 应用可使用阴影变量创建可视化层次结构和提供交互指示.在 XAML 中,主要主题色显示为名为 SystemAccentColor 的主题资源. 这些色调可用作 SystemAccentColorLight3.SystemAccentColorLight2.SystemAccentColorLight1.SystemAccen…