jQuery Mobile适用于移动和桌面?

时间:2021-06-17 16:06:54

I'm developing a web app. MySql/PHP back-end, and HTML/jQuery front-end.

我正在开发一个网络应用程序。 MySql / PHP后端和HTML / jQuery前端。

I wanted to use jQuery UI framework.

我想使用jQuery UI框架。

Now is see that jQuery Mobile is out, and I want to make the app accessible to mobile devices as much as possible.

现在看到jQuery Mobile已经出局了,我希望尽可能地让移动设备可以访问该应用程序。

I Googled, but didn't find a quality answer.

我用Google搜索,但没有找到质量答案。

Can I make it all to work form the same code if I use jQuery Mobile?

如果我使用jQuery Mobile,我可以使用相同的代码完成所有工作吗?

I'd like it to show mobile widgets if accessed form mobile browser.
But use jQuery UI widgets is accessed from desktop browser.

如果从移动浏览器访问,我希望它显示移动小部件。但是使用jQuery UI小部件可以从桌面浏览器访问。

Is that possible just by using jQuery Mobile and its markup, or I have to write the front-end for mobile (jQuery Mobile) and desktop (jQuery UI) separately?

这可能只是通过使用jQuery Mobile及其标记,或者我必须分别编写移动(jQuery Mobile)和桌面(jQuery UI)的前端?

That is, can jQuery Mobile, automatically "fall-back" to jQuery UI if accessed from desktop browser.

也就是说,如果从桌面浏览器访问,jQuery Mobile可以自动“回退”到jQuery UI。

3 个解决方案

#1


26  

I think it largely depends on what you want to do and functionality you're trying to capture. If you want a webpage to behave a certain way on mobile and the same desktop, then with some careful coding/testing, you'll be alright with jquery.mobile.

我认为这在很大程度上取决于你想要做什么以及你想要捕捉的功能。如果您希望网页在移动设备和同一桌面上以某种方式运行,那么通过一些仔细的编码/测试,您可以使用jquery.mobile。

If you check out the CSS for jquery.mobile (uncompressed version), you can actually edit the code directly to show the HTML elements the way you want to for particular screen sizes. Just select the one for desktop / large screen sizes to scale appropriately.

如果你查看了jquery.mobile(未压缩版本)的CSS,你可以直接编辑代码,以便按照你想要的特定屏幕尺寸的方式显示HTML元素。只需选择适合桌面/大屏幕尺寸的尺寸即可。

Depending on what you're trying to accomplish in terms of your mobile version, I'd also check out jQTouch - which allows for mobile-specific functionality, such as "tap" (in place of "click"), as an example - but also has a desktopCompatability option, so it reverts for desktop browsers.

根据您在移动版本方面要完成的任务,我还会查看jQTouch - 它允许移动专用功能,例如“点击”(代替“点击”),作为示例 - 而且还有一个desktopCompatability选项,因此它可以恢复桌面浏览器。

One note, with either of these libraries, you'll still need the root jquery library.

请注意,使用这些库中的任何一个,您仍然需要根jquery库。

Hope this helps.

希望这可以帮助。

#2


25  

First of all you will have to consider that the workflows for mobile and desktop differ vastly. Trying to flip between the desktop version and the mobile version will not be just a toggle between resources.

首先,您必须考虑移动设备和桌面设备的工作流程差别很大。尝试在桌面版和移动版之间切换不仅仅是资源之间的切换。

Secondly the two UI frameworks differ vastly in how they are used. jQuery UI is a collection of widgets that you can invoke when you like and where you like, it is in a sense library(ish) with a CSS framework backing it. jQuery mobile works quite differently however, by default it is a markup driven framework and to get it up and running it doesn't require you to write even 1 line of Javascript.

其次,两个UI框架在使用方式上存在很大差异。 jQuery UI是一个小部件集合,你可以在你喜欢和喜欢的地方调用它,它在某种意义上是一个CSS框架(ish),它支持CSS框架。 jQuery mobile的工作方式完全不同,但默认情况下它是一个标记驱动的框架,要启动它并运行它不需要你甚至写一行Javascript。

My advise to you is to think about the data layer as your common code and the client side as 2 completely separate pieces of work. Personally I have managed to create applications using common REST webservices. I use the jQuery UI to consume webservices and create mashups for the client-side. I then for the mobile version consume the webservices server-side to produce jQuery-mobile html pages for use on mobile.

我的建议是将数据层视为公共代码,将客户端视为2个完全独立的工作。我个人已经设法使用常见的REST Web服务创建应用程序。我使用jQuery UI来使用webservices并为客户端创建mashup。然后我为移动版本使用webservices服务器端来生成jQuery-mobile html页面以便在移动设备上使用。

Also note that generating dynamic HTML on the client side using jQuery Mobile will most certainly cause you huge headaches. Until the project matures I would use it only to enhance the frameworks highly semantic markup. Create a good solid data layer and the rest will be piss easy :)

另请注意,使用jQuery Mobile在客户端生成动态HTML肯定会让您感到非常头疼。在项目成熟之前,我将仅使用它来增强框架的高度语义标记。创建一个良好的可靠数据层,其余的将是小便:)

#3


6  

Here is the full source code: https://github.com/ti-dev/Scrum-it for an open source Scrum Board which is designed for desktop devices and Apple iPad. So it is possible to combine these two worlds in one webpage.

以下是完整的源代码:https://github.com/ti-dev/Scrum-it用于开源Scrum Board,专为桌面设备和Apple iPad设计。因此,可以将这两个世界组合在一个网页中。

#1


26  

I think it largely depends on what you want to do and functionality you're trying to capture. If you want a webpage to behave a certain way on mobile and the same desktop, then with some careful coding/testing, you'll be alright with jquery.mobile.

我认为这在很大程度上取决于你想要做什么以及你想要捕捉的功能。如果您希望网页在移动设备和同一桌面上以某种方式运行,那么通过一些仔细的编码/测试,您可以使用jquery.mobile。

If you check out the CSS for jquery.mobile (uncompressed version), you can actually edit the code directly to show the HTML elements the way you want to for particular screen sizes. Just select the one for desktop / large screen sizes to scale appropriately.

如果你查看了jquery.mobile(未压缩版本)的CSS,你可以直接编辑代码,以便按照你想要的特定屏幕尺寸的方式显示HTML元素。只需选择适合桌面/大屏幕尺寸的尺寸即可。

Depending on what you're trying to accomplish in terms of your mobile version, I'd also check out jQTouch - which allows for mobile-specific functionality, such as "tap" (in place of "click"), as an example - but also has a desktopCompatability option, so it reverts for desktop browsers.

根据您在移动版本方面要完成的任务,我还会查看jQTouch - 它允许移动专用功能,例如“点击”(代替“点击”),作为示例 - 而且还有一个desktopCompatability选项,因此它可以恢复桌面浏览器。

One note, with either of these libraries, you'll still need the root jquery library.

请注意,使用这些库中的任何一个,您仍然需要根jquery库。

Hope this helps.

希望这可以帮助。

#2


25  

First of all you will have to consider that the workflows for mobile and desktop differ vastly. Trying to flip between the desktop version and the mobile version will not be just a toggle between resources.

首先,您必须考虑移动设备和桌面设备的工作流程差别很大。尝试在桌面版和移动版之间切换不仅仅是资源之间的切换。

Secondly the two UI frameworks differ vastly in how they are used. jQuery UI is a collection of widgets that you can invoke when you like and where you like, it is in a sense library(ish) with a CSS framework backing it. jQuery mobile works quite differently however, by default it is a markup driven framework and to get it up and running it doesn't require you to write even 1 line of Javascript.

其次,两个UI框架在使用方式上存在很大差异。 jQuery UI是一个小部件集合,你可以在你喜欢和喜欢的地方调用它,它在某种意义上是一个CSS框架(ish),它支持CSS框架。 jQuery mobile的工作方式完全不同,但默认情况下它是一个标记驱动的框架,要启动它并运行它不需要你甚至写一行Javascript。

My advise to you is to think about the data layer as your common code and the client side as 2 completely separate pieces of work. Personally I have managed to create applications using common REST webservices. I use the jQuery UI to consume webservices and create mashups for the client-side. I then for the mobile version consume the webservices server-side to produce jQuery-mobile html pages for use on mobile.

我的建议是将数据层视为公共代码,将客户端视为2个完全独立的工作。我个人已经设法使用常见的REST Web服务创建应用程序。我使用jQuery UI来使用webservices并为客户端创建mashup。然后我为移动版本使用webservices服务器端来生成jQuery-mobile html页面以便在移动设备上使用。

Also note that generating dynamic HTML on the client side using jQuery Mobile will most certainly cause you huge headaches. Until the project matures I would use it only to enhance the frameworks highly semantic markup. Create a good solid data layer and the rest will be piss easy :)

另请注意,使用jQuery Mobile在客户端生成动态HTML肯定会让您感到非常头疼。在项目成熟之前,我将仅使用它来增强框架的高度语义标记。创建一个良好的可靠数据层,其余的将是小便:)

#3


6  

Here is the full source code: https://github.com/ti-dev/Scrum-it for an open source Scrum Board which is designed for desktop devices and Apple iPad. So it is possible to combine these two worlds in one webpage.

以下是完整的源代码:https://github.com/ti-dev/Scrum-it用于开源Scrum Board,专为桌面设备和Apple iPad设计。因此,可以将这两个世界组合在一个网页中。