Jquery Mobile表单与列表

一、JM表单

      1、表单

      普通html表单

(四)Jquery Mobile表单_滑块


      效果:

      

(四)Jquery Mobile表单_表单_02


  

 2、只能输入数字的表单

     

(四)Jquery Mobile表单_滑块_03


      效果:

      

(四)Jquery Mobile表单_搜索_04


        说明:label中的for="number-pattern" 就是说,当我们点击label是就会获取到id="number-pattern"的焦点,也就是下面input框的焦点。

3、文件文本框

      

(四)Jquery Mobile表单_搜索_05


      效果:

      

(四)Jquery Mobile表单_搜索_06

4、密码文本框

      aotocomplete="off"是记录之前输入过的文本,为off就是不保存

      

(四)Jquery Mobile表单_搜索_07


      效果:

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_08

5、在输入框中显示提示信息

      palceholder="请输入您要搜索的内容" 提示信息展示

      

(四)Jquery Mobile表单_搜索_09


     效果:

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_10


      当然,我们也可以设置input框为disabled状态

6、fieldcontain使用

     需要将很多input框和按钮放在一起使用

     

(四)Jquery Mobile表单_2.11.1phoneGap学习_11


      效果:

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_12

7、select选择框

     

(四)Jquery Mobile表单_表单_13


      效果:

      

(四)Jquery Mobile表单_表单_14

8、textarea多行

      

(四)Jquery Mobile表单_表单_15


      效果:

     

(四)Jquery Mobile表单_滑块_16

9、搜索框

     

(四)Jquery Mobile表单_滑块_17


     效果:

     

(四)Jquery Mobile表单_滑块_18

10、滑块

    普通滑块  

(四)Jquery Mobile表单_滑块_19


     效果:     

     

(四)Jquery Mobile表单_2.11.1phoneGap学习_20


     填充滑块

     

(四)Jquery Mobile表单_搜索_21


      效果:

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_22



11、组滑块

(四)Jquery Mobile表单_搜索_23


      效果:

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_24

12、翻转开关

      

(四)Jquery Mobile表单_表单_25


      效果:

     

(四)Jquery Mobile表单_搜索_26

13、checkbox复选框

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_27


      效果:

      

(四)Jquery Mobile表单_滑块_28

14、单选框

      

(四)Jquery Mobile表单_滑块_29


      效果:

      

(四)Jquery Mobile表单_2.11.1phoneGap学习_30

15、非原生的下拉select

      添加data-native-menu="false" 将原生的禁用掉

(四)Jquery Mobile表单_表单_31


      效果:

      

(四)Jquery Mobile表单_表单_32

16、可复选的select

       

(四)Jquery Mobile表单_滑块_33


      效果:

      

(四)Jquery Mobile表单_表单_34



作者:少帅

您的支持是对博主最大的鼓励,感谢您的认真阅读。