（四）Jquery Mobile表单

Jquery Mobile表单与列表
一、JM表单
      1、表单
      普通html表单
      
      效果：
      
  
 2、只能输入数字的表单
     
      效果：
      
        说明：label中的for="number-pattern" 就是说，当我们点击label是就会获取到id="number-pattern"的焦点，也就是下面input框的焦点。
3、文件文本框
      
      效果：
      
4、密码文本框
      aotocomplete="off"是记录之前输入过的文本，为off就是不保存
      
      效果：
      
5、在输入框中显示提示信息
      palceholder="请输入您要搜索的内容" 提示信息展示
      
     效果：
      
      当然，我们也可以设置input框为disabled状态
6、fieldcontain使用
     需要将很多input框和按钮放在一起使用
     
      效果：
      
7、select选择框
     
      效果：
      
8、textarea多行
      
      效果：
     
9、搜索框
     
     效果：
     
10、滑块
    普通滑块  
     效果：     
     
     填充滑块
     
      效果：
      
11、组滑块

      效果：
      
12、翻转开关
      
      效果：
     
13、checkbox复选框
      
      效果：
      
14、单选框
      
      效果：
      
15、非原生的下拉select
      添加data-native-menu="false" 将原生的禁用掉
      效果：
      
16、可复选的select
       
      效果：
      

来自为知笔记(Wiz)

时间： 2024-10-03 23:29:22

（四）Jquery Mobile表单的相关文章

通过AJAX和PHP，提交JQuery Mobile表单

通过AJAX和PHP,提交JQuery Mobile表单   File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo("First Name: " . $firstName . " Last Name: " . $lastName); ?> File name: index.php <!DOCTYPE html&

jquery mobile 表单提交 图片/文件 上传

jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1  html代码 <!doctype html><html><head>    <meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8&qu

第一百六十八节，jQuery，表单选择器

jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也可以使用 jQuery 为表单专门提供的选择器和过滤器来 准确的定位表单元素. 一．常规选择器 我们可以使用 id.类(class)和元素名来获取表单字段,如果是表单元素,都必须含有 name 属性,还可以结合属性选择器来精确定位. $('input').val(); //元素名定位,默认获取第一个

基于JQuery实现表单元素值的回写

form.jsp: <%@ page language="java" import="java.util.*" pageEncoding="GB2312"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html &

jquery实现表单验证简单实例演示

/* 描述:基于jquery的表单验证插件. */ (function ($) { $.fn.checkForm = function (options) { var root = this; //将当前应用对象存入root var isok = false; //控制表单提交的开关 var pwd1; //密码存储 var defaults = { //图片路径 img_error: "img/error.gif", img_success: "img/success.gi

Jquery 将表单序列化为Json对象

使用下面代码时注意不要忘记引入jquery文件,以下代码可以复制到html文件中执行可看到效果,非常方便好用.附代码: <!DOCTYPE html> <html> <head> <title></title> <script src="jquery-2.0.3.min.js"> </script> </head> <body> <form id="myForm&

Jquery form表单提交

起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器的兼容性的. 1.序列化form,通过Ajax提交 $.ajax({ cache: false, type: "POST", url: "readImage.do", data: $('#ff').serialize(), //序列化表单数据 async: true,

jquery验证表单 提交表单

问题: jquery中使用submit提交按钮时,当return false后,依然会提交表单. 解决: 使用button按钮,而不是submit按钮 <script type="text/javascript" src="scripts/jquery-2.0.2.js"></script> <script type="text/javascript"> function check(){ var npassw

jQuery序列化表单时将制定元素排除在外

jQuery序列化表单时将制定元素排除在外:大家知道使用serialize()函数可以序列化一个表单,但是可能在实际应用中,需要将制定的表单元素排除在外,下面就通过实例代码演示一下如何实现此效果,代码实例如下: $("form[name='theform']").not($("input[type='hidden']")).not($("input[class='txt']")).serialize(); 上面代码只是一个演示,实际应用中要根据自