jQuery Mobile教程-基础篇-表单篇

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

特别申明:本系列教程由小春撰写

本文主要看一下jQuery Mobile体系中的form常见的几个组件,我们采用"提问●回答"的方式来初步地了解一下:

1、如何设置radio?

示例:

<!-- content start --> 
<div data-role="content">

    <!-- h3 start --> 
    <h3>1、垂直模式:</h3>
    <!-- h3 end --> 
    
    <!-- fieldset start --> 
    <fieldset data-role="controlgroup">  
            <legend>专业:</legend>  
            <input type="radio" id="major_comp" name="major" value="1"/>  
            <label for="major_comp">计算机</label>  
      
            <input type="radio" id="major_eng" name="major" value="2"/>  
            <label for="major_eng">英语</label>  
      
            <input type="radio" id="major_math" name="major" value="3"/>  
            <label for="major_math">数学</label>  
    </fieldset>
    <!-- fieldset end --> 
    
    <!-- h3 start --> 
    <h3>2、水平模式:</h3>
    <!-- h3 end --> 
    
    <!-- fieldset start --> 
    <fieldset data-role="controlgroup" data-type="horizontal"> 
            <legend>专业:</legend>  
            <input type="radio" id="major_comp" name="major" value="1"/>  
            <label for="major_comp">计算机</label>  
      
            <input type="radio" id="major_eng" name="major" value="2"/>  
            <label for="major_eng">英语</label>  
      
            <input type="radio" id="major_math" name="major" value="3"/>  
            <label for="major_math">数学</label>  
    </fieldset>
    <!-- fieldset end --> 
    
</div>
<!-- content end --> 

图示:

radio

说明:
1、注意结构,采用fieldset,并增加data-role="controlgroup"
2、默认增强为垂直模式
3、可以设置data-type="horizontal"使得增强为水平模式

2、如何设置checkbox?

示例:

<!-- content start --> 
<div data-role="content">

	<!-- h3 start --> 
	<h3>1、垂直模式:</h3>
	<!-- h3 end --> 
	
	<!-- fieldset start --> 
	<fieldset data-role="controlgroup">  
			<legend>专业:</legend>  
			<input type="checkbox" id="major_comp" name="major" value="1"/>  
			<label for="major_comp">计算机</label>  
	  
			<input type="checkbox" id="major_eng" name="major" value="2"/>  
			<label for="major_eng">英语</label>  
	  
			<input type="checkbox" id="major_math" name="major" value="3"/>  
			<label for="major_math">数学</label>  
	</fieldset>
	<!-- fieldset end --> 
	
	<!-- h3 start --> 
	<h3>2、水平模式:</h3>
	<!-- h3 end --> 
	
	<!-- fieldset start --> 
	<fieldset data-role="controlgroup" data-type="horizontal"> 
			<legend>专业:</legend>  
			<input type="checkbox" id="major_comp" name="major" value="1"/>  
			<label for="major_comp">计算机</label>  
	  
			<input type="checkbox" id="major_eng" name="major" value="2"/>  
			<label for="major_eng">英语</label>  
	  
			<input type="checkbox" id="major_math" name="major" value="3"/>  
			<label for="major_math">数学</label>  
	</fieldset>
	<!-- fieldset end --> 
	
</div>
<!-- content end --> 

图示:

checkbox

说明:
1、注意结构,采用fieldset,并增加data-role="controlgroup"
2、默认增强为垂直模式
3、可以设置data-type="horizontal"使得增强为水平模式

3、如何设置range?

示例:

		<label for="vol_range">range:</label>
		<input type="range" id="vol_range" value="3" min="1" max="20" step="2"/>
	

图示:

range

说明:
1、注意结构,采用html5中type="range"

demo

PS:
1、有问题欢迎在官网留言或者直接联系我:@zhangyaochun_fe
2、可以在官网的问答频道进行提问,我们会尽快回复
3、谢谢您对w3cplusjquery mobile系列教程的关注

关于小春

专注于前端开发,对ECMA底层有深入探究和兴趣…热衷新技术深入调研学习,涉足移动前端许久,爱好分享交流…个人博客focus-fe。欢迎随时关注我:新浪微博

nike air max 2019 black

如需转载,烦请注明出处:https://www.w3cplus.com/blog/700.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部