Fatal编程技术网
  • kendo-ui/
  • Kendo ui 剑道移动模板样式/格式设置不起作用

Kendo ui 剑道移动模板样式/格式设置不起作用

kendo-ui

Kendo ui 剑道移动模板样式/格式设置不起作用,kendo-ui,Kendo Ui,我尝试使用一个模板，如下所示，结果是一个视图，其中所有元素都在一行上，即使我使用来分隔元素。为什么不能正确显示？似乎无论我做什么样的造型，它最终都是单线视图 更新 罪魁祸首是剑道样式表-kendo.mobile.all.min.css- 因此，剑道专家面临的新问题是，为什么剑道在通过模板显示在列表视图中时处理输入字段的方式与在模板之外时不同 listview模板之外的输入字段获取此类 .km-ios .km-list input:not([type="button"]):not([type="s

我尝试使用一个模板，如下所示，结果是一个视图，其中所有元素都在一行上，即使我使用来分隔元素。为什么不能正确显示？似乎无论我做什么样的造型，它最终都是单线视图

更新 罪魁祸首是剑道样式表-kendo.mobile.all.min.css-

因此，剑道专家面临的新问题是，为什么剑道在通过模板显示在列表视图中时处理输入字段的方式与在模板之外时不同

listview模板之外的输入字段获取此类

.km-ios .km-list input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-ios .km-list select:not([multiple]), .km-ios .km-list .k-dropdown-wrap, .km-ios .km-list textarea
这样就不会产生奇怪的样式规则：）普通文本字段视图

模板内的输入字段获取该类

.km-root input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="checkbox"]):not([type="radio"]):not(.k-input):not(.k-button), .km-root select:not([multiple]), .km-root .k-dropdown, .km-root textarea
这导致这些规则被应用于它（使字段位于一个wierd点，并松开所有正常字段stling ie border background等）。我不能100%确定是哪个包装造成了这种情况

appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
font-size: 1.1rem;
color: #385487;
min-width: 6em;
border: 0;
padding: .4em;
outline: 0;
background: 
transparent;
我的工作是给listview模板中的任何文本字段class=“k-input”，这显然将它们从上述css中排除-

<script src="kendo/js/jquery.min.js"></script>
    <script src="kendo/js/kendo.mobile.min.js"></script>



    <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />


<!-- eventDetail view -------------------------------------------------------------------------------------------------->
    <div data-role="view" id="view-eventDetail" data-show="getEventDetailData" data-title="eventDetail">
        <header data-role="header">
            <div data-role="navbar">
                <span data-role="view-title"></span>
                <a data-align="right" data-role="button" class="nav-button" href="#view-myEvents">Back</a>
            </div>
        </header>
        <form id="updateEventForm">
            <div id="updateEvent">
                <div id="eventDetail"></div>
                <p>
                    <input type="button" id="eventUpdateCancelButton" style="width:30%" data-role="button" data-min="true" value="Back" />
                    <input type="submit" id="eventUpdateSaveButton" style="width:30%" data-role="button"  data-min="true" value="Save" />
                </p>
                <div id="eventResult"></div>
            </div>

        </form>

    </div>

    <script id="eventDetail-template" type="text/x-kendo-template">

        <p>
        <input name="event_type" id="event_type" data-min="true" type="text" value="#= type #" />
        </p>
        <p>

        <input name="event_loc" id="event_loc" data-min="true" type="text" value="#= type #" />
        </p>
        <p>

        <input name="event_date_time" id="event_date_time" data-min="true" type="datetime" value="#= stamp #" />
        </p>
        <p>
        Share this
        <input data-role="switch" id="event_share" data-min="true" checked="checked" value="#= share #"/>
        </p>
        <input name="userID" id="userID" type="hidden" value="#= user_id #" />
        <input name="eventID" id="eventID" type="hidden" value="#= event_id #" />

    </script>

    <script>        
        function getEventDetailData(e) {

            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "http://localhost/mpt/website/api/event_details.php",
                        dataType: "jsonp",
                        type: "GET",
                        data: { userID: e.view.params.user_id, eventID: e.view.params.event_id },
                        cache: false
                    },
                    parameterMap: function(options) {
                        return {
                            userID: options.userID,
                            eventID: options.eventID

                        };
                    }
                },
                schema: { // describe the result format
                    data: "results" // the data which the data source will be bound to is in the "results" field
                }
            });           

            console.log(e);

            $("#eventDetail").kendoMobileListView({
                dataSource: dataSource,
                template: kendo.template($("#eventDetail-template").html())

            }).data("kendoMobileListView");

        }           

        //update event          
        function sendUpdateEvent() {

            var siteURI = "http://localhost/mpt/website/api/update_event.php?";

            app.showLoading();

            var user_id = $('#userID').val();
            var event_id = $('#eventID').val();
            var event_type = $('#event_type').val();
            var event_loc = $('#event_loc').val();
            var event_date_time = $('#event_date_time').val();
            var event_share = $('#event_share').val();

            var formVals = 'eventID=' + event_id + '&userID=' + user_id + '&event_type=' + event_type + '&event_loc=' + event_loc + '&event_date_time=' + event_date_time + '&event_share=' + event_share;
            var fullURI = siteURI + formVals;

            $.ajax({
                url: fullURI, dataType: 'json', success: function (data) {
                    $('#eventResult').html(data.results);
                    app.hideLoading();
                    app.navigate("#view-myEvents");

                }
            });
        }

        $('#eventUpdateCancelButton').click(function () {

            app.navigate("#view-myEvents");
        });

        $('#eventUpdateSaveButton').click(function () {

            sendUpdateEvent();
        });

        $('#updateEventForm').submit(function () {

            sendUpdateEvent();

            return false;
        });


    </script>















分享这个


函数getEventDetailData（e）{
var dataSource=new kendo.data.dataSource({
运输：{
阅读：{
url:“http://localhost/mpt/website/api/event_details.php",
数据类型：“jsonp”，
键入：“获取”，
数据：{userID:e.view.params.user_id，eventID:e.view.params.event_id}，
缓存：false
},
parameterMap：功能（选项）{
返回{
userID:options.userID，
eventID:options.eventID
};
}
},
架构：{//描述结果格式
数据：“结果”//数据源将绑定到的数据位于“结果”字段中
}
});           
控制台日志（e）；
$（“#事件细节”）.kendoMobileListView({
数据源：数据源，
模板：kendo.template（$（“#eventDetail template”）.html（）
}).数据（“kendoMobileListView”）；
}           
//更新事件
函数sendUpdateEvent（）{
var siteURI=”http://localhost/mpt/website/api/update_event.php?";
app.showLoading（）；
var user_id=$（'#userID'）.val（）；
var event_id=$（'#eventID'）.val（）；
var event_type=$（'#event_type'）.val（）；
var event_loc=$（'#event_loc'）.val（）；
var event_date_time=$（'#event_date_time'）.val（）；
var event_share=$（'#event_share'）.val（）；
var formVals='eventID='+event_id+'&userID='+user_id+'&event_type='+event_type+'&event_loc='+event_loc+'&event_date_time='+event_date_time+'&event_share='+event_share；
var fullURI=siteURI+formVals；
$.ajax({
url:fullURI，数据类型：“json”，成功：函数（数据）{
$（'#eventResult'）.html（data.results）；
app.hideLoading（）；
应用程序导航（“查看我的事件”）；
}
});
}
$（'#eventUpdateCancelButton'）。单击（函数（）{
应用程序导航（“查看我的事件”）；
});
$（“#eventUpdateSaveButton”）。单击（函数（）{
sendUpdateEvent（）；
});
$（'#updateEventForm'）。提交（函数（）{
sendUpdateEvent（）；
返回false；
});
ListView小部件应该应用于
元素。 尝试更改：

<div id="eventDetail"></div>
末尾的
.data（）
调用在这里没有任何作用，可以删除，您也可以只传递文本字符串作为模板。您不需要自己调用
kendo.template（）。因此，您可以将其更改为：


        $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: $("#eventDetail-template").html()
        });



Listview可以与div一起使用-最重要的是，请参见下面的答案-当表单元素是模板的一部分时，kendo处理表单元素的方式似乎不同：）Listview可以与div一起使用-最重要的是，下面的链接-当表单元素是模板的一部分时，kendo处理表单元素的方式似乎不同：）-但我可以为此添加一个文本字段不处理任何问题它是样式化的吗？当我尝试
.kendoMobileListView（）
对
进行操作时，它生成了HTML
    • 而不是自动放入
      元素，但可能我在尝试它时在JSFIDLE中弄错了什么。很抱歉不用担心-这是jist-当在非剑道环境中运行上述代码时-所有样式都很好：）-我不确定到底是什么导致了样式问题-但是如果我从我的项目中删除剑道样式表Kendo.mobile.all.min.css-wammo-样式如预期的那样…我将进行更多的研究，但它似乎是剑道样式工作表处理模板的方式与处理直线模板的方式不同view@DropHitKendoUI有两个名为ListView的不同小部件。Mobile ListView不同于Web ListView。正如CodingWithSpike所说，移动列表视图应该从
        元素构建。您可以查看相应的帮助文章：

                $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: kendo.template($("#eventDetail-template").html())
        }).data("kendoMobileListView");

        

                $("#eventDetail").kendoMobileListView({
            dataSource: dataSource,
            template: $("#eventDetail-template").html()
        });