jQuery mobile 移动web(4)

移动互联网的发展,促生了各种各样的移动Web框架。jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可。

下拉菜单:

  设置label 元素的for 属性为 select label 元素的文本内容作为选项的名称 定义div元素并设置data-role 属性值为 fieldcontain.

   <div data-role="controlgroup">
    <label for="select" class="select">请选择你的兴趣</label>
    <select name="select" id="select">
      <option>音乐</option>
      <option>电影</option>
      <option>体育</option>
      <option>旅游</option>
    </select>
   </div>

分组的选择菜单

  要在select 元素制定optgroup。  

<div data-role="controlgroup">
      <label for="select">请选择你的兴趣:</label>
      <select name="select" id="select" data-native-menu="true">
        <optgroup label="娱乐类"/>
        <option>音乐</option>
        <option>电影</option>
        <optgroup label="文体累"/>
        <option>体育</option>
        <option>旅游</option>
      </select>
     </div>

禁用指定Option 数据项的选择菜单

    <div data-role="controlgroup">
      <label for="select">请选择你的兴趣:</label>
      <select name="select" id="select" data-native-menu="true">
        <optgroup label="娱乐类"/>
        <option disabled="">音乐</option>
        <option>电影</option>
        <optgroup label="文体累"/>
        <option>体育</option>
        <option>旅游</option>
      </select>
   </div>

普通连接列表  

<div data-role="page">
      <header data-role="header">
        <h1>列表例</h1>
      </header>
      <div data-role="content">
        <ul data-role="listview" data-theme="g">
          <li><a href="#">List 1</a></li>
          <li><a href="#">List 2</a></li>
          <li><a href="#">List 3</a></li>
          <li><a href="#">List 4</a></li>
        </ul>
      </div>
   </div>

多层次嵌套列表。

  

<div data-role="page">
    <header data-role="header">
      <h1>列表例</h1>
    </header>
    <div data-role="content">
      <ul data-role="listview" data-theme="g">
        <li>
          <a href="#" data-add-back-btn="true">List 1</a>
          <p >这是第一层</p>
          <ul>
            <li>
              <a>subList 1 of 1</a>
              <a>subList 1 of 2</a>
              <a>subList 1 of 3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#" data-add-back-btn="true">List 2</a>
          <p >这是第二层</p>
          <ul>
            <li>
              <a>subList 2 of 1</a>
              <a>subList 2 of 2</a>
              <a>subList 2 of 3</a>
            </li>
          </ul>
        </li>
      <li>
        <a href="#" data-add-back-btn="true">List 3</a>
        <p >这是第三层</p>
        <ul>
          <li>
            <a>subList 3 of 1</a>
            <a>subList 3 of 2</a>
            <a>subList 3 of 3</a>
          </li>
        </ul>
    </li>
  </ul>
  </div>
   </div>

以上内容是小编给大家分享的jQuery mobile 移动web(4)的相关知识,希望大家喜欢。

(0)

相关推荐

  • 更靠谱的H5横竖屏检测方法(js代码)

    前不久,做了一个H5项目,需要在横竖屏变化时,做一些处理.毫无疑问,需要使用orientationchange来监听横竖屏的变化. 方案一: // 监听 orientation changes window.addEventListener("orientationchange", function(event) { // 根据event.orientation|screen.orientation.angle等于0|180.90|-90度来判断横竖屏 }, false); 代码添加上

  • JS检测移动端横竖屏的代码

    使用media来判断屏幕宽度遇到的问题: ios上当我旋转屏幕的时候可行,但是安卓机上没反应,横屏显示的还是我竖屏的样式. 查了一下资料,css3的media如果要在移动端有较好的显示效果,需要在页头加上这段代码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 可是这段代码我不能用.因为我

  • Android实现横竖屏切换的实例代码

    这几年一直在做手机上和电视盒的App,几乎没有考虑过横竖屏切换的问题.电视盒好说,横屏不变,你要是给它设计个竖屏人家也没机会使:而手机上的应用就不好说了,有些界面你设计了横竖屏兼容可能是为了表示你的功能强大.但是按照惯例,或许也是设计师图省事,我们只是做一个方案.就像目前主流的App都只有竖屏一个模式,比如微信.京东和招商银行.我截了几张图表示一下. 但是像地图之类的应用,也许横屏会显示的更友好一些.请看腾讯地图的设计如下: 细心的你会发现,地图的横竖屏的样式几乎是一样的布局,调整起来还是比较容

  • jQuery mobile 移动web(6)

    jquery mobile 针对移动端设备的事件类型. 1.touch 事件. tap 快速触摸屏幕并且离开,类似一种完整的点击操作.   taphold 触摸屏幕并保持一段时间.   swipe 在1秒内水平移动30px屏幕像素上时触发.   swipeleft 向左侧滑动   swiperight 像右侧滑动. 2.方向改变事件 orientationchange 事件函数当移动设备的方向发生改变触发,在事件的回调函数内的第二个参数返回一个用于识别当前方向的参数,   该参数有两种返回值:p

  • 解决Android手机屏幕横竖屏切换

    Android中当屏幕横竖屏切换时,Activity的生命周期是重新加载(说明当前的Activity给销毁了,但又重新执行加载), 怎么使屏幕横竖屏切换时,当前的Activity不销毁呢? 1. 在AndroidManifest.xml中为Activity设置configChanges属性, application android:icon="@drawable/icon" android:label="@string/app_name"> <activ

  • javascript检测移动设备横竖屏

    如何判断 移动设备提供了两个对象,一个属性,一个事件: (1)window.orientation   属于window对象上一个属性:共有三个值 :0为竖屏模式(portrait),90为向左反转变为横屏模式(landscape),-90为向右反转变为横屏模式(landscape),最后180就是设备上下互换还是竖屏模式. (2)orientationchange     是一个event,在设备旋转时,会触发此事件,如同PC上使用的resize事件. 这两个搭配起来使用,很容易就能获得设备的

  • Mobile Web开发基础之四--处理手机设备的横竖屏问题

    为了应对移动设备屏幕的碎片化,我们在开发Mobile Web应用时,一个最佳实践就是采用流式布局,保证最大可能地利用有限的屏幕空间.由于屏幕存在着方向性,用户在切换了屏幕的方向后,有些设计上或实现上的问题就会凸显--我们至少需要处理一下当前显示元素的宽度的适配(当然,要做的可能不仅仅是这个).很多时候,我们需要为不同的屏幕方向来设计对应的应用显示模式,这个时候,实时地获知设备的模竖屏状态就显得极为重要. window.orientation属性与onorientationchange事件 win

  • 使用jQuery Mobile框架开发移动端Web App的入门教程

    一.jQuery Mobile 的渐进增强设计与浏览器支持 根据维基百科( Wikipedia ) 的解释,渐进增强的设计主要包括以下几点 basic content should be accessible to all web browsers (所有浏览器都应能访问全部基础的内容) basic functionality should be accessible to all web browsers (所有浏览器都应能访问全部基础的功能) sparse, semantic markup

  • jQuery mobile 移动web(4)

    移动互联网的发展,促生了各种各样的移动Web框架.jQuery Mobile 是一个针对触摸体验的 web UI 开发框架,很容易就可以把 Web App 包装成适合 Android 与 iOS等触屏移动设备的 Javascript 库,与 HTML5结合可以很方便快速的开发出一款具有良好界面及用户体验的 Web App,而且不需要安装任何东西,只需将需要的 *.js 和 *.css 文件直接包含到 web 页面中即可. 下拉菜单: 设置label 元素的for 属性为 select lab

  • jquery mobile 移动web(5)

    有序列表 <div data-role="content"> <ol data-role="listview" data-theme="g"> <li><a href="#"> List 1</a></li> <li><a href="#"> List 2</a></li> <li&

  • jQuery Mobile页面跳转后未加载外部JS原因分析及解决

    在使用jQuery Mobile进行Web开发中,当页面跳转时(pageA => pageB),在pageB中引用的JS并未成功运行.因为,JQM并为将整个页面加载到当前的dom中,仅将data-role="page"元素加入当前的dom中. 因此,在<head>中引入的外部JS文件,以及<page>标签外的JS均不能正常运行,刷新页面后方可加载成功. 鉴于JQM这个特性不太可能主动更改,可以用两种方法来解决:一是在index页面中,注册所有需要使用到的外

  • jquery.mobile 共同布局遇到的问题小结

    最近项目用上了jquery.mobile这货,在手机上做点简单的显示.之前只知道有这个框架,没把玩过. 特别是事件绑定方面,相比桌面系统下浏览器用着各种不爽,不得要领. 如下图,在做后台系统时,一般左侧都是一个个模块及下属菜单项,可展开折叠. 我的问题卡在了累计评价这块,为了页面复用,累计评价中嵌套了iframe做评论显示. 第一槛 有过移动WEB开发的同学应该知道,IOS浏览器下iframe中内容过多时,滚动条时不会出现的,内容好像被截断了. 查资料最终搞定,手机屏毕竟小,评论多的时候不可能像

  • jQuery Mobile框架中的表单组件基础使用教程

    一.表单组件基础 1.组件简介 jQuery Mobile 中的表单组件是基于标准 HTML ,然后在此基础上增强样式,因此即使浏览器不支持 jQuery Mobile 表单仍可正常使用.需要注意的是, jQuery Mobile 会把表单元素增强为触摸设备很容易使用的形式,因此对于 iphone/ipad 与 Android 使用 Web 表单将会变得非常方便. jQuery Mobile 的表单组件有以下几种: (1)文本输入框, type="text" 标记的 input 元素会

  • jQuery Mobile开发中日期插件Mobiscroll使用说明

    近期在移动方面的开发,使用jQuery Mobile ,移动方面的插件不如Web 方面的插件多,选择的更少,有一些需要自己去封装,但功力尚不足啊. 日期插件JQM也提供了内置的,但样式方面不好看,只好百度.Google啦,找到了两款 jquery-mobile-datebox 和 mobiscroll-2.3 jqueryMobileDatebox 这个在板上的表现不好,性能方面有点卡 mobiscroll 性能方面比前者要好一些,效果更简洁 ,划动更流畅 放在一起对比下 各位看官,你们觉得哪个

  • jQuery Mobile中的button按钮组件基础使用教程

    一.Button 组件及 jQuery Mobile 如何丰富组件样式 在 jQuery Mobile 里,可以通过给任意链接添加 data-role="button" 来产生一个 button 组件,jQuery Mobile 会追加一定的样式到链接,值得注意的是,jQuery Mobile 在给组件元素追加样式时不一定只在原有的元素上添加 CSS 和 Javascript 响应,一般还会追加一些新的元素使到组件的样式更接近于原生的 App 组件样式.下面给出一个例子: 这是一个添加

  • jQuery mobile的header和footer在点击屏幕的时候消失的解决办法

    jQuery Mobile简介 jQuery Mobile 是创建移动 web 应用程序的框架. jQuery Mobile 适用于所有流行的智能手机和平板电脑. jQuery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局. 给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div data-role="footer&q

随机推荐