jQuery Mobile 1.4.5 整理

一、 1.4.5版本后支持主题a（白色）、b（黑色）、默认主题为a。

二、Button 按钮

1、Button 的创建方式

<!-- 新版本写法，通过class创建button按钮 -->
<a href="#" class="ui-btn ui-btn-b">按钮2</a>                              <!-- 通过a标签创建 -->
<button class="ui-btn ui-btn-b">按钮4</button>                             <!-- 通过button标签创建 -->

<!-- 传统写法 -->
<a href="#" data-role="button">按钮</a>                                    <!-- 通过a标签创建 -->
<button data-inline="true" data-icon="delete">按钮</button>                <!-- 通过button创建 -->
<input type="button" value="按钮3" data-theme="b" data-icon="delete">      <!-- 通过input标签创建 -->

<!-- 扩展按钮 -->
<div class="ui-input-btn ui-btn ui-state-disabled">
    扩展按钮
    <input type="button" disabled="" data-enhanced="true" value="Enhanced">
</div>
点击查看代码

 2、Button的常用属性

Button 按钮常用属性
属性 定义
 class 定义
 说明
data-inline="true"  ui-btn-inline 按钮宽度自适应文本
data-corners="false"  ui-corner-all 是否圆角
data-mini="true"  ui-mini 是否是小型按钮
data-theme="b"  ui-btn-b
 主题
data-shadow="false"  ui-shadow-icon 是否有阴影
data-icon="search"  ui-icon-delete 图标类型：可选
data-iconpos="top | bottom | right | left"  ui-btn-icon-left 图标位置：（上、下、左、右）
data-iconpos="notext"  ui-btn-icon-notext 只显示图标
disabled="true"  ui-state-disabled 按钮不可用
data-role="none" -- 无样式按钮

 

三、Controlgroup 组合

1、创建方式

<!-- div -->
<div data-role="controlgroup" data-type="horizontal">
    <a href="#" class="ui-btn ui-corner-all">No icon</a>
    <a href="#" class="ui-btn ui-corner-all">Left</a>
    <a href="#" class="ui-btn ui-corner-all">Right</a>
</div>

<!-- fieldset -->
<fieldset data-role="controlgroup" data-type="horizontal">
    <button data-icon="search" data-iconpos="notext">Search</button>
    <label for="select-more-1a" class="ui-hidden-accessible">More</label>
    <select name="select-more-1a" id="select-more-1a">
        <option value="">Select…</option>
        <option value="#">One</option>
        <option value="#">Two</option>
    </select>
</fieldset>
点击查看代码

2、可选参数

Controlgroup 参数
属性 说明
data-type="horizontal" 水平居中，默认是垂直居中
data-mini="true" 迷你组合，默认false

 

 1、checkbox 复选框

  • 创建方式
<!-- checkbox 的创建 -->
<input type="checkbox" id="checkbox-mini-0">
<label for="checkbox-mini-0">I agree</label>

<!-- checkbox 增强 -->
<div class="ui-checkbox">
    <label for="checkbox-enhanced" class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off">I agree</label>
    <input type="checkbox" name="checkbox-enhanced" id="checkbox-enhanced" data-enhanced="true">
</div>

<!-- checkbox 组（选中图标在右边，只适用于垂直按钮组） -->
<fieldset data-role="controlgroup" data-iconpos="right">
        <legend>Vertical:</legend>
        <input type="checkbox" name="checkbox-v-2a" id="checkbox-v-2a">
        <label for="checkbox-v-2a">One</label>
        <input type="checkbox" name="checkbox-v-2b" id="checkbox-v-2b">
        <label for="checkbox-v-2b">Two</label>
        <input type="checkbox" name="checkbox-v-2c" id="checkbox-v-2c">
        <label for="checkbox-v-2c">Three</label>
</fieldset>
点击查看代码
  • 可选参数
CheckBox 参数
属性 说明
data-theme="b" 主题
data-mini="true" 迷你

2、radio 单选框

  • 创建方式
<!-- radio 创建方式一 -->
<label>
    <input type="radio" name="radio-choice-0" id="radio-choice-0a">One
</label>
<!-- radio 创建方式二 -->
<label for="radio-choice-0b">Two</label>
<input type="radio" name="radio-choice-0" id="radio-choice-0b">

<!-- radio(迷你组合，选中图标在右侧) -->
<form>
    <fieldset data-role="controlgroup" data-mini="true" data-icon="right" data-iconpos="right">
        <legend>Vertical, icon right, mini sized:</legend>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6a" value="on" checked="checked">
        <label for="radio-choice-v-6a">One</label>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6b" value="off">
        <label for="radio-choice-v-6b">Two</label>
        <input type="radio" name="radio-choice-v-6" id="radio-choice-v-6c" value="other">
        <label for="radio-choice-v-6c">Three</label>
    </fieldset>
</form>
点击查看代码

1、Collapsible 可折叠组件

  • 创建方式
<!-- 创建一个可折叠组件 -->
<div data-role="collapsible">
    <h4>Heading</h4>
    <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

<!-- Form 表单中 用legend标题  -->
<form>
    <fieldset data-role="collapsible" data-collapsed="false">
        <legend>Legend</legend>
        <label for="textinput-f">Text Input:</label>
        <input type="text" name="textinput-f" id="textinput-f" placeholder="Text input" value="">
        <div data-role="controlgroup">
            <input type="checkbox" name="checkbox-1-a" id="checkbox-1-a">
            <label for="checkbox-1-a">One</label>
            <input type="checkbox" name="checkbox-2-a" id="checkbox-2-a">
            <label for="checkbox-2-a">Two</label>
            <input type="checkbox" name="checkbox-3-a" id="checkbox-3-a">
            <label for="checkbox-3-a">Three</label>
        </div>
    </fieldset>
</form>
点击查看代码
  • 可选属性
collapsible 参数
属性 说明
data-theme="b" 主题，仅限于标题

data-content-theme="b"

data-content-theme="false"

展开后内容的主题

不使用展开后的主题
data-mini="true" 迷你
data-collapsed="false" 展开折叠组件
data-collapsed-icon="carat-d" 折叠后的图标
data-expanded-icon="carat-u" 展开后的图标
data-iconpos="right" 折叠组件图标位置
data-inset="false" 取消默认边框
  •  动态折叠组件
<script>
    
    // JS 代码
    $( document ).on( "pagecreate", function() {

        var nextId = 1;
        
        $("#add").click(function() {
            nextId++;
            var content = "<div data-role='collapsible' id='set" + nextId + "'><h3>Section " + nextId + "</h3><p>I am the collapsible content in a set so this feels like an accordion. I am hidden by default because I have the 'collapsed' state; you need to expand the header to see me.</p></div>";
            $( "#set" ).append( content ).collapsibleset( "refresh" );
        });

        $( "#expand" ).click(function() {
            $("#set").children(":last").collapsible( "expand" );
        });

        $( "#collapse" ).click(function() {

            $( "#set" ).children( ":last" ).collapsible( "collapse" );
        });
    });
</script>

<!-- HTML 代码 -->
<button type="button" data-icon="gear" data-iconpos="right" data-mini="true" data-inline="true" id="add">Add</button>
<button type="button" data-icon="plus" data-iconpos="right" data-mini="true" data-inline="true" id="expand">Expand last</button>
<button type="button" data-icon="minus" data-iconpos="right" data-mini="true" data-inline="true" id="collapse">Collapse last</button>
<div data-role="collapsibleset" data-content-theme="a" data-iconpos="right" id="set">
    <div data-role="collapsible" id="set1" data-collapsed="true">
        <h3>Section 1</h3>
        <p>I'm the collapsible content.</p>
    </div>
</div>
点击查看代码

 2、Collapsible set 可折叠集合

  • 创建代码
<div data-role="collapsibleset" data-theme="a" data-content-theme="a">
    <div data-role="collapsible">
        <h3>Section 1</h3>
    <p>I'm the collapsible content for section 1</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 2</h3>
    <p>I'm the collapsible content for section 2</p>
    </div>
    <div data-role="collapsible">
        <h3>Section 3</h3>
    <p>I'm the collapsible content for section 3</p>
    </div>
</div>
点击查看代码
  • 可选属性
Collapsible set 参数
属性 说明
data-theme="b" 标题主题
data-content-theme="b" 展开内容的主题
data-mini="true" 迷你
data-inset="false" 去掉默认自带边框
data-collapsed-icon="arrow-r" 折叠后的图标
data-expanded-icon="arrow-d" 展开后的图标
data-iconpos="right" 图标的位置： left | right | top | bottom
data-corners="false" 去圆角

3. jquery Mobile 跳页

$.mobile.changePage( href, { transition: transition, reverse: reverse, role: role, link: $link });
$.mobile.changePage( $.mobile.firstPage, {transition: "none",reverse: true,changeHash: false,fromHashChange: false});
$.mobile.changePage( formData.url, formData.options );

4. jquery Mobile 弹窗

$.widget( "mobile.popup", {
    options: {
        wrapperClass: null,
        theme: null,
        overlayTheme: null,
        shadow: true,
        corners: true,
        transition: "none",
        positionTo: "origin",
        tolerance: null,
        closeLinkSelector: "a:jqmData(rel='back')",
        closeLinkEvents: "click.popup",
        navigateEvents: "navigate.popup",
        closeEvents: "navigate.popup pagebeforechange.popup",
        dismissible: true,
        enhanced: false,

        // NOTE Windows Phone 7 has a scroll position caching issue that
        //      requires us to disable popup history management by default
        //      https://github.com/jquery/jquery-mobile/issues/4784
        //
        // NOTE this option is modified in _create!
        history: !$.mobile.browser.oldIE
    },

popup.popup( "open", {
            x: offset.left + $link.outerWidth() / 2,
            y: offset.top + $link.outerHeight() / 2,
            transition: $link.jqmData( "transition" ),
            positionTo: $link.jqmData( "position-to" )

});

 备用表格

CheckBox可选参数
属性 说明
   
   
posted @ 2015-08-15 00:42  Duke-码动青春  阅读(1120)  评论(0)    收藏  举报