jquery mobile提供了一种可折叠的组件--data-role="collapsible",这种组件可以通过点击折叠块头部来展开/折叠块内的内容,详细组件说明可参考w3cshool可折叠块。
在做一个小项目的时候,我有一个模块用到了可折叠块这个组件:初始页面时collapsible的标题是空的,只有用户在collapsible下面的文本框输入内容后,标题会跟文本框内容同步。
如下图所示,初始界面时,collapsible标题为空,只有在“险种”文本框中输入内容,collapsible标题才会产生变化。
对应的HTML代码如下:
<div data-role="collapsible" id="collapsible"> <h3 class="h3"> </h3> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_name"> 险种 </label> <input name="insurance_name" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_company"> 投保公司 </label> <input name="insurance_company" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="dateinput"> <label for="insurance_date"> 投保日期 </label> <input name="insurance_date" value="" type="date"> </div> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_year"> 年期 </label> <input name="year_period" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="textinput"> <label for="insurance_cost"> 年保费 </label> <input name="year_cost" value="" type="text"> </div> <div class="ui-field-contain" data-controltype="textarea"> <label for="insurance_comment"> 备注 </label> <textarea name="insurance_comment" placeholder=""></textarea> </div> </div> </div>
要想监听“险种”文本框值变化,就需要用到input和propertychange这两个事件,这两个事件是监听内容变化的。
dom.bind('input propertychange', function() { //do something });
只要绑定好这两个内容变化事件,然后在事件体里面编写collapsible标题赋值代码即可搞定问题。
collapsible标题对应前面HTML代码中的"<h3></h3>"元素,但是通过$("h3").html(dom.val())这种形式给它赋值是错误的,这样会导致collapsible样式乱套。因为jquerymobile在上面html基础上动态创建了别的节点元素和样式,最终才会有这样折叠的效果。
可以通过浏览器查看最终的页面元素,你就会发现它与原本的HTML有很大的变化。
上图<span class="ui-btn-text"></span>才是现实标题内容的节点。
所以要想给collapsible标题赋值,就需要找到class为ui-btn-text的节点。
dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(dom.val());
完整的javascript代码应该这样来写:
$(document).on("pageinit", "#insurer_list_page", function() { var dom = $("#collapsible-set").find("input[name='insurance_name']"); dom.bind('input propertychange', function() { var value = dom.val(); if($.isNull(value)){ //输入内容为空,则以空格填充 value = " "; } dom.parents("#collapsible").find(".h3").find(".ui-btn-text").html(value); }); });
相关推荐
- UI组件:如页签(tabs)、工具栏(header和footer)、可折叠面板(collapsible)、滑动切换(slider)、网格布局(grid)等,这些组件提供了丰富的交互和视觉效果。 - 事件处理:如pageinit、pagebeforechange、...
7. **可折叠内容(Collapsible)**:用于隐藏和显示详细内容,通过 data-role="collapsible" 创建。 8. **面板(Panels)**:提供侧滑菜单或全屏覆盖的面板,适用于展示额外的内容或操作选项。 **HTML5 支持** ...
在jQuery Mobile中,`data-role="collapsible"`属性用于创建一个可折叠的区域,用户可以点击标题来展开或收起内容。这在展示大量信息时特别有用,因为它允许用户按需查看详细内容,保持页面整洁。 下面是一个基本的...
- **可折叠内容块(Collapsible)**: 将内容组织成可展开/折叠的块,提高界面清晰度。 ### 4. 事件和页面生命周期 jQuery Mobile 引入了特殊的页面生命周期事件,如 `pageinit`、`pageshow` 和 `pagehide`,用于在...
jQuery Mobile 提供了丰富的UI组件,如按钮(buttons)、表单(forms)、列表视图(listviews)、工具栏(toolbars)、网格布局(grids)、滑块(sliders)和可折叠内容(collapsible content)等。这些组件都预设了...
- **折叠集(Collapsible Sets)**:通过`data-role="collapsible"`和`data-collapsed="true"`实现内容的折叠与展开。 **6. 主题和自定义** jQuery Mobile提供了一套基于Sass的可定制主题系统,允许开发者通过修改...
2. 商品详情:点击商品列表后跳转到商品详情页,展示商品图片、描述、价格等详细信息,可以利用collapsible或accordion组件折叠显示附加信息。 3. 购物车:使用Jquery Mobile的button和input组件创建“加入购物车”...
- **可折叠内容区域(Collapsible)**:用于组织和隐藏内容,使界面更整洁。 **3. 数据属性(Data Attributes)** jQuery Mobile 使用数据属性来增强HTML元素,这些属性以"data-"开头,例如"data-role"、"data-...
6. 布局(Layouts):如分页器(pager)、可折叠集(collapsible sets)和面板(panels)等,用于构建复杂的页面结构。 7. 动画(Transitions):提供平滑的页面切换动画,增强用户体验。 8. 事件(Events):如...
它提供了许多移动友好的组件,如可折叠内容块、导航栏和表单。在这个案例中,`<div data-role="collapsible">`是用于创建可折叠内容的关键元素,`data-collapsed="true"`属性默认使其保持关闭状态。 HTML结构通常...
例如,`data-role="slider"` 创建滑块,`data-role="collapsible"` 用于折叠展开的内容区域。 七、事件与API jQuery Mobile 提供了一系列与触控和页面交互相关的事件,如 `pageinit`(页面初始化)、`tap`(轻击)...
`collapsible`为`true`表示树形网格可折叠,`toolbar`定义工具栏。如果数据未预加载,组件可能无法正确创建,通常需要先通过Ajax获取数据。 这些知识点涵盖了jQuery的基本操作、动画效果、选择器、事件处理、插件...