Question

我在jquerymobile datebox customflip, plugin工作。我有3件事有问题。首先是标题，如何更改标题＆＃39; undefined＆＃39;第二，我如何更改按钮文字＆＃39;看起来不错？第三，我如何在输入而不是索引

上显示文本

heres jsfiddle

代码

 <h2>Custom Box Mode</h2>

                    <script type="text/javascript">
                    jQuery.extend(jQuery.mobile.datebox.prototype.options, {
                        'customData': [  {
                            'input': true,
                            'name': '',
                            'data': ['Single', 'Separated', 'Involved', 'Married','Widowed','Lover','Other']
                        }],
                        'useNewStyle': false,
                        'overrideStyleClass': 'ui-icon-dice'
                    });
                    </script>
                    <style>
                    .ui-icon-dice {
                        background-image: url('http://dev.jtsage.com/jQM-DateBox/img/dice.png') !important;
                        background-repeat: no-repeat;
                        background-position: 99% 50%;
                    }
                    </style>

                    <div data-role="fieldcontain">
                        <label for="cf">Custom</label>
                        <input name="cf" type="date" data-role="datebox" id="cf" data-options='{"mode": "customflip"}' />
                    </div>

Answer 1

按钮文本由overrideCustomSet属性修改。

var selectdata = ['Single', 'Separated', 'Involved', 'Married', 'Widowed', 'Lover', 'Other'];

jQuery.extend(jQuery.mobile.datebox.prototype.options, {
    "customData": [{ "input": true, "name": "", "data": selectdata }],
     "customDefault": [0],
     "useNewStyle": true,
     "enablePopup": false,
     "centerHoriz": true,
     "centerVert": true,
     "useFocus": true,
     "useButton": false,
     "useHeader": true,
     "overrideCustomSet": "Looks Good",
     "overrideCustomFormat": "%%"   
});

对于其他2个问题，您可以处理datebox事件。当事件方法为postrefresh时，设置对话框标题，当方法为set时，从数组中按索引查找文本，并使其成为输入的值。

$('#cf').on('datebox', function (e, p) {
    if (p.method === 'postrefresh') {
        $(".ui-datebox-container h1.ui-title").html("My Title");
    }
    if (p.method === 'set') {
        e.stopImmediatePropagation()
        $(this).val(selectdata[p.value]);
    }
});

以下是您更新的 FIDDLE

如何自定义jquery移动日期框customflipbox

1 个答案: