UI培训之Jquery Mobile 学习笔记(三)

Date 2024-08-08 15:36:18

  5、页面之间的过渡效果: data-transition

  data-direction="reverse" 反转过渡效果

  对话框

  

   删除此项

  打电话

   免费给我们打电话!

  视频和VoIP呼叫

   用 Facetime 呼叫我

  发消息

  

  带文字的短消息

  

  发邮件

  

  工具栏定位

  固定

  data-position="fixed"

  全屏

  只需在工具栏上定义即可 data-position="fixed" 并在当前页面上( data-role 属性值为 page 定义元素) data-fullscreen="true" 。

  真实固定

  $.mobile.touchOverflowEnabled = true;

  强制指定按钮的位置

  可以使用 CSS 类:

  class="ui-btn-right"或 class="ui-btn-left" 。

  按钮图标设置

data-icon="gear"

  导航菜单:

  

 

  

 

  

 

  

 

  

 

  

 

  

  以导航栏为例 Web 主导航应用程序时,最好将主页作为第一个元素

  与此同时,最好是第一个 a 元素上加上 class="ui-btn-active" 为了将其标记为已选择的选择

  可折叠内容

  data-role='collapsible'

  data-collapsed="false" 默认折叠:否

  可以使用 data-theme 改变这个可折叠面板的颜色样本。还可以指定额外的 data-content-theme 属性只影响内容

  手风琴效果

  一 个 带 有 data-role="collapsible-set" 容器和一组可折叠面板作为子元素,一次只能看到一个面板

  

 

  

 

  

凌晨时分

 

  

 

  凌晨时分

  

  

  

//可折叠内容

  

告诉记者

//必须有标题

 

  

 

  1月5日晚上

  

  

  

课程推荐
— Course recommendation —
【红喵设计教育】ps教程-ps零基础课程

红喵设计

【红喵设计教育】C4D基础-C4D软件制作教程

红喵设计

【红喵设计教育】包装设计-免费/PS/AI/CDR/平面设计

红喵设计

【红喵设计教育】版式设计-版式的思路PS/AI/CDR/平面设计/排版技巧

红喵设计

【红喵设计教育】ps基础-ps基础入门教程

红喵设计

【红喵设计教育】CDR基础-CDR零基础入门教程

红喵设计

【红喵设计教育】海报基础-PS合成海报设计教程

红喵设计

【野马设计教育】AI基础-AI软件零基础到精通

红喵设计