为智能手机的 HTML 表格添加动画效果

Animate HTML Tables for smartphones

本文关键字：动画 添加 表格 智能手机 HTML      更新时间：2023-09-26

我正在尝试为我的html表做一个简单的动画。 我正在提取信息并使用 JQueries、JSON 和 knockoutjs 数据绑定将其显示在 html 表/小部件中。 到目前为止，我只显示 3 列(名称、位置和时间(。 还有其他信息，但我将其放在单独的表格中。 它的设置方式是在主表上，单击要查看的特定项目的行，然后弹出下一个表，其中包含有关该项目的所有信息(包括名称、位置和时间(。 我希望像在智能手机上一样，使用简单的"滑动"动画来动画从第一个表到下一个表的过渡。 我希望它使任何智能手机都可以使用它。

以下是简化的 HTML 和视图模型文件：

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./lib/kockout-2.0.0.js" type="text/javascript"></script>
<script src="./lib/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="./lib/widgetstyle1.css" type="text/css"></script>
<body>
<div data-bind="if: showTable" id="left">
<table width="100%"><thead>
    <tr>
        <th><a href="#" data-bind="click: SortByName">Name</th>
        <th><a href="#" data-bind="click: SortByTimeObserved">Time</th>
        <th><a href="#" data-bind="click: SortByLocation">Location</th>
    </tr>
</thead>
    <tbody data-bind="template: { name: 'Widget', foreach: rows }">
    </tbody>
</table>
<script type="text/html" id="Widget">
    <tr data-bind="click: function() {
            Model.setSelectedEvent($data);
        }"
        <td data-bind="text Name"></td>
        <td data-bind="text Time"></td>
        <td data-bind="text Location"></td>
    </tr>
</script>
</div>
<div data-bind="if: showDetails">
<!-- The next table is just a header with a "back-button" to return to first table -->
<!-- The table after that shows the all the content for the selected item -->
<table width="100%">
    <td><button data-bind="click: function() {
        Model.setSelectedEvent(null);
    }">
        <img src="recources/BackArrow.png" />
    </button>
    </td>
    <td data-bind="text: SelectedEvent().Name"></td>
</table>
<table width="100%">
    <tr>
        <td style="text-align: left; width: 120px; font-size: 200%">Name: </td>
        <td style="text-align: left; font-size: 200%" data-bind="text: SelectedEvent().Name"></td>
    </tr>
<!-- I basically repeat this for all the additional information -->   
</div>
</table>
<script src="ViewModel.js" type="text/javascript"></script>
</body>
</html>

以下是视图模型文件中的大部分 javascript：

function Event(TimeObserved){ 
var self = this; 
self.TimeObserved = TimeObserved; 
} 
function TableViewModel(){ 
    var self = this; 
    self.sortColumn = ko.observable("TimeObserved"); 
    self.sortAscending = ko.observable(true); 
    // Editable/Initial Data
    self.rows = ko.observableArray([]);
    self.Checker = "Name"; 
    self.addRow = function(){ 
        self.rows.push(new Event("")); 
    }         
self.SortByName(){ 
    self.Checker = "Name";
    if(self.sortColumn == "Name") 
        self.sortAscending = !self.sortAscending; 
    else{ 
        self.sortColumn = "Name"; 
        self.sortAscending = true; 
    } 
    self.sorting(); 
    }); 
} 
self.SortByLocation(){ 
    self.Checker = "Location";
    if(self.sortColumn == "Location") 
        self.sortAscending = !self.sortAscending; 
    else{ 
        self.sortColumn = "Location"; 
        self.sortAscending = true; 
    } 
    self.sorting(); 
    }); 
}
self.SortByTimeObserved(){
    self.Checker = "TimeObserved" 
    if(self.sortColumn == "TimeObserved") 
        self.sortAscending = !self.sortAscending; 
    else{ 
        self.sortColumn = "TimeObserved"; 
        self.sortAscending = true; 
    } 
    self.sorting(); 
    }); 
} 
self.sorting = function(){ 
    if(self.Checker = "Name"){
        self.rows.sort(function(a,b){
            if(self.sortAscending() == true)
                return a.Name.toUpperCase() > b.Name.toUpperCase() ? -1 : 1;
            else
                return a.Name.toUpperCase() < b.Name.toUpperCase() ? -1 : 1;
        });
    }
    if(self.Checker = "TimeObserved"){ 
        self.rows.sort(function(a,b){ 
            if(self.sortAscending() == true) 
              for(self.TimeObserved in self.rows) 
                return a.TimeObserved > b.TimeObserved ? 1 : a.TimeObserved < b.TimeObserved ? -1 : 0; 
            else 
                return a.TimeObserved < b.TimeObserved ? 1 : a.TimeObserved > b.TimeObserved ? -1 : 0; 
        } 
    }
    if(self.Checker = "Location"){
        self.rows.sort(function(a,b){
            if(self.sortAscending() == true)
                return a.Location.toUpperCase() > b.Location.toUpperCase() ? -1 : 1;
            else
                return a.Location.toUpperCase() < b.Location.toUpperCase() ? -1 : 1;
        });
    } 
self.SelectedEvent = ko.observable();
self.showTable = ko.observable(true);
self.showDetails = ko.observable(false);

self.setSelectedEvent = function(ev){
    if(ev == null){
        self.SelectedEvent = ();
        self.showTable(true);
        self.showDetails(false);   
    }
    else{
        self.SelectedEvent(ev);
        self.showTable(false);
        self.showDetails(true); 
    }
}
}
//Access the server and pulls the info from it.  I also apply my sorting() method to initially sort the info here. 
function getEvents(model){ 
    $.getJSON("http://mywebpage.com",  
        function (data){ 
        model.rows([]); 
        $.each(data.d, function(i,item){ 
            hendleEvent(item) 
        }); 
        model.sorting(); 
        } 
    ); 
} 
//Populates the rows of the table with the info from the server I.E. item."infoIwant" 
function handleEvent(item){ 
    var newEvent = new Event(item.Name, item.TimeObserved, item.Location); 
    this.Model.rows.push(newEvent);     
} 
this.Model = new TableViewModel(); 
var eventInterval = setInterval(function(){ 
getEvents(this.Model); 
    }, 5000); 
ko.applyBindings(this.Model);

我使用Twitter引导轮播工具找到了解决方案。

相关文章：