`
wmhcymx
  • 浏览: 21204 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

jquery mobile 设置 ui-grid-a 宽度和高度

阅读更多
<div id="findBar" class="ui-grid-a">
2
<div class="ui-block-a"><input placeholder="" data-theme="e" type="search" name="sw" id="sw" value=""  data-mini="true"/></div>
3
<div class="ui-block-b"><button id="doFind" type="button" data-theme="b"  data-icon="search" data-mini="true">查询</button></div>
4
</div>

上边默认样式是两个空间各占50%空间,现在想实现的效果是:
input 占空间2/3,button占空间的1/3
实现方法:

1
<style type="text/css">
2
    div#findBar.ui-grid-a .ui-block-a { width: 65% }
3
    div#findBar.ui-grid-a .ui-block-b { width: 35% }
4
</style>
分享到:
评论
1 楼 xieshengxi 2013-04-07  
如果一个页面有多个这种grid宽度控制各不同 如何解决? 

相关推荐

    详解jQuery移动页面开发中的ui-grid网格布局使用

    - 要创建一个50/50%的两列布局,你需要在父容器上添加`ui-grid-a`类,然后在子元素上分别使用`ui-block-a`和`ui-block-b`。这样,两个子元素将会并排显示,形成一个两列布局。默认情况下,ui-grid布局是无边界的,...

    标准kendo ui-grid控件用法

    Kendo UI Grid是一款强大的数据网格组件,由Telerik公司开发,广泛应用于Web应用程序中,用于展示和操作结构化的数据。这个控件提供了丰富的功能,包括数据分页、排序、过滤、编辑、分组、汇总等,同时支持触摸设备...

    jQuery_Mobile_(HTML5)入门教程第二篇

    第一层(父容器)添加了 `ui-grid-a` 属性,而第二层(两个子容器)分别添加了 `ui-block-a` 和 `ui-block-b`。 - **两列布局中的按钮** ```html &lt;fieldset class="ui-grid-a"&gt; &lt;div class="ui-block-a"&gt;...

    jquery mobile 相册源码

    利用jQuery Mobile的网格系统(如`&lt;div data-role="content"&gt;`内的`&lt;div class="ui-grid-a"&gt;`或`&lt;div class="ui-grid-b"&gt;`),我们可以创建多列布局来适应不同屏幕尺寸的设备。 4. **图片懒加载** 对于包含大量...

    《响应式网页开发实战》教学教案—第9章 jQuery Mobile样式.pdf

    `ui-grid-b`就是一个例子,它将容器分为三等份的网格(`ui-block-a`, `ui-block-b`, `ui-block-c`),用于放置不同内容或控件,如在描述中的“上一张”、“下一张”和“更换主题”按钮。 2. **按钮的添加和位置设定...

    jQuery mobile菜单式的相册

    &lt;div class="ui-grid-a"&gt; &lt;div class="ui-block-a"&gt;&lt;img src="image1.jpg"&gt;&lt;/div&gt; &lt;div class="ui-block-b"&gt;&lt;img src="image2.jpg"&gt;&lt;/div&gt; &lt;!-- 更多图片... --&gt; ``` 为了让相册具有交互性,我们需要添加...

    使用JqueryMobile开发购物网站

    通过`&lt;div class="ui-grid-*"&gt;`和`&lt;div class="ui-block-*"&gt;`,可以创建多列布局适应不同屏幕尺寸。 7. **动态加载和异步更新**:JqueryMobile支持通过AJAX动态加载页面内容,这在处理商品详情或评论时尤其有用。...

    jqueryMobile 教程+手册+实例

    - **列布局**:`&lt;div class="ui-grid-a"&gt;`、`&lt;div class="ui-grid-b"&gt;` 等类定义列数,`&lt;div class="ui-block-a"&gt;`、`&lt;div class="ui-block-b"&gt;` 等类定义内容块。 6. **主题和样式** - **主题系统**:jQuery ...

    jquerymobile制作的各种漂亮界面源代码

    此外,网格系统(Grids)允许开发者灵活地控制内容的分布,通过`&lt;div class="ui-grid-a"&gt;`或`&lt;div class="ui-grid-b"&gt;`等类来创建不同数量的列。 在组件方面,jQuery Mobile涵盖了多种常见的UI元素,如按钮、表单、...

    jQuery mobile多种样式的导航

    **jQuery Mobile:构建多样化导航** 在网页开发中,导航是至关重要的组成部分,它为用户提供了一种轻松浏览网站各个部分的方式...在实际项目中,结合示例代码和不断实践,你将更加熟练地掌握jQuery Mobile导航的运用。

    android jqueryMobile 类库和实例源代码

    结合Android的WebView和jQuery Mobile,开发者可以创建出具有高度互动性和良好用户体验的混合式移动应用。通过理解jQuery Mobile的类库和实例源代码,开发者不仅可以快速构建应用界面,还能进一步优化性能和定制功能...

    jquery-mobile-dev

    jQuery Mobile 是 jQuery 库的扩展,它提供了丰富的 UI 组件和事件处理,旨在简化移动应用的开发。在标题 "jquery-mobile-dev" 中,"dev" 表明这是开发版本,可能包含最新的功能和改进,但未经过充分测试,适用于...

    jQuery mobile 开发案例

    3. **网格系统(Grids)**:通过 `data-role="grid"` 和 `class="ui-grid-xx"`(xx为s、m、l、g之一)创建响应式布局。 4. **面板(Panels)**:常用于侧滑菜单,通过 `data-role="panel"` 实现。 5. **工具栏...

    jQuery mobile相册的一种样式

    jQuery Mobile提供了一系列的UI组件和交互效果,其中包括我们今天要讨论的主题——相册样式。在这个主题下,我们将深入探讨如何利用jQuery Mobile创建一个具有吸引力的相册展示。 首先,jQuery Mobile的核心是其...

    基于Jquery Mobile的IOS主题

    2. **设置主题**:通过CSS类(如`.ui-page-theme-a`)或数据属性(如`data-theme="a"`)指定使用iOS主题。 3. **构建组件**:利用jQuery Mobile的标记语法创建组件,如按钮、表单、列表等。 4. **测试和调整**:在...

    第10讲jQueryMobile(布局和表单).pptx

    例如,`ui-grid-a`代表两列网格,`ui-grid-b`为三列,以此类推。 - 使用`&lt;div class="ui-block-a|b|c|d"&gt;`定义每列内容,对应的字母对应网格中的相应位置。 3. **表单(form)**: - jQuery Mobile提供了丰富的...

    ( jQuery Mobile-chs 中文手册

    1. **网格布局**:`&lt;div class="ui-grid-a"&gt;` 或 `&lt;div class="ui-grid-b"&gt;` 等可以创建响应式的网格布局。 2. **面板**:`&lt;div data-role="panel"&gt;` 用于创建可滑出的侧边栏,常用于导航或额外内容。 3. **弹出框...

    jquery mobile 餐厅实例

    3. **网格布局:** 如果餐厅列表更适合展示为网格形式,可以使用`&lt;div data-role="grid"&gt;`,并通过`&lt;div class="ui-block-a"&gt;`、`&lt;div class="ui-block-b"&gt;`等类进行布局。 **四、事件处理和数据交互** 1. **事件...

Global site tag (gtag.js) - Google Analytics