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

http://jquerymobile.com/download/ (choose the ZIP file)

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

http://jquery.com/download/

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:

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:

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!

15款优秀的jQuery-Mobile插件 移动互联网迅速发展，PC端的网页并不能完全适应移动端页面需求，响应式设计体验产生并成为潮流。由此也促成了jQuery Mobile的流行。jQuery Mobile这样一款基于jQuery和jQuery UI的框架，继承了jQuery的“write less,do more”精髓，具有良好的扩展性和可定制性，全面兼容各种平台设备，对于不支持的手机类型，也会降级到基础样式。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.1 技巧：使用折叠菜单微件组织内容 代码清单7-1介绍了折叠菜单（accordin）微件，通过它，可以将内容分组在标题下面，并且每次只显示选定的一组内容。单击另一个标题会关闭当前打开的一组内容然后在选定的标题下展开新的分组。
《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第9章 使用jQuery Mobile来导航页面 9.1技巧：搭建jQuery Mobile基础页面 jQuery Mobile与jQuery Core和jQuery UI不同。你不用写一行代码就能使用jQuery Mobile的绝大多数功能：只需向HTML中添加一些属性即可。所有的属性都以data-开头，这与在第1章中讲解data()函数时看到的是一样的。