专栏首页柠檬先生jquery mobile 移动web(3)

jquery mobile 移动web(3)

可折叠功能块。   div 元素的 data-role 属性设置为 collapsible   代码如下:

			    <div data-role="collapsible">
			          <h3>可折叠区域标题</h3>
			          <p>这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,
			                这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,
			                这是一个折叠区域的内容,这是一个折叠区域的内容,这是一个折叠区域的内容,</p>
			    </div>

创建手风琴效果。   在最外层的div元素定义 data-role 属性值为 collapsible-set

  Form表单。

	    1普通文本框。
  	      <label for="name">name:</label>
		      <input type="text" name="name" id="name" value="">
      2.密码文本框
		      <label for="password">passwored</label>
		      <input type="password" name="password" id="password" value="">
	    3.文本类型文
		      <label for="content">content:</label>
		      <textarea cols="40" rows="4" name="content" id="content"></textarea>
	    4.Number 类型
		      <label for="number">password</label>
		      <input type="number" name="number" id="number" value="">
	    5.tel 类型
		      <label for="tel">tel</label>
		      <input type="tel" name="telr" id="tel" value="">
	    6.email 类型
		      <label for="email">email</label>
		      <input type="email" name="email" id="email" value="">
	    7.URL类型
		      <label for="url">url</label>
		      <input type="url" name="url" id="url" value="">
	    8.search 类型
		      <label for="search">search</label>
		      <input type="search" name="search" id="search" value="">
	    9.Slider 类型
		       <label for="slider">slider</label>
    		      <input type="range" name="range" id="range" value="2" min="0" max="10">
    	  10.Toggle
    		      <div data-role="fieldcontain">
		            <label for="slider">toggle switches</label>
		            <select name="slider" id="slider" data-role="slider">
		                 <option value="off">关闭</option>
		                  <option value="on">开启</option>
		            </select>
		      </div>

单选按钮   把一组单选按钮放在 fieldset 元素内,同时定义legend 元素表示单选按钮组的名称。 设置fieldset 元素data-role 元素属性为 controlgroup   表示该元素是一组单选按钮。   代码如下:

		  <fieldset data-role="controlgroup">
		        <legend>请选择你的年龄范围:</legend>
		        <input type="radio" name="radio-1" id="radio-1" value="any" checked="checked">
		        <label for="radio-1">不限</label>
		        <input type="radio" name="radio-1" id="radio-2" value="16-22">
		        <label for="radio-2">16-22</label>
		        <input type="radio" name="radio-1" id="radio-3" value="22-30">
		        <label for="radio-3">22-30</label>
		  </fieldset>

复选框按钮   input元素的属性是checkbox 而不是radio.

	  <fieldset data-role="controlgroup">
	        <legend>点击全选:</legend>
	        <input type="checkbox" name="checkbox-1" id="checkbox-1"class="custom">
	        <label for="checkbox-1">全选</label>
	  </fieldset>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • NEC 框架规范 animation

    /* animation */ /* 淡入 */ .a-fadein{-webkit-animation-name:fadein;-moz-animation-...

    用户1197315
  • css3响应式布局设计——回顾

    响应式设计是在不同设备下分辨率不同显示的样式就不同。 media 属性用于为不同的媒体类型规定不同的样式。根绝浏览器的宽度和高度重新渲染页面。     语法:...

    用户1197315
  • 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype...

    用户1197315
  • struts

    客户端浏览器通过HTTP请求,访问控制器,然后控制器读取配置文件,然后执行服务器端跳转,执行相应的业务逻辑,然后,在调用模型层,取得的结果展示给jsp页面,最后...

    mySoul
  • 数据字典生成工具之旅(8):SQL查询表的约束默认值等信息

          上一篇代码生成工具里面已经用到了读取表结构的SQL,这篇将更加详细的介绍SQL SERVER常用的几张系统表和视图! 阅读目录 系统表视图介绍 实际...

    用户1168362
  • java之struts2的配置讲解(2) java之struts框架入门教程

    即从结构上可以看出,在HelloStruts项目中增加了config 文件夹(Source Folder) 及user.xml 文件

    Vincent-yuan
  • yii2种ajax提交数据时校验出问题

    记一次yii2种ajax提交数据时校验出问题,直接跳过addError,报错语不现实‘不存在!’

    botkenni
  • Spring Cloud 系列之熔断器 Hystrix

      Hystrix 是一个用于处理分布式系统的延迟和容错的开源库,在分布式系统里,许多依赖不可避免的会调用失败,比如超时、异常等,Hystrix 能够保证在一个...

    Demo_Null
  • linux服务器搭建之路7-通过rdesktop远程连接win10

    个人有两台电脑,一个win10,一个centos7,coding主要在centos7上,但是其他主要在win10上,刚开始用win10远程连接centos,但是...

    锦小年
  • struts2使用Convention Plugin在weblogic上以war包部署时,找不到Action的解决办法

    环境: struts 2.3.16.3 + Convention Plugin 2.3.16.3 实现零配置 现象:以文件夹方式部署在weblogic(10.3...

    菩提树下的杨过

扫码关注云+社区

领取腾讯云代金券