Fatal编程技术网
  • mobile/
  • Mobile 剑道UI+；PhoneGap不工作

Mobile 剑道UI+；PhoneGap不工作

mobile cordova kendo-ui

Mobile 剑道UI+；PhoneGap不工作,mobile,cordova,kendo-ui,Mobile,Cordova,Kendo Ui,我下载了剑道UI并将/js和/css文件夹导入到我的项目目录中。现在，我正在创建一个新的index.html项目，并在/js和/css文件夹中引用我所有的剑道UI文件。但什么也没发生。没有样式，没有js，什么都没有。只是简单的HTML，没有别的。我只是不知道我做错了什么，所以我希望有人能帮我解决这个问题。这是我的index.html文件 <!DOCTYPE html> <html> <head> <title>Wh

我下载了剑道UI并将/js和/css文件夹导入到我的项目目录中。现在，我正在创建一个新的index.html项目，并在/js和/css文件夹中引用我所有的剑道UI文件。但什么也没发生。没有样式，没有js，什么都没有。只是简单的HTML，没有别的。我只是不知道我做错了什么，所以我希望有人能帮我解决这个问题。这是我的index.html文件

    <!DOCTYPE html>
<html>

    <head>
        <title>Where is my car?</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.mobile.min.js"></script>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>

    <body>
        <header data-role="header">
            <h1>Where is my car?</h1>
        </header>
        <div id="content" data-role="content">
            <p>asfdasfdasdfasdfasdfasdfs</p>
            <a class="button" data-role="button" href="map.html?requestType=set" id="set-car-position">Set position</a>
            <a class="button" data-role="button" href="map.html?requestType=get" id="find-car" data-role="button">Find car</a>
            <a class="button" data-role="button" href="positions.html" id="positions-history" data-role="button">Positions history</a>
        </div>
        <footer data-role="footer">
            <h3>Created by </h3>
            <a data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
        </footer>
        <style scoped>
            #button-badge .button {
                margin-left: 1em;
                text-align: center;
            }
            #button-home .head, #facility .head, #sports .head {
                display: block;
                margin: 1em;
                height: 120px;
                -webkit-background-size: 100% auto;
                background-size: 100% auto;
            }
            .km-ios .head, .km-blackberry .head {
                -webkit-border-radius: 10px;
                border-radius: 10px;
            }
        </style>
    </body>

</html>
positions.js

style.css：

.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner *
{
   white-space: normal !important;
}

.photo
{
   display: block;
   margin: 0px auto;
}

dl.informations dt
{
   font-weight: bold;
}

#map
{
   width: 100%;
   height: 600px;
}
抱歉，代码太多了，但我无法将设计和功能从jQM转换为KendoUI Mobile

剑道初始化

你缺少让剑道发挥魔力的代码位。我假设您正在使用剑道UI Mobile

应在结束正文标记之前插入以下内容

<script>
// Initialize a new Kendo Mobile Application
var app = new kendo.mobile.Application();
</script>


//初始化新的剑道移动应用程序
var app=new kendo.mobile.Application（）；
您可以阅读以下文档，了解更多相关详细信息：

剑道观点

我还注意到您没有使用任何视图。我不知道你想要实现什么，但特别是在使用剑道时，你应该有一个包装页眉、内容和页脚代码的视图

查看文档：

我建议您阅读上面的文档（如果您还没有这样做的话），首先尝试一下示例，然后开始编写代码

片段

<!-- Kendo Mobile View -->
<div data-role="view" data-title="View" id="index">
    <!--Kendo Mobile Header -->
另一方面，由于没有链接或复制粘贴代码中声明的CSS和JS文件，因此很难检查JSFIDLE中的完整代码是否正常工作

编辑 关于数据源

我只是浏览了一下你的代码，但似乎你没有使用剑道数据源。 阅读以下说明如何将数据绑定到控件的文档

请记住，jQM和kendouimobile有非常不同的方法。Kendo使用模型-视图-视图模型（MVVM），因此将jquery-jQM代码移动到Kendo需要做一些工作，这基本上是一个结构问题

同样，在开始玩剑道之前，我强烈建议阅读文档。你可能会认为你在浪费时间，但是阅读文档会为你节省大量的时间和头痛。

是的，谢谢，我忘了启动剑道应用程序。现在它有一个正确的设计，但我有另一个问题，当我按下这3个按钮之一，在下一页我没有得到任何数据或设计（它基本上是一个应用程序，它说的是用户把车停在哪里）。我用其他文件将问题更新到其他页面。非常感谢VicM。你帮了我很多。我几乎哭了，因为这个：D。现在我知道我在哪里搞砸了（第二个链接帮了我）。谢谢，非常感谢，维克姆：）太好了！很高兴它能帮助你！；） 
function checkRequirements()
{
   if (navigator.network.connection.type == Connection.NONE)
   {
      navigator.notification.alert(
         'To use this app you must enable your internet connection',
         function(){},
         'Warning'
      );
      return false;
   }

   return true;
}

function updateIcons()
{
   if ($(window).width() > 480)
   {
      $('a[data-icon], button[data-icon]').each(
         function()
         {
            $(this).removeAttr('data-iconpos');
         }
      );
   }
   else
   {
      $('a[data-icon], button[data-icon]').each(
         function()
         {
            $(this).attr('data-iconpos', 'notext');
         }
      );
   }
}

function urlParam(name)
{
   var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
   if (results != null && typeof results[1] !== 'undefined')
      return results[1];
   else
      return null;
}

/**
 * Initialize the application
 */
function initApplication()
{
   $('#set-car-position, #find-car').click(function() {
      if (checkRequirements() === false)
      {
         $(this).removeClass('ui-btn-active');
         return false;
      }
   });
   $(document).on('pagebeforecreate orientationchange', updateIcons);
   $('#map-page').live(
      'pageshow',
      function()
      {
         var requestType = urlParam('requestType');
         var positionIndex = urlParam('index');
         var geolocationOptions = {
            timeout: 15 * 1000, // 15 seconds
            maximumAge: 10 * 1000, // 10 seconds
            enableHighAccuracy: true
         };
         var position = new Position();

         $.mobile.loading('show');
         // If the parameter requestType is 'set', the user wants to set
         // his car position else he want to retrieve the position
         if (requestType == 'set')
         {
            navigator.geolocation.getCurrentPosition(
               function(location)
               {
                  // Save the position in the history log
                  position.savePosition(
                     new Coords(
                        location.coords.latitude,
                        location.coords.longitude,
                        location.coords.accuracy
                     )
                  );
                  // Update the saved position to set the address name
                  Map.requestLocation(location);
                  Map.displayMap(location, null);
                  navigator.notification.alert(
                     'Your position has been saved',
                     function(){},
                     'Info'
                  );
               },
               function(error)
               {
                  navigator.notification.alert(
                     'Unable to retrieve your position. Is your GPS enabled?',
                     function(){
                        alert("Unable to retrieve the position: " + error.message);
                     },
                     'Error'
                  );
                  $.mobile.changePage('index.html');
               },
               geolocationOptions
            );
         }
         else
         {
            if (position.getPositions().length == 0)
            {
               navigator.notification.alert(
                  'You have not set a position',
                  function(){},
                  'Error'
               );
               $.mobile.changePage('index.html');
               return false;
            }
            else
            {
               navigator.geolocation.watchPosition(
                  function(location)
                  {
                     // If positionIndex parameter isn't set, the user wants to retrieve
                     // the last saved position. Otherwise he accessed the map page
                     // from the history page, so he wants to see an old position
                     if (positionIndex == undefined)
                        Map.displayMap(location, position.getPositions()[0]);
                     else
                        Map.displayMap(location, position.getPositions()[positionIndex]);
                  },
                  function(error)
                  {
                     console.log("Unable to retrieve the position: " + error.message);
                  },
                  geolocationOptions
               );
            }
         }
      }
   );
   $('#positions-page').live(
      'pageinit',
      function()
      {
         createPositionsHistoryList('positions-list', (new Position()).getPositions());
      }
   );
}

/**
 * Create the positions' history list
 */
function createPositionsHistoryList(idElement, positions)
{
   if (positions == null || positions.length == 0)
      return;

   $('#' + idElement).empty();
   var $listElement, $linkElement, dateTime;
   for(var i = 0; i < positions.length; i++)
   {
      $listElement = $('<li>');
      $linkElement = $('<a>');
      $linkElement
      .attr('href', '#')
      .click(
         function()
         {
            if (checkRequirements() === false)
               return false;

            $.mobile.changePage(
               'map.html',
               {
                  data: {
                     requestType: 'get',
                     index: $(this).closest('li').index()
                  }
               }
            );
         }
      );

      if (positions[i].address == '' || positions[i].address == null)
         $linkElement.text('Address not found');
      else
         $linkElement.text(positions[i].address);

      dateTime = new Date(positions[i].datetime);
      $linkElement.text(
         $linkElement.text() + ' @ ' +
         dateTime.toLocaleDateString() + ' ' +
         dateTime.toLocaleTimeString()
      );

      // Append the link to the <li> element
      $listElement.append($linkElement);

      $linkElement = $('<a>');
      $linkElement.attr('href', '#')
      .text('Delete')
      .click(
         function()
         {
            var position = new Position();
            var oldLenght = position.getPositions().length;
            var $parentUl = $(this).closest('ul');

            position.deletePosition($(this).closest('li').index());
            if (oldLenght == position.getPositions().length + 1)
            {
               $(this).closest('li').remove();
               $parentUl.listview('refresh');
            }
            else
            {
               navigator.notification.alert(
                  'Position not deleted. Something gone wrong so please try again.',
                  function(){},
                  'Error'
               );
            }

         }
      );
      // Append the link to the <li> element
      $listElement.append($linkElement);

      // Append the <li> element to the <ul> element
      $('#' + idElement).append($listElement);
   }
   $('#' + idElement).listview('refresh');
}

function Map()
{
}

/**
 * Display the map showing the user position or the latter and the car position
 */
Map.displayMap = function(userPosition, carPosition)
{
   var userLatLng = null;
   var carLatLng = null;

   if (userPosition != null)
      userLatLng = new google.maps.LatLng(userPosition.coords.latitude, userPosition.coords.longitude);
   if (carPosition != null)
      carLatLng = new google.maps.LatLng(carPosition.position.latitude, carPosition.position.longitude);

   var options = {
      zoom: 20,
      disableDefaultUI: true,
      streetViewControl: true,
      center: userLatLng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }

   var map = new google.maps.Map(document.getElementById('map'), options);
   var marker = new google.maps.Marker({
      position: userLatLng,
      map: map,
      title: 'Your position'
   });
   // If carLatLng is null means that the function has been called when the
   // user set his current position and that is when he parked the car so the
   // icon will be shown accordingly.
   if (carLatLng == null)
      marker.setIcon('images/car-marker.png');
   else
      marker.setIcon('images/user-marker.png');
   var circle = new google.maps.Circle({
      center: userLatLng,
      radius: userPosition.coords.accuracy,
      map: map,
      fillColor: '#70E7FF',
      fillOpacity: 0.2,
      strokeColor: '#0000FF',
      strokeOpacity: 1.0
   });
   map.fitBounds(circle.getBounds());

   if (carLatLng != null)
   {
      marker = new google.maps.Marker({
         position: carLatLng,
         map: map,
         icon: 'images/car-marker.png',
         title: 'Car position'
      });
      circle = new google.maps.Circle({
         center: carLatLng,
         radius: carPosition.position.accuracy,
         map: map,
         fillColor: '#70E7FF',
         fillOpacity: 0.2,
         strokeColor: '#0000FF',
         strokeOpacity: 1.0
      });

      // Display route to the car
      options = {
         suppressMarkers: true,
         map: map,
         preserveViewport: true
      }
      this.setRoute(new google.maps.DirectionsRenderer(options), userLatLng, carLatLng);
   }

   $.mobile.loading('hide');
}

/**
 * Calculate the route from the user to his car
 */
Map.setRoute = function(directionsDisplay, userLatLng, carLatLng)
{
   var directionsService = new google.maps.DirectionsService();
   var request = {
      origin: userLatLng,
      destination: carLatLng,
      travelMode: google.maps.DirectionsTravelMode.WALKING,
      unitSystem: google.maps.UnitSystem.METRIC
   };

   directionsService.route(
      request,
      function(response, status)
      {
         if (status == google.maps.DirectionsStatus.OK)
            directionsDisplay.setDirections(response);
         else
         {
            navigator.notification.alert(
               'Unable to retrieve a route to your car. However, you can still find it by your own.',
               function(){},
               'Warning'
            );
         }
      }
   );
}

/**
 * Request the address of the retrieved location
 */
Map.requestLocation = function(position)
{
   new google.maps.Geocoder().geocode(
      {
         'location': new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
      },
      function(results, status)
      {
         if (status == google.maps.GeocoderStatus.OK)
         {
            var positions = new Position();
            positions.updatePosition(0, positions.getPositions()[0].coords, results[0].formatted_address);
         }
      }
   );
}

function Position(position, address, datetime)
{
   var _db = window.localStorage;
   var MAX_POSITIONS = 50;

   this.position = position;
   this.address = address;
   this.datetime = datetime;

   this.getMaxPositions = function()
   {
      return MAX_POSITIONS;
   }

   this.savePosition = function(position, address)
   {
      if (!_db)
      {
         console.log('The database is null. Unable to save position');
         navigator.notification.alert(
            'Unable to save position',
            function(){},
            'Error'
         );
      }

      var positions = this.getPositions();
      if (positions == null)
         positions = [];

      positions.unshift(new Position(position, address, new Date()));
      // Only the top MAX_POSITIONS results are needed
      if (positions.length > this.MAX_POSITIONS)
         positions = positions.slice(0, this.MAX_POSITIONS);

      _db.setItem('positions', JSON.stringify(positions));

      return positions;
   }

   this.updatePosition = function(index, position, address)
   {
      if (!_db)
      {
         console.log('The database is null. Unable to update position');
         navigator.notification.alert(
            'Unable to update position',
            function(){},
            'Error'
         );
      }

      var positions = this.getPositions();
      if (positions != null && positions[index] != undefined)
      {
         positions[index].coords = position;
         positions[index].address = address;
      }

      _db.setItem('positions', JSON.stringify(positions));

      return positions;
   }

   this.deletePosition = function(index)
   {
      if (!_db)
      {
         console.log('The database is null. Unable to delete position');
         navigator.notification.alert(
            'Unable to delete position',
            function(){},
            'Error'
         );
      }

      var positions = this.getPositions();
      if (positions != null && positions[index] != undefined)
         positions.splice(index, 1);

      _db.setItem('positions', JSON.stringify(positions));

      return positions;
   }

   this.getPositions = function()
   {
      if (!_db)
      {
         console.log('The database is null. Unable to retrieve positions');
         navigator.notification.alert(
            'Unable to retrieve positions',
            function(){},
            'Error'
         );
      }

      var positions = JSON.parse(_db.getItem('positions'));
      if (positions == null)
         positions = [];

      return positions;
   }

}

function Coords(latitude, longitude, accuracy)
{
   this.latitude = latitude;
   this.longitude = longitude;
   this.accuracy = accuracy;
}

.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner *
{
   white-space: normal !important;
}

.photo
{
   display: block;
   margin: 0px auto;
}

dl.informations dt
{
   font-weight: bold;
}

#map
{
   width: 100%;
   height: 600px;
}

<script>
// Initialize a new Kendo Mobile Application
var app = new kendo.mobile.Application();
</script>

<!-- Kendo Mobile View -->
<div data-role="view" data-title="View" id="index">
    <!--Kendo Mobile Header -->