控件组合的水平布局

select + input 在同一行

注意jquery mobile 的js 和css 的版本，

一些低版本 估计不支持

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />

    <script  type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

    <script  type="text/javascript" src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>

<style id="textinput-controlgroup">

            .controlgroup-textinput{

                padding-top:.22em;

                padding-bottom:.22em;

            }

        </style>

</head>

<body>

<div data-role="page">

  <div data-role="header">

    <h1>Welcome To My Homepage</h1>

  </div>

  <div data-role="content">

    <label>title</label>

<div data-role="controlgroup" data-type="horizontal">

    <select>

        <option>1</option>

    </select>

    <input id="currency-controlgroup"

type="text" data-wrapper-class="controlgroup-textinput ui-btn">

</div>

  </div>

  <div data-role="footer">

    <h1>Footer Text</h1>

  </div>

</div> 

</body>

</html>

jquery mobile - select and input - horizontal - in same line的更多相关文章

  1. jquery仿jquery mobile的select控件效果

    不说废话.直接上代码 //仿jQuery mobile Select控件 //使用方法box为容器id,_id指控件id,selectvalue为选中值,Value为当前值 function Sele ...

  2. jQuery还原select下拉列表和清空input的值,回显下拉列表框的值

    实现用jQuery还原select下拉列表的值,用了很多种方式,花了一些时间,最后重要找到一种可以实现的方式, 页面上有这些内容 <select id ="level" na ...

  3. JQuery Mobile - 动态修改select选择框的选中项

    <label for="day">选择天</label> <select name="day" id="day" ...

  4. Jquery Mobile 小结

    第一次做一个移动站点,当时纠结选Jquery Mobile还是Zepto,Zepto相对于JM更加轻巧,语法上面也很相似,但考虑到时间问题和JM自带了很多组件(Bootstrap惯出来的),还是选择了 ...

  5. jQuery Mobile动态刷新页面样式

    当我们使用Ajax或者javascript动态在页面上添加元素后,如添加select控件的option元素,添加ul的li元素.添加之后我们会发现,它们显示的样式不是jQuery Mobile的炫酷样 ...

  6. 【初探移动前端开发05】jQuery Mobile (整合版)

    前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile是jquery在移动设备上的版本,他是基 ...

  7. 【初探移动前端开发04】jQuery Mobile (中)

    前言 昨天我们一起学习了一部分jquery mobile的知识,今天我们继续. 这些是些很基础的东西,有朋友觉得这个没有其它的好,但是学习下不吃亏嘛,我反正也不会一起学习基础啦. 例子请使用手机查看哦 ...

  8. 使用jQuery Mobile的注意事项（译）

    翻译编辑自:http://www.appnovation.com/blog/7-things-know-about-jquery-mobile-working-it 一.Android和IOS的内置键 ...

  9. jQuery Mobile Data 属性

    按钮 带有 data-role="button" 的超链接.button 元素.工具栏中的链接以及 input 字段都会自动渲染成按钮样式,不需要添加 data-role=&quo ...

随机推荐

  1. About English Web Site Font

    Which font will you choose when develop one website! Actually , I have no idea about this! If you ha ...

  2. 《Head First Servlets & JSP》-10-定制标记开发

    标记文件:很想include,但是比include更好 建立和使用标记文件的最简方法 取一个被包含文件(如Header.jsp),把它重命名为带有一个.tag扩展名(Header.tag): 把标记文 ...

  3. Java 分析模板方法设计模型

    http://www.cnblogs.com/maowang1991/archive/2013/04/15/3023236.html //父类 abstract class Operate{ prot ...

  4. Mac下配置MAMP Pro+PHPStorm

    一.配置MAMP Pro Hosts 下载地址:http://xclient.info/s/mamp-pro.html 在Hosts页签下,如图所示位置选择你工程目录 二.配置PHPStorm 1.点 ...

  5. 写RestApi需要注意些什么？

    PS1="\n[\e[32;1m]([\e[37;1m]\u[\e[32;1m])-([\e[37;1m]jobs:\j[\e[32;1m])-([\e[37;1m]\w[\e[32;1m] ...

  6. git rm 与 git reset

    https://www.cnblogs.com/sunshine-xin/articles/3521481.html 1. git rm --cached file will remove the f ...

  7. Java NIO看这一篇就够了

    原文链接:https://mp.weixin.qq.com/s/c9tkrokcDQR375kiwCeV9w? 现在使用NIO的场景越来越多,很多网上的技术框架或多或少的使用NIO技术,譬如Tomca ...

  8. 2019年GPLT L2-1 特立独行的幸福 比赛题解 中国高校计算机大赛-团体程序设计天梯赛题解

    对一个十进制数的各位数字做一次平方和,称作一次迭代.如果一个十进制数能通过若干次迭代得到 1,就称该数为幸福数.1 是一个幸福数.此外,例如 19 经过 1 次迭代得到 82,2 次迭代后得到 68, ...

  9. 2015苏州大学ACM-ICPC集训队选拔赛（2） 1001 1003 1010

    草爷要的榜 Problem Description 苏州大学代表队又勤奋地开始了训练.今天开了一场时长5小时的组队训练赛,苏州大学的n(1<=n<=100)支校队奋力拼(hua)搏(shu ...

  10. pandas学习3(数据处理)