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. 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:

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!

时间: 2024-07-29 07:25:22

How to update jQuery Mobile in Dreamweaver CS6的相关文章

02.Jquery Mobile介绍以及Jquery Mobile页面与对话框

一.为什么要学Jquery Mobile   JqueryMobile 是jquery的移动版本,懂基本的jquery知识,会简单的html+css就可以完成很多复杂的功能,还有就是这个框架在企业中用的也是比较多的   二.Adobe Dreamweaver CS6 环境搭建以及软件破解   软件安装步骤:   http://www.phonegap100.com/article-79-1.html            软件下载链接地址:   http://bbs.phonegap100.co

HTML5移动开发之路(22)—— Adobe DreamWeaver CS6安装与破解

本文为 兄弟连IT教育 机构官方 HTML5培训 教程,主要介绍:HTML5移动开发之路(22)-- Adobe DreamWeaver CS6安装与破解 首先说明一下,这里介绍Adobe DreamWeaver CS6的安装与破解是为了后面的jQuery Mobile框架使用做好准备. 一.首先去Adobe官网下载:http://www.adobe.com/cn/downloads.html 安装Adobe下载助手 输入Adobe ID,登录,如果没有可以去官网注册一个.开始下载DrameWe

(二)Jquery Mobile介绍以及Jquery Mobile页面与对话框

Jquery Mobile介绍以及Jquery Mobile页面与对话框  一. Adobe Dreamweaver CS6 环境 最新版本的cs6会支持JM的使用,有自动提示功能,很强大.安装说明地址:http://www.phonegap100.com/article-79-1.html 下载地址说明:http://bbs.phonegap100.com/thread-135-1-1.html  二.JM说明 默认data-ajax="true"jquery mobile 是默认通

[HTML5_JQueryMobile]20个很棒的 jQuery Mobile 教程

构建一个餐馆选择的 Web 应用 How to build a jQuery Mobile app for choosing a restaurant based on what the user want to eat tonight, the town where they want to eat and other user’s ratings of the restaurants. 创建一个良好移动体验应用 For larger data-focused sites, or sites

在DW 5.5+PhoneGap+Jquery Mobile下搭建移动开发环境

移动设备应用开发有多难,只要学会HTML5+Javascript就可以.用Dreamweaver5.5+PhoneGap+Jquery Mobile搭建移动开发环境,轻轻松松开发你自己的应用.让你用普通的web技术编写出能够轻松调用API接口和进入应用商店的HTML5应用开发平台. 安装Dreamweaver5.5 这里要注意,Dreamweaver5.5的内部版本需要5344,也就是目前最新的版本.现在一般网上下载的都是5315,破解后可以用软件自带的更新到5344. 破解的方法如下: 用记事

Dreamweaver CS6最新官方正式中文破解版(32位、64位)

郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 如果文章对您有所帮助,欢迎给作者捐赠,支持郝萌主,捐赠数额随意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源码下载:点我传送 游戏官方下载:http://dwz.cn/RwTjl 游戏视频预览:http://dwz.cn/RzHHd 游戏开发博客:http://dwz.cn/RzJzI 游戏源码传送:http://dwz.cn/Nret1 Dreamweaver 是前端开发的必备软件,没有之一. 目前最新版本为CS6,与CS5相比多了

关于DreamWeaver CS6.0 + PhoneGap 之移动开发环境搭建

Html5已经逆袭了移动开发,最近有幸布置PhoneGap的环境搭载.事实上本人并不会Html以及JS或者JQuery,为了顺应Html5的风暴,还是稍稍的玩转了一下. CS5.5搭建相对CS6.0来说比較人性化.后者基于新的模式,刚開始上手的确有点困顿,只是呢,今天我们就来了解下怎样在CS6.0上顺利的玩转PhoneGap. 关于Android的SDK的开发环境就不在这里介绍了.各位百度搭建吧. 配置好了SDK之后还是建议在Eclipse中创建AVD模拟器,并首次执行下. DreamWeave

jQuery Mobile和Sencha Touch哪个更适合你?

纯粹的总结一下移动web开发框架,移动web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家族,Sencha Touch来自于ExtJS.jQuery Mobile 和Sencha Touch都是比较成熟老牌的框架,项目中也有应用.国内也有公司,像BAT巨头也在探索和实现了适合自己的移动web框架. 1.jQuery Mobile适合你吗 差不多二十年来,处理跨浏览器的HTML和CSS不一致

jQuery Mobile中表单的使用体会

jQuery Mobile是手机端(移动端)页面制作用的框架,包括CSS和JavaScript,此处简单总结一下表单的书写,主要涉及CSS部分.框架提供了表单的一些样式,但在实际使用的时候,我们可能会用自己的自定义样式,这种情况下,框架提供的样式可能就不能满足我们的要求.今天项目中写登录页面的静态网页,碰到了几个问题,在这里和大家交流一下. 1 利用data-role="none" 在使用表单的时候,如果想使用自定义样式,就可以表单元素上给data-role属性赋值none,意思就是不