How to update jQuery Mobile in Dreamweaver CS6

简介: 来源:http://wpguru.co.uk/2013/01/how-to-update-jquery-mobile-in-dreamweaver-cs6/Since the release of Adobe’s Dreamweaver CS6 the jQuery and jQuery Mobile libraries have been updated.

来源:http://wpguru.co.uk/2013/01/how-to-update-jquery-mobile-in-dreamweaver-cs6/

Since the release of Adobe’s Dreamweaver CS6 the jQuery and jQuery Mobile libraries have been updated. This means that when you create a new Mobile Starter page, you’ll get outdated libraries by default.

With a bit of hacking we can change this to the most current version though. Let me show you how it worked for me – many thanks to Greg’s article on how to do this in Dreamweaver CS5.5.

 

Why would I want to upgrade?

jQuery mobile was great even in beta, and it was great in its release of Dreamweaver CS6 (which shipped with version 1.0). Many visual effects have been improved, the page transition effects look a lot smoother, and god knows how many other improvements there have been over the last 6 months.

It’s a strength of Dreamweaver to be able to adapt to such change – keep an eye out for future releases of the libraries, it’s a fast paced world out there.

Let’s get started

Dreamweaver CS6 stores its libraries in a folder called Third Party Source Code which on a Mac you’ll find under

/Applications/Adobe Dreamweaver CS6/Configuration/Third Party Source Code

Notice the folder called jquery-mobile. I suggest you leave it there and copy the new libraries into a new folder in the same location. I’ll call mine jquery-mobile-1.2.0 (the current version at the time of writing). Grab the latest minified version from

You’ll also need a new copy of jQuery because jQuery Mobile relies on the jQuery library. Grab it from here:

BEWARE: the latest stable jQuery release is often not compatible with the latest jQuery Mobile release! At the time of writing, the latest jQuery is 1.9.0 – but the version that’s COMPATIBLE with jQuery Mobile 1.2.0 is jQuery 1.8.2.

I know this is confusing… that’s why I thought I’d take some notes. Here’s a list of files that I have in place now:

Screen Shot 2013-01-25 at 23.48.36

Amending the Dreamweaver Page Templates

Once you’ve got a copy of all fresh libraries in the right location you need to amend the Mobile Starter templates Dreamweaver provides. Those are in

/Applications/Adobe Dreamweaver CS6/Configuration/BuiltIn

There are three templates here in a folder called Mobile Starters, two for pages including local libraries, and one with links to the CDN versions:

Screen Shot 2013-01-25 at 23.48.19

Open the two local files and amend the links so that they point to your new libraries. You can do the same with the CDN template of course.

Once they’re saved, you can create a new Mobile Starter page just as before and make use of all the updated jQuery Mobile goodness.

Yikes – now all my jQuery Icons are gone ;-(

Yes that is unfortunate. The reason for this is that Dreamweaver used to have them in the same  directory as jQuery Mobile was living – however jQuery Mobile now has data icons in a separate folder called images (see above). So jQuery expects those images to be in a folder called “images”, but Dreamweaver CS6 copies them into the jquery-mobile folder (without a subfolder).

Since I really don’t know how to teach Dreamweaver how to do this, the easiest thing is to just manually create an images folder  and move the files across. Then all is good again with the world.

Happy hacking!

目录
相关文章
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
185 0
一篇文章带你用jquery mobile设计颜色拾取器
|
JavaScript 前端开发 CDN
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
156 0
手把手教你用jQuery Mobile做相册
|
Web App开发 JavaScript 前端开发
15款优秀的jQuery-Mobile插件
移动互联网迅速发展,PC端的网页并不能完全适应移动端页面需求,响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架,继承了jQuery的“write less,do more”精髓,具有良好的扩展性和可定制性,全面兼容各种平台设备,对于不支持的手机类型,也会降级到基础样式。
421 0
15款优秀的jQuery-Mobile插件
|
JavaScript 前端开发 开发者
一篇文章带你用jquery mobile设计颜色拾取器
一篇文章带你用jquery mobile设计颜色拾取器
492 0
|
数据采集 JavaScript 前端开发
手把手教你用jQuery Mobile做相册
手把手教你用jQuery Mobile做相册
818 0
|
SQL 移动开发 数据可视化
前端必知词汇:Dreamweaver CS6
Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套拥有可视化编辑界面,用于制作并编辑网站和移动应用程序的网页设计软件。由于它支持代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页(通常是标准通用标记语言下的一个应用HTML),对于初级开发者,可以无需编写任何代码就能快速创建Web页面。
574 0
|
JSON JavaScript 前端开发
使用jQuery Mobile和JSON创建移动应用程序
  近来移动应用开发迅速受到很多公司的关注,他们寻求为现存的产品和应用程序添加移动展现或者“触点”。即便不是所有,大部分移动应用开发框架也都会适应某种现存的“桌面”开发平台。基于Web的框架则不同。业界当前采用jQuery来创建移动web应用程序(上个月发布了jQuery Mobile Alpha 3)。
1013 0
|
JavaScript 前端开发 测试技术