①、创建方式 使用<button>元素
使用<input>元素
使用data-role="button" 的<a>元素

②、data-inline="true" 在框架中默认情况下按钮是横向独占根据屏幕宽度横向自适应的，但是我们在应用的应用中经常需要在一行中显示多个按钮， 这时候我们就需要知道一个新的叫做内联模式的属性了data-inline="true"。

③、data-iconpos参数 left——图标在文字的左侧 right——图标在文字的右侧 top——图标在文字上面 bottom——图标在文字下面 notext——无文字按钮

①、input类 data-clear-btn="true"——定义单击右侧的按钮将其中输入的内容清空

①、滑块类 data-highlight="true"——滑动条中划过的部分高亮 min、max、setp——支持最小值、最大值、单位长度 data-role="rangeslider"——滑块组

                            <input type="range" name="slider" id="slider" value="20" min="0" max="100" />
                        

③、翻转切换开关(select类和input[type='checkbox']类) data-role="fieldcontain"——区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔 data-role="slider"——将样式设置为一个翻转切换开关

                            <input type="checkbox" data-role="flipswitch" name="flip-checkbox" id="flip-checkbox2"
                                   data-on-text="开" data-off-text="关"  />
                            <select name="slider" id="slider2" data-role="slider">
                                <option value="off">关闭</option>
                                <option value="on">开启</option>
                            </select>
                        

④、单选/复选 data-role="controlgroup"——将几个元素设置成一组，一般是几个相同的元素类型 data-type="horizontal|vertical"——规定水平还是垂直组合，默认是垂直。

                            <fieldset data-role="controlgroup" data-type="horizontal">
                                <legend>单选(横向):</legend>
                                <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
                                <label for="radio-choice-h-2a">选项一</label>
                                <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
                                <label for="radio-choice-h-2b">选项二</label>
                                <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2c" value="other">
                                <label for="radio-choice-h-2c">选项三</label>
                            </fieldset>
                            <fieldset data-role="controlgroup">
                                <legend>复选:</legend>
                                <input type="checkbox" name="checkbox-v-2a" id="checkbox-a" value="4" onclick="show(this.id)">
                                <label for="checkbox-a">四川帅哥</label>
                                <input type="checkbox" name="checkbox-v-2b" id="checkbox-b" value="5" onclick="show(this.id)">
                                <label for="checkbox-b">重庆帅哥</label>
                                <input type="checkbox" name="checkbox-v-2c" id="checkbox-c" value="6" onclick="show(this.id)">
                                <label for="checkbox-c">上海帅哥</label>
                            </fieldset>
                        

⑤、select类 data-native-menu="false"——select选择框不以原生的形式出现，而已渲染的形式出现 multiple="multiple"——用户需要选择下拉式多选，那么在select上加上multiple="multiple"自动会渲染出多选的效果

                            <select name="select-native-4" id="select-native-4" data-native-menu="false">
                                <option>请选择</option>
                                <optgroup label="川菜">
                                    <option value="1">川菜——1</option>
                                    <option value="2">川菜——2</option>
                                    <option value="3">川菜——3</option>
                                    <option value="4">川菜——4</option>
                                </optgroup>
                                <optgroup label="浙菜">
                                    <option value="1">浙菜——1</option>
                                    <option value="2">浙菜——2</option>
                                    <option value="3">浙菜——3</option>
                                </optgroup>
                            </select>
                        

data-role="collapsible"——创建一个可折叠内容块 data-collapsed="false"——展开折叠 data-inset="false"——取消圆角 data-collapsed-icon——自定义折叠图标 data-expanded-icon——自定义展开图标 data-iconpos="right"——图标定位 data-content-theme="a|b|false"——内容主题样式a或b或是没有主题样式 data-role="collapsible-set"——父级上设置data-role="collapsible-set"，子级上课添加多个折叠区域块，视觉上形成手风琴

<1>、list基本列表——属性说明 data-role="listview"——将ul/ol设置为列表视图 data-filter="true"——ul/ol上面设置属性data-filter="true"即可实现动态的搜索过滤的条件，即过滤列表 data-filter-placeholder=""——提示性的过滤条件 data-filter-theme——过滤主题 data-filter-reveal="true"——隐藏过滤下方的条件

                               <ul data-role="listview" data-filter="true" data-filter-placeholder="Search fruits..."
                                    data-filter-theme="a" data-inset="true">
                                   <li><a href="#">Apple</a></li>
                                   <li><a href="#">Banana</a></li>
                                   <li><a href="#">Cherry</a></li>
                                   <li><a href="#">Cranberry</a></li>
                               </ul>
                            

<2>list拓展列表——属性说明 data-role="list-divider"——分割列表项，给任意列表项li添加data-role="list-divider"属性即可。 data-divider-theme="a"——分割列表项主题 data-autodividers="true"=""——通过对列表项文本的首字母进行大写来创建分隔符 data-split-icon——指定用了一个样式为删除按钮的图作为分隔，可以看到，每一行都被划分为两个部分 class="ui-li-count"——给span元素加上该类可以实现统计个数，即计数器 class="ui-li-aside"——如需要增加补充信息，如日期，可以在p标签中添加属性为ui-li-aside

popup属性说明 data-rel="popup"——用于打开的弹出框 data-position-to="origin | jQuery selector | window"——规定弹出框的位置。 Origin - 默认。弹出框位于打开它的链接上。 jQuery selector - 弹出框位于指定元素上。 Window - 弹出框位于窗口屏幕中央。 data-corners ="true | false"——规定弹出框是否有圆角 data-overlay-theme="letter (a-z)"——规定弹出框的叠加（背景）色。默认是透明背景（none） data-shadow="true | false"——规定弹出框是否有阴影 data-tolerance="30, 15, 30, 15"——规定距离窗口边缘 (top, right, bottom, left) 的距离。[该属性未得到验证] data-dismissible="false"——表示点击对话框以外的地方会阻止关闭该对话框，你必须重新建立一个data-rel="back"的按钮才行 data-arrow="true"——表示在某个区域中点击触发popup会显示在该位置

①、弹出层属性——data-tolerance

测试弹出层属性-data-tolerance

测试弹出层属性——data-tolerance

②、照片墙

Close

③、登录示例

登录

请输入登录信息

用户名: 密码: 登  录

④、对话框

提示删除对话框

删除提示

亲，你确认删除你创建的内容?

该内容被删除后将无法恢复，请亲慎用

取消 确认

⑤、arrow-扩展

本段文字出现在点击的区域内部

本段文字出现在点击的区域内部

panel面板属性讲解 data-role="panel"——表示弹出panel效果，需要有唯一的ID标识符 data-position="left"——默认值，意味着它将在屏幕的左边缘出现。 data-position="right"——它出现的右边缘 data-display=“reveal”——默认值，将页面像幻灯片一样从屏幕划出，将面板显示出来 data-display="overlay"——面板出现在页面内容顶部上层 data-display="push"——同时“推动”的面板和页面 data-rel="close"——关闭当前面板

①、data-role="navbar"——工具条选项卡

②、data-role="tabs"——tabs选项卡

data-type="search"/type="search"——input定义搜索输入 data-input="#id"——与搜索inputid相关联 data-filtertext="sometext"——去掉搜索绑定 data-filter-reveal="true"——是否隐藏过滤条件

data-role="table"——表示表格 data-mode="columntoggle"——表示允许表格显示切换统计按钮 data-priority="1"——表示表格中列显示的优先级，1最高，6最低 data-column-btn-theme="b"——表格选择btn的主题 data-column-btn-text="请选择显示的列"——表格选择btn的提示文字 data-column-popup-theme="b"——表格选择项的主题

①、两列式布局 class="ui-grid-a"——父级div用class="ui-grid-a"，表示两列，子级用class="ui-block-a"、class="ui-block-b"，分别表示第一列和第二列 class="ui-bar"——控制各子容器间距 class="ui-bar-a"——控制各子容器主题，分为a和b

②、三列式布局 class="ui-grid-b"——父级div用class="ui-grid-b"，表示三列，子级用class="ui-block-a"、class="ui-block-b" 、class="ui-block-b"，分别表示第一列、第二列和第三列

③、四列式布局 class="ui-grid-c"——父级div用class="ui-grid-c"，表示四列，子级用class="ui-block-a"、 class="ui-block-b"、class="ui-block-c"、class="ui-block-d"，分别表示第一列、第二列、第三列、第四列

④、五列式布局 class="ui-grid-d"——父级div用class="ui-grid-d"，表示五列，子级用class="ui-block-a"、 class="ui-block-b"、class="ui-block-c"、class="ui-block-d"、class="ui-block-e"，分别表示第一列、第二列、 第三列、第四列、第五列

首先，在主题编辑网站http://themeroller.jquerymobile.com将主题编辑好，并下载到本地

其次，在head里面加入如下链接即可

最后，在需要调用的地方写上data-theme="c"(这里我设置的是C)即可

data-transition data-transition="slide"——滑动，页面之间移动的最常见的转换，向前移动或是向后移动的外观(默认),即从右到左滑动的效果 data-transition="slideup——卷起，用于打开对话款或显示额外信息的一个常见的转换。该转换给出的外观可以用来为当前活动的页面收集额外的输入信息 data-transition="slidedown——向下滑动，该转换与卷起相对，但是可以用于实现类似的效果 data-transition="pop——弹出，用于打开对话框或显示额外信息的常见转换，该转换给出的外观可以用来为当前活动的页面收集额外的输入信息 data-transition="fade——淡入/淡出，用于入口页面或出口页面的一个创建的转换鲜果，渐变退色的动画效果活动的页面手机额外的输入信息 data-transition="flip——翻转，用于显示额外信息的一个常见转换 data-transition="none——不应用任何转换 data-transition="slide" data-direction="reverse——反向过渡,和slide相反

$("#id").html(content).trigger('create') 很多时候我们在实际开发过程中需要动态创建组件，比如对话框，list，选项卡等，在这里我们通常的方法只能得到原生的html，并 没有增强效果，因此，我们需要如下方式： $("#id").html(content).trigger('create'); $.mobile.pageContainer.trigger("create");

jquery mobile组件刷新 说明：jqm组件的显示原理是把原始的web组件隐藏，而用jqm自定义的UI组件来代替原始的web组件显示。 动态的改变了组件的值，其实改变的是原始组件的值，而jqm的组件的值并没有被更新，所以需要调用该组件的refresh方法 来使其更新并显示。

                                 $("#list_click").toggle(
                                    function () {
                                        $("#list1").append("
动态加载数据——未刷新
");
                                    },
                                    function(){
                                        $("#list1").append("
动态加载数据——刷新
").listview("refresh");
                                    }
                                 );
                            

                                 $("#slider_click").click(function () {
                                    $("#slider1").val("50").slider("refresh");
                                 });;
                            

                                $("#switch_click").click(function () {
                                    var myswitch = $("#switch1");
                                    myswitch[0].selectedIndex = 1;//1、2分别表示开或关
                                    myswitch.slider("refresh");
                                });
                            

                                $("#select_click").click(function () {
                                     var myswitch = $("#select1");
                                     myswitch[0].selectedIndex = 3;
                                     myswitch.selectmenu("refresh");
                                });
                            

                               $("#radio_click_1").click(function () {
                                    $(".radio1").prop("checked",false).checkboxradio('refresh');
                                    $(".radio2").prop("checked", true).checkboxradio("refresh");
                                });
                                $("#radio_click_2").click(function () {
                                    $("input[name='man']").removeAttr("checked").checkboxradio('refresh');
                                    $("input[value='3']").attr("checked").checkboxradio('refresh');
                                });
                            

                               $("#checkbox_click_1").click(function () {
                                    $(".checkbox_select").prop("checked", true).checkboxradio("refresh");
                                });
                                $("#checkbox_click_2").toggle(
                                    function () {
                                        $('#checkbox-2a,#checkbox-2c').attr('checked', true).checkboxradio('refresh');
                                    },
                                    function () {
                                        $('#checkbox-2a,#checkbox-2c').removeAttr('checked').checkboxradio('refresh');
                                    }
                                 )
                            

                               $("#button_click_1").toggle(
                                    function () {
                                        $("#button1").val("按钮修改完成——1").button("refresh");
                                        $("#button2").text("按钮修改完成——2");
                                    },
                                    function () {
                                        $("#button1").val("修改完成——3").button("refresh");
                                        $("#button2").text("按钮修改完成——4");
                                    }
                                )
                                $("#button_click_2").toggle(
                                    function () {
                                        var button_model = $("<input type='button' value='开始' />");
                                        $(".button0").append(button_model);
                                        $(button_model).button("refresh");
                                    },
                                    function () {
                                        var button_model = $("<input type='button' value='开始—1' />");
                                        $(".button0").append(button_model);
                                        $(button_model).buttonMarkup("refresh");
                                    }
                                )
                            

                                    $("#table_click_1").toggle(
                                        function () {
                                           var tr_obj = $("<tr><td>005</td><td>杨波</td><td>销售总监</td><td>5年</td><td>四川成都</td></tr>");
                                            $("#my_table").append(tr_obj).table("refresh");
                                            tr_obj.css("background","rgb(213, 253, 255)");
                                        },
                                        function () {
                                            $("#add_tr").remove();
                                        }
                                    )
                                    $("#table_click_2").one("click",function () {
                                        $(".table_address").attr("data-priority","4");
                                        $("#my_table").table('refresh');
                                    });
                            

加载器——jqm原生方法

关闭

①、1、mobileinit事件        jQuery Mobile 包括一个初始化事件，该事件甚至会先于jQuery的document.ready事件进行加载。 jQuery Mobile 实际上在文档对象本身上触发其初始化事件，第一个触发的事件是mobileinit。 当Jquery Mobile开始执行时，他就会在document对象上触发mobileinit 事件，因为mobileinit事件是在加载 后马上触发，所以你需要在Jquery Mobile加载之前绑定你的事件处理函数

                            如果要扩展 mobileinit 事件，您首先需要将它与一个自定义函数进行绑定。可使用 bind 方法扩展mobileinit事件，
                            来覆盖默认配置（全局选项）。
                            $(document).bind("mobileinit", function(){
                            //覆盖的代码
                            });
                       

②、1、pagebeforechange事件        页面切换的时候通过$(document).bind("pagebeforechange", beforechange);来绑定pagebeforechange事件的触发函数 handleChangePage(e,data)。页面跳转时pagebeforechange事件会被触发两次，第一次触发时data.toPage是到达页面的url， 类型是string，第二次触发时data.toPage不是String类型 ，此时可以获取到达页面的信息。为了获得到达页面的信息， 所以我们需要获得第二次触发时候的event,可以简单通过if(typeof data.toPage != “string”)来判断， 这时候可以用e.target.baseURI来获取到达页面的URI，并通过这个URI来解析出附带的参数信息。然后通过 e.target.find(“pageId”)来获取到达页的相应组件，并进行相应的操作。

                                /**
                                 * 自定义数据方法说明
                                 * @param definedFun 自定义方法
                                 */
                                function beforechange(definedFun) {
                                    $(document).unbind("pagebeforechange").bind("pagebeforechange", function(e,data){
                                        //这个事件会调用两次，但每次的data内容不一样，所以要判断
                                        if (typeof data.toPage != "string") {
                                        //  该函数解析一个URL地址，并返回一个含所有参数值的对象，这些参数值能够让我们很轻松地访问URL地址上的参数属性。
                                            var thisUrlObj = $.mobile.path.parseUrl(e.target.baseURI);
                                        //取到page活动状态的容器对象
                                            var pageActiveObj = $.mobile.path.parseUrl(data.toPage);
                                            if(typeof definedFun == "function"){
                                                definedFun(e,thisUrlObj,data,pageActiveObj);
                                            }
                                        }
                                    });
                                }
                                /**
                                 * 解析url参数示例——字符串格式id=34&key=perfect&action=go
                                 * @param string 字符串
                                 */
                                function getUrlParam(string) {
                                    var obj =  new Array();
                                    if (string.indexOf("?") != -1) {
                                        var string = string.substr(string.indexOf("?") + 1);
                                        var strs = string.split("&");
                                        for(var i = 0; i < strs.length; i ++) {
                                            var tempArr = strs[i].split("=");
                                            obj[i] = tempArr[1];
                                        }
                                    }
                                    return obj;
                                }
                                /**
                                 * 下一个页面数据方法
                                 * @param pageUrl url地址
                                 * @param sectionId 容器id
                                 * @param definedFun 自定义方法
                                 */
                                function setNextPageData(pageUrl,sectionId,definedFun){
                                    beforechange(definedFun);
                                    $.mobile.changePage(pageUrl,{
                                        transition: "slide",
                                        type:"post",
                                        data:"对面的美女看过来",//(object或string, 默认值: undefined) Ajax 请求时发送的数据。仅当pageUrl参数的值为一个URL时可用。
                                        reverse: false //转场特效是否反向
                                        changeHash: false  //断地址栏上的哈希值是否应该被更新。
                                    })
                                }
                                $("#test_music").bind("tap",function(){
                                    var user_url = "testData2.html";
                                    var url_data = user_url+"?id=34&key=perfect&action=go";
                                    setNextPageData(url_data,"#page1",function(event,thisUrlObj,data,pageActiveObj){
                                        if (thisUrlObj.href.search(user_url) != -1) {
                                            var page = $(event.target).find("#page2");
                                            var ajax_data = data.options.data;
                                            var url_data = getUrlParam(thisUrlObj.href);
                                            page.find("h1").html(url_data[0]);
                                            page.find("#test_book").html(url_data[1]);
                                            page.find("h4").html(url_data[2]);
                                            pageActiveObj.find("#test_music_text").html("欢迎你来到音乐专区");
                                            pageActiveObj.find("#test_music_content").append('
'+ajax_data+'
');
                                        }
                                    });
                                })
                        

③、页面加载事件pagebeforeload和pageload        当一个外部页面加载到 DOM 时，会触发两个事件 —— 第一个事件是 pagebeforeload，第二个是 pageload 或 pageloadfailed。
第一个：pagebeforeload--->在加载请求发出之前触发，绑定到这个事件的回调函数可以该事件调用preventDefault()，来表明由他们来处理加载的请求。 这样的做的话回调函数必须对通过数据对象传到回调函数的对象调用resolve()或者reject()。通过第二个参数传到回调函数的对象包含如下的属性：
url (字符串)：通过回调传到$.mobile.loadPage()的绝对或者相对地址
absUrl (字符串)：url的绝对地址版本。
dataUrl (字符串)：绝对地址的当识别页面或者更新浏览器地址的时候使用的绝对地址经过过滤的版本
deferred (对象)：针对此事件调用preventDefault()的回调函数必须针对此事件调用
resolve()或者reject()方法，使得changePage()的请求恢复。

                               $( document ).bind( "pagebeforeload", function( event,data){
                                    // 阻止默认行为，告知浏览器本次事件由事件的回调函数（即本函数）处理
                                    event.preventDefault();
                                    // 自定义处理，如简单的弹出一个提示
                                    alert('本次事件由开发者作出一些处理');
                                    // 在本函数或者其它异步方法中调用 resolve()
                                    // 告知 $.mobile.changePage() 方法继续页面请求并执行 done() 回调函数队列
                                    data.deferred.resolve( data.absUrl, data.options, page );
                                    //data.deferred.rejected( data.absUrl, data.options );
                                });
                        

④、页面初始化事件pagebeforecreate和pagecreate        pagebeforecreate——>在页面开始初始化之前触发，这时 DOM 已被 jQuery Mobile 获得，但仍未进行 jQuery Mobile 增强，因此绑定这个事件并在回调函数中作出处理可以在页面被增强前进行自定义处理。 另外若阻止事件的默认行为，会禁止页面组件初始化。
pagecreate——>在页面初始化时，即 DOM 刚开始被创建，并且需要进行 jQuery Mobile 的元素已经准备好（即加入待增强列表），但仍未实际开始进行 jQuery Mobile 增强前触发。

⑤、页面初始化事件pageinit        当页面初始化后触发，jQuery Mobile 建议使用这个事件的绑定代替 jQuery 中常用的 DOM ready() ， 因为触发这个事件意味着页面已经直接或者通过 Ajax 加载好并增强，更适合用在 jQuery Mobile 开发中。

⑥、页面显示/隐藏事件(pagebeforeshow、pagebeforehide、pageshow、pagehide)        pagebeforeshow——>每次页面加载的时候都会触发,在页面渲染之前。此事件回调函数传回的数据对象中有一个 "prevPage"属性，该属性是一个jquery集合对象，它可以获取正在切换远离页面的全部DOM元素。
       pagebeforehide——>每次转到新页面之前都会触发当前页面的该事件,在当前页面隐藏之前。此事件回调函数传回的 数据对象中有一个"nextPage"属性，该属性是一个jquery集合对象，它可以获取正在切换目标页面的全部DOM元素
       pageshow——>每次页面加载的时候都会触发,在页面渲染之后。此事件回调函数传回的数据对象中有一个"prevPage" 属性，该属性是一个jquery集合对象，它可以获取切换之前上一页面的全部DOM元素
       pagehide——>每次转到新页面之前都会触发当前页面的该事件,在当前页面隐藏之后。每次页面加载的时候都会触 发,在页面渲染之后。此事件回调函数传回的数据对象中有一个"nextPage"属性，该属性是一个jquery集合对象， 它可以获取切换之后当前页面的全部DOM元素

                            $("#page2").bind("pagebeforehide",function(event, ui){
                                alert('1. ' + ui.nextPage[0].id + ' 正在显示中... ')
                            })
                            $("#page2").bind("pagebeforeshow",function(event, ui){
                                alert('2. ' + ui.prevPage[0].id + ' 正在隐藏中... ')
                            })
                            $("#page2").bind("pagehide",function(event, ui){
                                alert('3. ' + ui.nextPage[0].id + ' 显示完成... ')
                            })
                            $("#page2").bind("pageshow",function(event, ui){
                                alert('4. ' + ui.prevPage[0].id + ' 隐藏完成... ')
                            })
                        

移动端jqm公用固定header和footer的小技巧 要实现header或footer的固定，只需要在header或footer中添加data-position="fixed" 和 data-id="myfooter"属性就可以了。

注意 data-id这里有一点需要注意，就是data-id的值需要保持一样。举个例子：如果我们要footer固定转屏： 从A页面转屏到B页面，A页面的footer设置的data-id="footer1"那B页面的footer也需要设置为data-id="footer1"，否则会失效。

移动端jqm固定头/尾部工具条小技巧 要实现header或footer中navbar的固定，需设置data-transition的属性值为none，并且地址栏不变

                             $(".navbar_btn a").each(function () {
                                var anchor = $(this);
                                anchor.bind("click", function () {
                                    $.mobile.changePage(anchor.attr("href"), {
                                        transition: "none",
                                        changeHash: false
                                    });
                                    return false;
                                });
                            });
                        

①、iscroll使用讲解——[最新版iscroll5] 之所以iscroll会诞生，主要是因为无论是在iphone、ipad、android 或是更早前的移动webkit都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容。 这个不幸的规则导致所有web-app要模拟成app的样子时，只能由一个绝对定位的header 或是footer再加上一个可以内容的滚动的中间区域组成。 幸运的是移动webkit提供了一种强大的硬件加速的CSS属性，这个属性可以用来模拟这个缺失的功能，iscroll从这里开始了前进之路。

②、iscroll基本结构 iScroll需要对所要进行滚动的元素进行初始化，并且不限定一个页面中使用iScroll的元素的个数（这里不考虑您的硬件配置）。 滚动元素中内容的类型和长度在一定程度上将会影响iScroll脚本库里可以同时使用的元素的个数。 使用iScroll这个脚本库时，DOM树的结构要足够简单，移除不必要的标签，尽量避免过多的标签嵌套使用。

                            <div id="wrapper">
                                <ul>
                                    <li></li>
                                    .....
                                </ul>
                            </div>
                       

③、iscroll部分参数详解 iScroll里的第一个参数很简单就是外容器的id，或者css语法格式的class，如'.home .scroll'。第二个参数允许你自定义一些属性配置和方法

hScrollbar是否显示水平滚动条(true/false)

vScrollbar是否显示垂直滚动条(true/false)

fixedScrollbar在iOS系统上,当元素拖动超出了scroller的边界时,滚动条会收缩,设置为true可以禁止滚动条超出scroller的可见区域。false否true 是默认在Android上为true，iOS上为false

hideScrollbar是否隐藏滚动条 false否true是,默认在Android上为false,iOS上为true

fadeScrollbar滚动条是否渐隐渐显 false否true是,默认在Android上为false,iOS上为true

scrollbarClass字定义滚动条的样式名,自定义class