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 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

css3 zoom属性兼容ie的缩放

文本缩放,在之前我们使用过css3的transform中scale进行比例扩大或者缩放,但是这个属性兼容性差,在IE10一下基本就失效(蔫了),今天带来的zoo...

12240
来自专栏技术总结

Hybird App之选择器详解(一)

17450
来自专栏Scott_Mr 个人专栏

React Native 系列(九) -- Tab标签组件

48390
来自专栏谦谦君子修罗刀

react-navigation,刷新你的导航一、属性介绍二、案例

在2017年1月,新开源的react-navigation库备受瞩目。它有类似于原生版性能的体验效果,可能会成为未来RN导航组件中的主力军。该库包含三类组件: ...

2.2K90
来自专栏大数据钻研

HTML基础复习(一)

HTML:超文本标记语言(HyperText Markup Language),不是一种编程语言,是标记语言 HTML元素: <p>段落</p> HTML标签:...

45460
来自专栏林德熙的博客

win10 UWP 全屏 VB 全屏C++ 全屏

win10 可以全屏软件或窗口,窗口有一般、最小化、最大化。我们有新的API设置我们软件是全屏,是窗口。我们可以使用ApplicationView让我们软件全屏...

13110
来自专栏九彩拼盘的叨叨叨

Vue2 组件通信写法总结

子组件只接收在子组件定义的 props的值。通过 this.prop名称 获得父组件传数据。

6520
来自专栏每日一篇技术文章

weex-16-image组件

DE2586BB-4A0A-4904-AA87-EF44A8A5BC74.png

10210
来自专栏python学习之旅

Python+Selenium笔记(六):元素定位

(一)  前言 Web应用以及包含超文本标记语言(HTML)、层叠样式表(CSS)、JS脚本的WEB页面,基于用户的操作(例如点击提交按钮),浏览器向WEB服务...

51480
来自专栏无所事事者爱嘲笑

react-navigation 中的多tabs嵌套时内部tabs无法正常切换问题

29950

扫码关注云+社区

领取腾讯云代金券