任务2-学习jQuery-Mobile中的页面结构课件.ppt

1、jQuery Mobile入门(2)上次课njQuery Mobile入门实例njQuery Mobile文字图片等njQuery Mobile内部和外部链接njQuery Mobile头部栏和尾部栏njQuery Mobile头部按钮本次课n对话框（打开与关闭）n头部栏（按钮与图标）n导航栏（列表）n尾部栏（按钮与表单）打开对话框关闭对话框头部栏 头部栏主题样式data-theme=a/b/c/d/e/f/g/h/i/jJM 内置的6种页面主题引入主题的方式：引入主题的方式：不同风格的工具栏头部栏后退按钮头部栏添加按钮n添加头部栏按钮，由于空间的限制，所有添加的按钮都是内联类型的按钮。按钮之

2、允许放置图标和文字。实例：用按钮来实现图片的浏览设定按钮位置n在头部栏，如果只防止一个按钮，不论放在标题的左侧还是右侧，其最终都显示在左侧。如果想改变位置，需要添加新的类别属性ui-btn-left和ui-btn-right。前者表示按钮在标题左侧，后者表示按钮在标题右侧。练习：实例：导航栏njQuery Mobile为导航栏提供了专门的组件，div标签data-role属性值设置为navbar，便会产生一个导航栏。每一个导航栏最多显示5个按钮，超出个数自动下一行。如果希望某个子类导航按钮为选中状态，只需要在按钮的元素中添加一个ui-btn-active类别属性即可。多于5个：n练习：实例：导

3、航栏链接添加导航栏图标n元素中添加data-icon属性。图标默认的位置在按钮链接文字的上面，更多的图标大家可以在DW中测试。设置导航栏图标的位置n图标默认在导航栏上面n如果需要调整，就添加data-iconpos属性。ndata-iconpos=top/right/bottom/left自定义图标n自定义图标需要自己编写CSS文件。新建css文件导航栏中引用books类别，并将data-icon属性值设置为custom.新建的CSS文件如下：课后练习尾部栏n尾部栏和头部栏的结构差不多，只是data-role属性值不同。n在尾部栏可以添加按钮和表单等。尾部栏添加按钮n向尾部栏添加按钮时，为了减

4、少各按钮的间距，通常需要在按钮的外围添加一个data-role属性值为controlgroup的容器，形成一个按钮组显示在尾部栏中。同时，在该容器添加一个data-type属性，属性值为horizontal。JM 的按钮1.inline按钮（多个按钮放置一行）按钮（多个按钮放置一行）Cancel Save2.分组按钮分组按钮 Yes No Maybe 尾部栏添加表单元素n在尾部栏可以添加等元素，为了确保表单元素在底部栏的正常显示，需要在底部栏容器中添加ui-bar类别，使新增加的表单元素间保持一定的间距。n将data-position属性值设置为inline，用于统一设定各表单元素的显示位置。