Compare commits

..

No commits in common. "master" and "1.0a4" have entirely different histories.

648 changed files with 126780 additions and 66347 deletions

5
.gitignore vendored
View file

@ -6,8 +6,3 @@
cache/
combined/
combine/
compiled/
tmp/
*.swp
.gitignore
tests/speed/stats/stats.db

10
.htaccess Normal file
View file

@ -0,0 +1,10 @@
#thx askapache.com
<FilesMatch "\.(php|html|htm|js|css)$">
FileETag None
<IfModule mod_headers.c>
Header unset ETag
Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires "Wed, 11 Jan 1984 05:00:00 GMT"
</IfModule>
</FilesMatch>

View file

@ -1,278 +0,0 @@
GNU GENERAL PUBLIC LICENSE
Version 2, June 1991
Copyright (C) 1989, 1991 Free Software Foundation, Inc.
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The licenses for most software are designed to take away your
freedom to share and change it. By contrast, the GNU General Public
License is intended to guarantee your freedom to share and change free
software--to make sure the software is free for all its users. This
General Public License applies to most of the Free Software
Foundation's software and to any other program whose authors commit to
using it. (Some other Free Software Foundation software is covered by
the GNU Lesser General Public License instead.) You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
this service if you wish), that you receive source code or can get it
if you want it, that you can change the software or use pieces of it
in new free programs; and that you know you can do these things.
To protect your rights, we need to make restrictions that forbid
anyone to deny you these rights or to ask you to surrender the rights.
These restrictions translate to certain responsibilities for you if you
distribute copies of the software, or if you modify it.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must give the recipients all the rights that
you have. You must make sure that they, too, receive or can get the
source code. And you must show them these terms so they know their
rights.
We protect your rights with two steps: (1) copyright the software, and
(2) offer you this license which gives you legal permission to copy,
distribute and/or modify the software.
Also, for each author's protection and ours, we want to make certain
that everyone understands that there is no warranty for this free
software. If the software is modified by someone else and passed on, we
want its recipients to know that what they have is not the original, so
that any problems introduced by others will not reflect on the original
authors' reputations.
Finally, any free program is threatened constantly by software
patents. We wish to avoid the danger that redistributors of a free
program will individually obtain patent licenses, in effect making the
program proprietary. To prevent this, we have made it clear that any
patent must be licensed for everyone's free use or not licensed at all.
The precise terms and conditions for copying, distribution and
modification follow.
GNU GENERAL PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. This License applies to any program or other work which contains
a notice placed by the copyright holder saying it may be distributed
under the terms of this General Public License. The "Program", below,
refers to any such program or work, and a "work based on the Program"
means either the Program or any derivative work under copyright law:
that is to say, a work containing the Program or a portion of it,
either verbatim or with modifications and/or translated into another
language. (Hereinafter, translation is included without limitation in
the term "modification".) Each licensee is addressed as "you".
Activities other than copying, distribution and modification are not
covered by this License; they are outside its scope. The act of
running the Program is not restricted, and the output from the Program
is covered only if its contents constitute a work based on the
Program (independent of having been made by running the Program).
Whether that is true depends on what the Program does.
1. You may copy and distribute verbatim copies of the Program's
source code as you receive it, in any medium, provided that you
conspicuously and appropriately publish on each copy an appropriate
copyright notice and disclaimer of warranty; keep intact all the
notices that refer to this License and to the absence of any warranty;
and give any other recipients of the Program a copy of this License
along with the Program.
You may charge a fee for the physical act of transferring a copy, and
you may at your option offer warranty protection in exchange for a fee.
2. You may modify your copy or copies of the Program or any portion
of it, thus forming a work based on the Program, and copy and
distribute such modifications or work under the terms of Section 1
above, provided that you also meet all of these conditions:
a) You must cause the modified files to carry prominent notices
stating that you changed the files and the date of any change.
b) You must cause any work that you distribute or publish, that in
whole or in part contains or is derived from the Program or any
part thereof, to be licensed as a whole at no charge to all third
parties under the terms of this License.
c) If the modified program normally reads commands interactively
when run, you must cause it, when started running for such
interactive use in the most ordinary way, to print or display an
announcement including an appropriate copyright notice and a
notice that there is no warranty (or else, saying that you provide
a warranty) and that users may redistribute the program under
these conditions, and telling the user how to view a copy of this
License. (Exception: if the Program itself is interactive but
does not normally print such an announcement, your work based on
the Program is not required to print an announcement.)
These requirements apply to the modified work as a whole. If
identifiable sections of that work are not derived from the Program,
and can be reasonably considered independent and separate works in
themselves, then this License, and its terms, do not apply to those
sections when you distribute them as separate works. But when you
distribute the same sections as part of a whole which is a work based
on the Program, the distribution of the whole must be on the terms of
this License, whose permissions for other licensees extend to the
entire whole, and thus to each and every part regardless of who wrote it.
Thus, it is not the intent of this section to claim rights or contest
your rights to work written entirely by you; rather, the intent is to
exercise the right to control the distribution of derivative or
collective works based on the Program.
In addition, mere aggregation of another work not based on the Program
with the Program (or with a work based on the Program) on a volume of
a storage or distribution medium does not bring the other work under
the scope of this License.
3. You may copy and distribute the Program (or a work based on it,
under Section 2) in object code or executable form under the terms of
Sections 1 and 2 above provided that you also do one of the following:
a) Accompany it with the complete corresponding machine-readable
source code, which must be distributed under the terms of Sections
1 and 2 above on a medium customarily used for software interchange; or,
b) Accompany it with a written offer, valid for at least three
years, to give any third party, for a charge no more than your
cost of physically performing source distribution, a complete
machine-readable copy of the corresponding source code, to be
distributed under the terms of Sections 1 and 2 above on a medium
customarily used for software interchange; or,
c) Accompany it with the information you received as to the offer
to distribute corresponding source code. (This alternative is
allowed only for noncommercial distribution and only if you
received the program in object code or executable form with such
an offer, in accord with Subsection b above.)
The source code for a work means the preferred form of the work for
making modifications to it. For an executable work, complete source
code means all the source code for all modules it contains, plus any
associated interface definition files, plus the scripts used to
control compilation and installation of the executable. However, as a
special exception, the source code distributed need not include
anything that is normally distributed (in either source or binary
form) with the major components (compiler, kernel, and so on) of the
operating system on which the executable runs, unless that component
itself accompanies the executable.
If distribution of executable or object code is made by offering
access to copy from a designated place, then offering equivalent
access to copy the source code from the same place counts as
distribution of the source code, even though third parties are not
compelled to copy the source along with the object code.
4. You may not copy, modify, sublicense, or distribute the Program
except as expressly provided under this License. Any attempt
otherwise to copy, modify, sublicense or distribute the Program is
void, and will automatically terminate your rights under this License.
However, parties who have received copies, or rights, from you under
this License will not have their licenses terminated so long as such
parties remain in full compliance.
5. You are not required to accept this License, since you have not
signed it. However, nothing else grants you permission to modify or
distribute the Program or its derivative works. These actions are
prohibited by law if you do not accept this License. Therefore, by
modifying or distributing the Program (or any work based on the
Program), you indicate your acceptance of this License to do so, and
all its terms and conditions for copying, distributing or modifying
the Program or works based on it.
6. Each time you redistribute the Program (or any work based on the
Program), the recipient automatically receives a license from the
original licensor to copy, distribute or modify the Program subject to
these terms and conditions. You may not impose any further
restrictions on the recipients' exercise of the rights granted herein.
You are not responsible for enforcing compliance by third parties to
this License.
7. If, as a consequence of a court judgment or allegation of patent
infringement or for any other reason (not limited to patent issues),
conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot
distribute so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you
may not distribute the Program at all. For example, if a patent
license would not permit royalty-free redistribution of the Program by
all those who receive copies directly or indirectly through you, then
the only way you could satisfy both it and this License would be to
refrain entirely from distribution of the Program.
If any portion of this section is held invalid or unenforceable under
any particular circumstance, the balance of the section is intended to
apply and the section as a whole is intended to apply in other
circumstances.
It is not the purpose of this section to induce you to infringe any
patents or other property right claims or to contest validity of any
such claims; this section has the sole purpose of protecting the
integrity of the free software distribution system, which is
implemented by public license practices. Many people have made
generous contributions to the wide range of software distributed
through that system in reliance on consistent application of that
system; it is up to the author/donor to decide if he or she is willing
to distribute software through any other system and a licensee cannot
impose that choice.
This section is intended to make thoroughly clear what is believed to
be a consequence of the rest of this License.
8. If the distribution and/or use of the Program is restricted in
certain countries either by patents or by copyrighted interfaces, the
original copyright holder who places the Program under this License
may add an explicit geographical distribution limitation excluding
those countries, so that distribution is permitted only in or among
countries not thus excluded. In such case, this License incorporates
the limitation as if written in the body of this License.
9. The Free Software Foundation may publish revised and/or new versions
of the General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the Program
specifies a version number of this License which applies to it and "any
later version", you have the option of following the terms and conditions
either of that version or of any later version published by the Free
Software Foundation. If the Program does not specify a version number of
this License, you may choose any version ever published by the Free Software
Foundation.
10. If you wish to incorporate parts of the Program into other free
programs whose distribution conditions are different, write to the author
to ask for permission. For software which is copyrighted by the Free
Software Foundation, write to the Free Software Foundation; we sometimes
make exceptions for this. Our decision will be guided by the two goals
of preserving the free status of all derivatives of our free software and
of promoting the sharing and reuse of software generally.
NO WARRANTY
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
REPAIR OR CORRECTION.
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
POSSIBILITY OF SUCH DAMAGES.

View file

@ -1,9 +0,0 @@
/*
* jQuery Mobile Framework v@VERSION
* http://jquerymobile.com
*
* Copyright 2011 (c) jQuery Project
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
*/

View file

@ -1,20 +0,0 @@
Copyright (c) 2011 John Resig, http://jquery.com/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

265
Makefile Normal file → Executable file
View file

@ -1,189 +1,110 @@
# Helper Variables
# The command to replace the @VERSION in the files with the actual version
VER = sed "s/v@VERSION/$$(git log -1 --format=format:"Git Build: SHA1: %H <> Date: %cd")/"
VER_MIN = "/*! jQuery Mobile v$$(git log -1 --format=format:"Git Build: SHA1: %H <> Date: %cd") jquerymobile.com | jquery.org/license */"
VER_OFFICIAL = $(shell cat version.txt)
SED_VER_API = sed 's/__version__/"${VER_OFFICIAL}"/g'
deploy: VER = sed "s/v@VERSION/${VER_OFFICIAL}/"
deploy: VER_MIN = "/*! jQuery Mobile v${VER_OFFICIAL} jquerymobile.com | jquery.org/license */"
# The output folder for the finished files
OUTPUT = compiled
VER = $(shell cat version.txt)
SED_VER = sed "s/@VERSION/${VER}/"
# The name of the files
NAME = jquery.mobile
STRUCTURE = jquery.mobile.structure
deploy: NAME = jquery.mobile-${VER_OFFICIAL}
deploy: STRUCTURE = jquery.mobile.structure-${VER_OFFICIAL}
DIR = jquery.mobile-${VER}
MAX = ${DIR}.js
MIN = ${DIR}.min.js
CSS = ${DIR}.css
CSSMIN = ${DIR}.min.css
# The CSS theme being used
THEME = default
FILES = js/jquery.ui.widget.js \
js/jquery.mobile.widget.js \
js/jquery.mobile.media.js \
js/jquery.mobile.support.js \
js/jquery.mobile.vmouse.js \
js/jquery.mobile.event.js \
js/jquery.mobile.hashchange.js \
js/jquery.mobile.page.js \
js/jquery.mobile.core.js \
js/jquery.mobile.navigation.js \
js/jquery.mobile.fixHeaderFooter.js \
js/jquery.mobile.forms.checkboxradio.js \
js/jquery.mobile.forms.textinput.js \
js/jquery.mobile.forms.select.js \
js/jquery.mobile.buttonMarkup.js \
js/jquery.mobile.forms.button.js \
js/jquery.mobile.forms.slider.js \
js/jquery.mobile.collapsible.js \
js/jquery.mobile.controlGroup.js \
js/jquery.mobile.fieldContain.js \
js/jquery.mobile.listview.js \
js/jquery.mobile.listview.filter.js \
js/jquery.mobile.dialog.js \
js/jquery.mobile.navbar.js \
js/jquery.mobile.grid.js \
js/jquery.mobile.init.js
RUN_JS = @@java -XX:ReservedCodeCacheSize=64m -classpath build/js.jar:build/google-compiler-20111003.jar org.mozilla.javascript.tools.shell.Main
CSSFILES = themes/default/jquery.mobile.theme.css \
themes/default/jquery.mobile.core.css \
themes/default/jquery.mobile.transitions.css \
themes/default/jquery.mobile.grids.css \
themes/default/jquery.mobile.headerfooter.css \
themes/default/jquery.mobile.navbar.css \
themes/default/jquery.mobile.button.css \
themes/default/jquery.mobile.collapsible.css \
themes/default/jquery.mobile.controlgroup.css \
themes/default/jquery.mobile.dialog.css \
themes/default/jquery.mobile.forms.checkboxradio.css \
themes/default/jquery.mobile.forms.fieldcontain.css \
themes/default/jquery.mobile.forms.select.css \
themes/default/jquery.mobile.forms.textinput.css \
themes/default/jquery.mobile.listview.css \
themes/default/jquery.mobile.forms.slider.css
all: mobile min css cssmin
clean:
@@rm -rf ${DIR}*
# Build Targets
css:
@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSS}
@@cat ${CSSFILES} >> ${CSS}
# When no build target is specified, all gets ran
all: init css js zip notify
cssmin: css
@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${CSSMIN}
@@java -jar build/yuicompressor-2.4.4.jar --type css ${CSS} >> ${CSSMIN}
mobile:
@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MAX}
@@cat ${FILES} >> ${MAX}
# Build and minify the CSS files
css: init
# Build the CSS file with the theme included
${RUN_JS} \
external/r.js/dist/r.js \
-o cssIn=css/themes/default/jquery.mobile.css \
out=${OUTPUT}/${NAME}.compiled.css
@@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${NAME}.css
@@cat ${OUTPUT}/${NAME}.compiled.css >> ${OUTPUT}/${NAME}.css
@@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.css
@@java -XX:ReservedCodeCacheSize=64m \
-jar build/yuicompressor-2.4.6.jar \
--type css ${OUTPUT}/${NAME}.compiled.css >> ${OUTPUT}/${NAME}.min.css
@@rm ${OUTPUT}/${NAME}.compiled.css
# Build the CSS Structure-only file
${RUN_JS} \
external/r.js/dist/r.js \
-o cssIn=css/structure/jquery.mobile.structure.css \
out=${OUTPUT}/${STRUCTURE}.compiled.css
@@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${STRUCTURE}.css
@@cat ${OUTPUT}/${STRUCTURE}.compiled.css >> ${OUTPUT}/${STRUCTURE}.css
# ..... and then minify it
@@echo ${VER_MIN} > ${OUTPUT}/${STRUCTURE}.min.css
@@java -XX:ReservedCodeCacheSize=64m \
-jar build/yuicompressor-2.4.6.jar \
--type css ${OUTPUT}/${STRUCTURE}.compiled.css >> ${OUTPUT}/${STRUCTURE}.min.css
@@rm ${OUTPUT}/${STRUCTURE}.compiled.css
# ..... and then copy in the images
@@cp -R css/themes/${THEME}/images ${OUTPUT}/
# Css portion is complete.
# -------------------------------------------------
min: mobile
@@head -8 js/jquery.mobile.core.js | ${SED_VER} > ${MIN}
@@java -jar build/google-compiler-20100917.jar --js ${MAX} --warning_level QUIET --js_output_file ${MIN}.tmp
@@cat ${MIN}.tmp >> ${MIN}
@@rm -f ${MIN}.tmp
zip: clean min cssmin
@@mkdir -p ${DIR}
@@cp ${DIR}*.js ${DIR}/
@@cp ${DIR}*.css ${DIR}/
@@cp -R themes/default/images ${DIR}/
@@zip -r ${DIR}.zip ${DIR}
docs: init
# Create the Demos/Docs/Tests/Tools
# ... Build the docs bundle
${RUN_JS} \
external/r.js/dist/r.js \
-o build/docs.build.js \
dir=../tmp/${NAME}
# ... Prepend versioned license
@@cat LICENSE-INFO.txt | ${VER} > tmp/${NAME}/LICENSE-INFO.txt
@@cat tmp/${NAME}/LICENSE-INFO.txt | cat - tmp/${NAME}/js/jquery.mobile.docs.js > tmp/${NAME}/js/jquery.mobile.docs.js.tmp
@@cat tmp/${NAME}/js/jquery.mobile.docs.js.tmp | ${SED_VER_API} > tmp/${NAME}/js/jquery.mobile.docs.js
@@cat tmp/${NAME}/LICENSE-INFO.txt | cat - tmp/${NAME}/css/themes/default/${NAME}.css > tmp/${NAME}/css/themes/default/${NAME}.css.tmp
@@mv tmp/${NAME}/css/themes/default/${NAME}.css.tmp tmp/${NAME}/css/themes/default/${NAME}.css
# ... Move and zip up the the whole folder
@@cd tmp; zip -rq ../${OUTPUT}/${NAME}.docs.zip ${NAME}
@@mv tmp/${NAME} ${OUTPUT}/demos
# Finish by removing the temporary files
@@rm -rf tmp
# -------------------------------------------------
# Used by the jQuery team to deploy a build to the CDN
deploy: zip
# Deploy to CDN
@@mv ${DIR} ${VER}
@@cp ${DIR}.zip ${VER}/
@@scp -r ${VER} jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/
@@mv ${VER} ${DIR}
# Deploy Demos
@@mkdir -p ${VER}
@@cp -r index.html themes experiments docs ${VER}/
# Create the output directory. This is in a separate step so its not dependant on other targets
init:
# -------------------------------------------------
# Building jQuery Mobile in the "${OUTPUT}" folder
@@rm -rf ${OUTPUT}
@@rm -rf tmp
@@mkdir -p ${OUTPUT}
# -------------------------------------------------
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../../js|src="js|g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../../js|src="js|g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="../js|src="js|g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|media="only all"||g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet" href="../../../|rel="stylesheet" href="|g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet" href="../../|rel="stylesheet" href="|g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|rel="stylesheet" href="../|rel="stylesheet" href="|g' {} \;
# Build and minify the JS files
js: init
# Build the JavaScript file
${RUN_JS} \
external/r.js/dist/r.js \
-o baseUrl="js" \
include=jquery.mobile \
exclude=jquery,../external/requirejs/order,../external/requirejs/text,../external/requirejs/text!../version.txt \
out=${OUTPUT}/${NAME}.compiled.js \
pragmasOnSave.jqmBuildExclude=true \
wrap.startFile=build/wrap.start \
wrap.endFile=build/wrap.end \
findNestedDependencies=true \
skipModuleInsertion=true \
optimize=none
@@cat LICENSE-INFO.txt | ${VER} > ${OUTPUT}/${NAME}.js
@@cat ${OUTPUT}/${NAME}.compiled.js | ${SED_VER_API} >> ${OUTPUT}/${NAME}.js
@@rm ${OUTPUT}/${NAME}.compiled.js
# ..... and then minify it
@@echo ${VER_MIN} > ${OUTPUT}/${NAME}.min.js
@@java -XX:ReservedCodeCacheSize=64m \
-jar build/google-compiler-20111003.jar \
--js ${OUTPUT}/${NAME}.js \
--js_output_file ${OUTPUT}/${NAME}.compiled.js
@@cat ${OUTPUT}/${NAME}.compiled.js >> ${OUTPUT}/${NAME}.min.js
@@rm ${OUTPUT}/${NAME}.compiled.js
# -------------------------------------------------
# Output a message saying the process is complete
notify: init
@@echo "The files have been built and are in: " $$(pwd)/${OUTPUT}
# -------------------------------------------------
# Zip up the jQm files without docs
zip: init css js
# Packaging up the files into a zip archive
@@mkdir tmp
@@cp -R ${OUTPUT} tmp/${NAME}
# ... And remove the Zipped docs so they aren't included twice (for deploy scripts)
@@rm -rf tmp/${NAME}/${NAME}.docs.zip
@@cd tmp; zip -rq ../${OUTPUT}/${NAME}.zip ${NAME}
@@rm -rf tmp
# -------------------------------------------------
# -------------------------------------------------
# -------------------------------------------------
# -------------------------------------------------
#
# For jQuery Team Use Only
#
# -------------------------------------------------
# Push the latest git version to the CDN. This is done on a post commit hook
latest: init css docs js zip
# Time to put these on the CDN
@@scp -qr ${OUTPUT}/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/latest/
# -------------------------------------------------
# Build the nightly backups. This is done on a server cronjob
nightlies: init css js docs zip
# Time to put these on the CDN
@@mkdir -p tmp/nightlies
@@mv ${OUTPUT} tmp/nightlies/$$(date "+%Y%m%d")
@@scp -qr tmp/nightlies/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/nightlies/
# Do some cleanup to wrap it up
@@rm -rf tmp
# -------------------------------------------------
# Deploy a finished release. This is manually done.
deploy: init css js docs zip
# Deploying all the files to the CDN
@@mkdir tmp
@@cp -R ${OUTPUT} tmp/${VER_OFFICIAL}
@@scp -qr tmp/* jqadmin@code.origin.jquery.com:/var/www/html/code.jquery.com/mobile/
@@rm -rf tmp/${VER_OFFICIAL}
@@mv ${OUTPUT}/demos tmp/${VER_OFFICIAL}
# Create the Demos/Docs/Tests/Tools for jQueryMobile.com
# ... By first replacing the paths
# TODO update jQuery Version replacement on deploy
@@find tmp/${VER_OFFICIAL} -type f \
\( -name '*.html' -o -name '*.php' \) \
-exec perl -pi -e \
's|src="(.*)${NAME}.min.js"|src="//code.jquery.com/mobile/${VER_OFFICIAL}/${NAME}.min.js"|g;s|href="(.*)${NAME}.min.css"|href="//code.jquery.com/mobile/${VER_OFFICIAL}/${NAME}.min.css"|g;s|src="(.*)jquery.js"|src="//code.jquery.com/jquery-1.7.1.min.js"|g' {} \;
# ... So they can be copied to jquerymobile.com
@@scp -qr tmp/* jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/
# Do some cleanup to wrap it up
@@rm -rf tmp
@@rm -rf ${OUTPUT}
# -------------------------------------------------
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|href="themes/default/"|href="http://code.jquery.com/mobile/${VER}/${DIR}.min.css"|g' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/jquery.js"|src="http://code.jquery.com/jquery-1.5.min.js"|' {} \;
@@find ${VER} -type f -name '*.html' -exec sed -i "" -e 's|src="js/"|src="http://code.jquery.com/mobile/${VER}/${DIR}.min.js"|g' {} \;
@@scp -r ${VER} jqadmin@jquerymobile.com:/srv/jquerymobile.com/htdocs/demos/

101
README.md
View file

@ -1,107 +1,50 @@
jQuery Mobile Framework
=======================
[Official Site: http://jquerymobile.com](http://jquerymobile.com)
=====
http://jquerymobile.com
Demos and documentation
===================================
http://jquerymobile.com/test/
[Demos and Documentation](http://jquerymobile.com/test/)
How to build your own jQuery Mobile CSS and JS files
====================================================
===================================
Clone this repo and build the js and css files (you'll need Git and Make installed):
git clone git://github.com/jquery/jquery-mobile.git
cd jquery-mobile
make
A full version and a minified version of the jQuery Mobile JavaScript and CSS files will be created
in a folder named "compiled". There is also now a Structure only css file so you can add your own theme on top of it.
How to build a self-contained version of the Docs/Demos
=======================================================
Once you have your own cloned repo on your computer:
make docs
The docs will be built and available in the compiled/demos folder. You can move this folder to your web server or
other location. It has no dependencies on anything other than a basic HTML web server.
Two complete versions, one minified, one not, of jQuery Mobile js and css files will be created.
Submitting bugs
===============
If you think you've found a bug, please report it by following these instructions:
===================================
1. Visit the [Issue tracker: https://github.com/jquery/jquery-mobile/issues](https://github.com/jquery/jquery-mobile/issues)
2. Create an issue explaining the problem and expected result
- Be sure to include any relevant information for reproducing the issue
- Include information such as:
* Browser/device (with version #)
* The version of the jQuery Mobile code you're running
* If you are running from a git version, include the date and/or hash number
- Make sure that the bug still exists at http://jquerymobile.com/test/ as it may be fixed already
- You can use the CDN hosted JS and CSS files to test in your own code by using:
* [JS](http://code.jquery.com/mobile/latest/jquery.mobile.min.js)
* [CSS](http://code.jquery.com/mobile/latest/jquery.mobile.min.css)
- Include a link to some code of the bug in action. You can use either of these services to host your code
* [jsbin](http://jsbin.com)
* [jsfiddle](http://jsfiddle.net)
3. Submit the issue.
If you think you've found a bug, please visit the Issue tracker (https://github.com/jquery/jquery-mobile/issues) and create an issue explaining the problem and expected result. Be sure to include any relevant information for reproducing the issue, such as the browser/device (with version #), and the version of the jQuery Mobile code you're running. It also helps a lot to make sure that the bug still exists on jquerymobile.com/test/, as it's possible we may have fixed it already!
Recommended: [JS Bin issue template with instructions](http://jsbin.com/obowiw/edit)
Submitting patches
==================
To contribute code and bug fixes to jQuery Mobile: fork this project on Github, make changes to the code in your fork,
and then send a "pull request" to notify the team of updates that are ready to be reviewed for inclusion.
===================================
To contribute code and bug fixes to jQuery Mobile: fork this project on Github, make changes to the code in your fork, and then send a
"pull request" to notify the team of updates that are ready to be reviewed for inclusion.
Detailed instructions can be found at [jQuery Mobile Patching](https://gist.github.com/1294035)
Running the jQuery Mobile demos & docs locally
==============================================
To preview locally, you'll need to clone a local copy of this repository and point your Apache & PHP webserver at its
root directory (a webserver is required, as PHP and .htaccess are used for combining development files).
===================================
If you don't currently have a webserver running locally, there are a few options.
To preview locally, you'll need to clone a local copy of this repository and point your Apache & PHP webserver at its root directory (a webserver is required, as PHP and .htaccess are used for combining development files).
If you're on a Mac, you can try dropping jQuery Mobile into your sites folder and turning on Web Sharing via System
Prefs. From there, you'll find a URL where you can browse folders in your sites directory from a browser.
If you don't currently have a webserver running locally, there are a few options. If you're on a Mac, you can try dropping jQuery Mobile into your sites folder and turning on Web Sharing via System Prefs. From there, you'll find a URL where you can browse folders in your sites directory from a browser.
Another quick way to get up and running is to download and install MAMP for Mac OSX. Once installed, just open MAMP,
click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a
browser to http://localhost:8888 to preview the code.
Another quick way to get up and running is to download and install MAMP for Mac OSX. Once installed, just open MAMP, click preferences, go to the Apache tab, and select your local jQuery Mobile folder as the root. Then you can open a browser to http://localhost:8888 to preview the code.
Another alternative is XAMPP (Mac, Windows). You need to actually modify Apache's httpd.conf to point to your checkout:
[Instructions](http://www.apachefriends.org/en/xampp.html)
Another alternative is XAMPP, which is also available for Windows, though you need to actually modify Apache's httpd.conf to point to your checkout: http://www.apachefriends.org/en/xampp.html
You need the Rewrite (mod_rewrite.so), Expire (mod_expires.so) and Header (mod_headers.so) modules loaded.
You need the following Apache modules loaded:
* Rewrite (mod\_rewrite.so)
* Expire (mod\_expires.so)
* Header (mod\_headers.so)
Alternatively, with the addition of async loading, you can use the python simple http server from the project root:
$ python -m SimpleHTTPServer 8000
And in your browser visit [localhost:8000](http://localhost:8000).
AMD Support in Development
==========================
Please bear in mind that async loading is not supported for production and is primarily used for the project's build process. As a result developers should expect an initial flash of unstyled content, which will not occur when the library is compiled.
If you find dependency bugs when using the async loading support for development please log them in the github issue tracker.
Building With A Custom Theme
============================
To use a custom theme in your own build, you'll need Make installed. You can find the themes in the CSS/Themes folder.
To create a new theme:
1. Copy the `Default` folder from CSS/Themes to a new folder in the same location. The name of the folder will be the
theme's name. For testing locally, make sure the index.php file is copied as well.
2. Edit the `jquery.mobile.theme.css` file so it contains your custom fonts and colors.
3. Once you are done editing your files and saving them, open a terminal.
4. Navigate to the jQuery-Mobile folder's root.
5. Run the following command to build jQuery-Mobile (THEME is the name of the folder for your theme from step 1.):
make THEME=YourThemeName
6. The compiled files will be located in the "compiled" folder in the root of jQuery-Mobile.

65
build.xml Normal file
View file

@ -0,0 +1,65 @@
<?xml version="1.0"?>
<project name="jquery-mobile" basedir="." default="merge">
<property name="cssdir" location="themes/default"/>
<property name="jsdir" location="js"/>
<property name="css-sources" value="jquery.mobile.theme.css,
jquery.mobile.core.css,
jquery.mobile.transitions.css,
jquery.mobile.grids.css,
jquery.mobile.headerfooter.css,
jquery.mobile.navbar.css,
jquery.mobile.button.css,
jquery.mobile.collapsible.css,
jquery.mobile.controlgroup.css,
jquery.mobile.dialog.css,
jquery.mobile.forms.checkboxradio.css,
jquery.mobile.forms.fieldcontain.css,
jquery.mobile.forms.select.css,
jquery.mobile.forms.textinput.css,
jquery.mobile.listview.css,
jquery.mobile.forms.slider.css"/>
<property name="js-sources" value="jquery.ui.widget.js,
jquery.mobile.widget.js,
jquery.mobile.media.js,
jquery.mobile.support.js,
jquery.mobile.vmouse.js,
jquery.mobile.event.js,
jquery.mobile.hashchange.js,
jquery.mobile.page.js,
jquery.mobile.core.js,
jquery.mobile.navigation.js,
jquery.mobile.fixHeaderFooter.js,
jquery.mobile.forms.checkboxradio.js,
jquery.mobile.forms.textinput.js,
jquery.mobile.forms.select.js,
jquery.mobile.buttonMarkup.js,
jquery.mobile.forms.button.js,
jquery.mobile.forms.slider.js,
jquery.mobile.collapsible.js,
jquery.mobile.controlGroup.js,
jquery.mobile.fieldContain.js,
jquery.mobile.listview.js,
jquery.mobile.listview.filter.js,
jquery.mobile.dialog.js,
jquery.mobile.navbar.js,
jquery.mobile.grid.js,
jquery.mobile.init.js"/>
<target name="merge">
<antcall target="merge_css" />
<antcall target="merge_js" />
</target>
<target name="merge_css">
<concat destfile="combine/jquery.mobile.css">
<filelist dir="${cssdir}" files="${css-sources}"/>
</concat>
</target>
<target name="merge_js">
<concat destfile="combine/jquery.mobile.js">
<filelist dir="${jsdir}" files="${js-sources}"/>
</concat>
</target>
</project>

View file

@ -1,39 +0,0 @@
({
appDir: "..",
baseUrl: "js",
dir: "../compiled/demos",
optimize: "none",
//Finds require() dependencies inside a require() or define call.
findNestedDependencies: true,
//If skipModuleInsertion is false, then files that do not use define()
//to define modules will get a define() placeholder inserted for them.
//Also, require.pause/resume calls will be inserted.
//Set it to true to avoid this. This is useful if you are building code that
//does not use require() in the built project or in the JS files, but you
//still want to use the optimization tool from RequireJS to concatenate modules
//together.
skipModuleInsertion: true,
modules: [
{
name: "jquery.mobile.docs",
exclude: [ "jquery", "../external/requirejs/order" , "../external/requirejs/text", "../external/requirejs/text!../version.txt" ]
}
],
pragmasOnSave: {
jqmBuildExclude: true
},
//File paths are relative to the build file, or if running a commmand
//line build, the current directory.
wrap: {
startFile: "wrap.start",
endFile: "wrap.end"
},
dirExclusionRegExp: /^\.|^build|^compiled/
})

Binary file not shown.

Binary file not shown.

Binary file not shown.

View file

@ -1,2 +0,0 @@
}));

View file

@ -1,12 +0,0 @@
(function ( root, doc, factory ) {
if ( typeof define === "function" && define.amd ) {
// AMD. Register as an anonymous module.
define( [ "jquery" ], function ( $ ) {
factory( $, root, doc );
return $.mobile;
});
} else {
// Browser globals
factory( root.jQuery, root, doc );
}
}( this, document, function ( $, window, document, undefined ) {

View file

@ -1,22 +1,18 @@
<?php
// Get the filetype and array of files
if ( ! isset($type) || ! isset($files) )
if (!isset($type) || !isset($elements))
{
echo '$type and $files must be specified!';
echo "\$type and \$elements must be specified!";
exit;
}
$contents = '';
// Loop through the files adding them to a string
foreach ( $files as $file ) {
$contents .= file_get_contents($file). "\n\n";
reset($elements);
while (list(,$element) = each($elements)) {
$contents .= "\n\n" . file_get_contents($element);
}
// Set the content type, filesize and an expiration so its not cached
header('Content-Type: ' . $type);
header('Content-Length: ' . strlen($contents));
header('Expires: Fri, 01 Jan 2010 05:00:00 GMT');
// Deliver the file
header("Content-Type: " . $type);
header("Content-Length: " . strlen($contents));
echo $contents;
?>

View file

@ -1,69 +0,0 @@
/* some unsets - more probably needed */
.ui-mobile, .ui-mobile body { height: 99.9%; }
.ui-mobile fieldset, .ui-page { padding: 0; margin: 0; }
.ui-mobile a img, .ui-mobile fieldset { border-width: 0; }
/* responsive page widths */
.ui-mobile-viewport { margin: 0; overflow-x: visible; -webkit-text-size-adjust: none; -ms-text-size-adjust:none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/* Issue #2066 */
body.ui-mobile-viewport,
div.ui-mobile-viewport { overflow-x: hidden; }
/* "page" containers - full-screen views, one should always be in view post-pageload */
.ui-mobile [data-role=page], .ui-mobile [data-role=dialog], .ui-page { top: 0; left: 0; width: 100%; min-height: 100%; position: absolute; display: none; border: 0; }
.ui-mobile .ui-page-active { display: block; overflow: visible; }
/* on ios4, setting focus on the page element causes flashing during transitions when there is an outline, so we turn off outlines */
.ui-page { outline: none; }
/*orientations from js are available */
@media screen and (orientation: portrait){
.ui-mobile, .ui-mobile .ui-page { min-height: 420px; }
}
@media screen and (orientation: landscape){
.ui-mobile, .ui-mobile .ui-page { min-height: 300px; }
}
/* loading screen */
.ui-loading .ui-loader { display: block; }
.ui-loader { display: none; z-index: 9999999; position: fixed; top: 50%; box-shadow: 0 1px 1px -1px #fff; left: 50%; border:0; }
.ui-loader-default { background: none; opacity: .18; width: 46px; height: 46px; margin-left: -18px; margin-top: -18px; padding: 1px; -webkit-border-radius: 36px; -moz-border-radius: 36px; border-radius: 36px; }
.ui-loader-verbose { width: 200px; opacity: .88; height: auto; margin-left: -110px; padding: 10px; }
.ui-loader-default h1 { font-size: 0; width: 0; height: 0; overflow: hidden; }
.ui-loader-verbose h1 { font-size: 16px; margin: 0; text-align: center; }
.ui-loader .ui-icon { display: block; margin: 0; width: 46px; height: 46px; background-color: transparent; }
.ui-loader-verbose .ui-icon { margin: 0 auto 10px; }
.ui-loader-textonly { padding: 15px; margin-left: -115px; }
.ui-loader-textonly .ui-icon { display: none; }
.ui-loader-fakefix { position: absolute; }
/*fouc*/
.ui-mobile-rendering > * { visibility: hidden; }
/*headers, content panels*/
.ui-bar, .ui-body { position: relative; padding: .4em 15px; overflow: hidden; display: block; clear:both; }
.ui-bar { font-size: 16px; margin: 0; }
.ui-bar h1, .ui-bar h2, .ui-bar h3, .ui-bar h4, .ui-bar h5, .ui-bar h6 { margin: 0; padding: 0; font-size: 16px; display: inline-block; }
.ui-header, .ui-footer { position: relative; overflow: hidden; width: 100%; border-left-width: 0; border-right-width: 0; }
.ui-header .ui-btn-left { position: absolute; left: 10px; top: .4em; }
.ui-header .ui-btn-right { position: absolute; right: 10px; top: .4em; }
.ui-header .ui-title, .ui-footer .ui-title { min-height: 1.1em; text-align: center; font-size: 16px; display: block; margin: .6em 30% .8em; padding: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; outline: 0 !important; }
.ui-footer .ui-title { margin: .6em 15px .8em; }
/*content area*/
.ui-content { border-width: 0; overflow: visible; overflow-x: hidden; padding: 15px; }
/* icons sizing */
.ui-icon { width: 18px; height: 18px; }
/* fluid images */
.ui-mobile img {
max-width: 100%;
}
/* non-js content hiding */
.ui-nojs { position: absolute; left: -9999px; }
/* accessible content hiding */
.ui-hide-label label,
.ui-hidden-accessible { position: absolute !important; left: -9999px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); }

View file

@ -1,28 +0,0 @@
.ui-dialog { width: 92.5%; max-width: 500px; margin: 10% auto 15px auto; padding: 0; }
.ui-dialog-page {
background: none !important; /* this is to ensure that dialog theming does not apply (by default at least) on the page div */
}
.ui-dialog .ui-header {
margin-top: 15%;
}
.ui-dialog .ui-header,
.ui-dialog .ui-content,
.ui-dialog .ui-footer {
display: block;
position: relative;
width: auto;
}
.ui-dialog .ui-header,
.ui-dialog .ui-footer {
z-index: 10;
padding: 0;
}
.ui-dialog .ui-footer {
padding: 0 15px;
}
.ui-dialog .ui-content {
padding: 15px;
}
.ui-dialog {
margin-top: -15px;
}

View file

@ -1,43 +0,0 @@
/* fixed page header & footer configuration */
.ui-header-fixed,
.ui-footer-fixed {
left: 0;
right: 0;
position: fixed;
z-index: 1000;
-webkit-transform: translateZ(0); /* Force header/footer rendering to go through the same rendering pipeline as native page scrolling. */
}
.ui-header-fixed {
top: 0;
}
.ui-footer-fixed {
bottom: 0;
}
.ui-header-fullscreen,
.ui-footer-fullscreen {
opacity: .9;
}
.ui-page-header-fixed {
padding-top: 2.5em;
}
.ui-page-footer-fixed {
padding-bottom: 3em;
}
.ui-page-header-fullscreen .ui-content,
.ui-page-footer-fullscreen .ui-content {
padding: 0;
}
.ui-fixed-hidden {
position: absolute;
}
.ui-page-header-fullscreen .ui-fixed-hidden,
.ui-page-footer-fullscreen .ui-fixed-hidden {
left: -99999em;
}
.ui-footer-duplicate {
display: none;
}
.ui-header-fixed .ui-btn,
.ui-footer-fixed .ui-btn {
z-index: 10;
}

View file

@ -1,5 +0,0 @@
.ui-field-contain, fieldset.ui-field-contain { padding: .8em 0; margin: 0; border-width: 0 0 1px 0; overflow: visible; }
.ui-field-contain:first-child { border-top-width: 0; }
@media all and (min-width: 450px){
.ui-field-contain, .ui-mobile fieldset.ui-field-contain { border-width: 0; padding: 0; margin: 1em 0; }
}

View file

@ -1,27 +0,0 @@
label.ui-slider { font-size: 16px; line-height: 1.4; font-weight: normal; margin: 0 0 .3em; display: block; }
input.ui-slider-input,
.ui-field-contain input.ui-slider-input { display: inline-block; width: 50px; }
select.ui-slider-switch { display: none; }
div.ui-slider { position: relative; display: inline-block; overflow: visible; height: 15px; padding: 0; margin: 0 2% 0 20px; top: 4px; width: 65%; }
div.ui-slider-switch { width: 99.8%; }
.ui-field-contain div.ui-slider-switch { width: 50%; }
a.ui-slider-handle { position: absolute; z-index: 1; top: 50%; width: 28px; height: 28px; margin-top: -15px; margin-left: -15px; outline: 0; }
a.ui-slider-handle .ui-btn-inner { padding-left: 0; padding-right: 0; }
@media all and (min-width: 480px){
.ui-field-contain label.ui-slider { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0; }
.ui-field-contain div.ui-slider { width: 43%; }
.ui-field-contain div.ui-slider-switch { width: 35%; }
}
div.ui-slider-switch { height: 32px; overflow: hidden; margin-left: 0; }
div.ui-slider-inneroffset { margin-left: 50%; position: absolute; top: 1px; height: 100%; width: 50%; }
a.ui-slider-handle-snapping { -webkit-transition: left 70ms linear; -moz-transition: left 70ms linear; }
div.ui-slider-labelbg { position: absolute; top:0; margin: 0; border-width: 0; }
div.ui-slider-switch div.ui-slider-labelbg-a { width: 60%; height: 100%; left: 0; }
div.ui-slider-switch div.ui-slider-labelbg-b { width: 60%; height: 100%; right: 0; }
.ui-slider-switch-a div.ui-slider-labelbg-a, .ui-slider-switch-b div.ui-slider-labelbg-b { z-index: -1; }
.ui-slider-switch-a div.ui-slider-labelbg-b, .ui-slider-switch-b div.ui-slider-labelbg-a { z-index: 0; }
div.ui-slider-switch a.ui-slider-handle { z-index: 1; width: 100%; height: 30px; margin-top: -17px; margin-left: -100%; }
span.ui-slider-label { width: 100%; position: absolute; height: 32px; font-size: 16px; text-align: center; line-height: 1.8; background: none; border-color: transparent; }
span.ui-slider-label-a { left: -100%; margin-right: -1px }
span.ui-slider-label-b { right: -100%; margin-left: -1px }

View file

@ -1,22 +0,0 @@
label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }
input.ui-input-text, textarea.ui-input-text { background-image: none; padding: .4em; line-height: 1.4; font-size: 16px; display: block; width: 97%; outline: 0; }
input.ui-input-text { -webkit-appearance: none; }
textarea.ui-input-text { height: 50px; -webkit-transition: height 200ms linear; -moz-transition: height 200ms linear; -o-transition: height 200ms linear; transition: height 200ms linear; }
.ui-input-search { padding: 0 30px; background-image: none; position: relative; }
.ui-icon-searchfield:after { position: absolute; left: 7px; top: 50%; margin-top: -9px; content: ""; width: 18px; height: 18px; opacity: .5; }
.ui-input-search input.ui-input-text { border: none; width: 98%; padding: .4em 0; margin: 0; display: block; background: transparent none; outline: 0 !important; }
.ui-input-search .ui-input-clear { position: absolute; right: 0; top: 50%; margin-top: -13px; }
.ui-input-search .ui-input-clear-hidden { display: none; }
/* orientation adjustments - incomplete!*/
@media all and (min-width: 450px){
.ui-field-contain label.ui-input-text { vertical-align: top; display: inline-block; width: 20%; margin: 0 2% 0 0 }
.ui-field-contain input.ui-input-text,
.ui-field-contain textarea.ui-input-text,
.ui-field-contain .ui-input-search { width: 60%; display: inline-block; }
.ui-field-contain .ui-input-search { width: 50%; }
.ui-hide-label input.ui-input-text,
.ui-hide-label textarea.ui-input-text,
.ui-hide-label .ui-input-search { padding: .4em; width: 97%; }
.ui-input-search input.ui-input-text { width: 98%; /*echos rule from above*/ }
}

View file

@ -1,23 +0,0 @@
@import url( "jquery.mobile.core.css" );
@import url( "jquery.mobile.transitions.css" );
@import url( "jquery.mobile.transitions.fade.css" );
@import url( "jquery.mobile.transitions.pop.css" );
@import url( "jquery.mobile.transitions.slide.css" );
@import url( "jquery.mobile.transitions.slidedown.css" );
@import url( "jquery.mobile.transitions.slideup.css" );
@import url( "jquery.mobile.transitions.flip.css" );
@import url( "jquery.mobile.transitions.turn.css" );
@import url( "jquery.mobile.transitions.flow.css" );
@import url( "jquery.mobile.grids.css" );
@import url( "jquery.mobile.fixedToolbar.css" );
@import url( "jquery.mobile.navbar.css" );
@import url( "jquery.mobile.button.css" );
@import url( "jquery.mobile.collapsible.css" );
@import url( "jquery.mobile.controlgroup.css" );
@import url( "jquery.mobile.dialog.css" );
@import url( "jquery.mobile.forms.checkboxradio.css" );
@import url( "jquery.mobile.forms.fieldcontain.css" );
@import url( "jquery.mobile.forms.select.css" );
@import url( "jquery.mobile.forms.textinput.css" );
@import url( "jquery.mobile.listview.css" );
@import url( "jquery.mobile.forms.slider.css" );

View file

@ -1,21 +0,0 @@
/* Transitions originally inspired by those from jQtouch, nice work, folks */
.ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page {
width: 100%;
height: 100%;
overflow: hidden;
}
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
-moz-animation-timing-function: ease-out;
-moz-animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
-moz-animation-timing-function: ease-in;
-moz-animation-duration: 225;
}

View file

@ -1,35 +0,0 @@
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
.fade.out {
opacity: 0;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
}
.fade.in {
opacity: 1;
-webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
-moz-animation-duration: 225ms;
-moz-animation-name: fadein;
}

View file

@ -1,79 +0,0 @@
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-flip {
-webkit-perspective: 1000;
-moz-perspective: 1000;
position: absolute;
}
.flip {
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-backface-visibility:hidden;
-moz-transform:translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-moz-animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
-moz-animation-name: flipintoright;
-moz-animation-duration: 225ms;
}
.flip.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
}
.flip.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}

View file

@ -1,89 +0,0 @@
/* flow transition */
.flow {
-webkit-transform-origin: 50% 30%;
-moz-transform-origin: 50% 30%;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,.4);
-moz-box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.ui-dialog-page.flow {
-webkit-transform-origin: none;
-moz-transform-origin: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
.flow.out {
-webkit-transform: translateX(-100%) scale(.7);
-webkit-animation-name: flowouttoleft;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(-100%) scale(.7);
-moz-animation-name: flowouttoleft;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
}
.flow.in {
-webkit-transform: translateX(0) scale(1);
-webkit-animation-name: flowinfromright;
-webkit-animation-timing-function: ease;
-webkit-animation-duration: 350ms;
-moz-transform: translateX(0) scale(1);
-moz-animation-name: flowinfromright;
-moz-animation-timing-function: ease;
-moz-animation-duration: 350ms;
}
.flow.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: flowouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: flowouttoright;
}
.flow.in.reverse {
-webkit-animation-name: flowinfromleft;
-moz-animation-name: flowinfromleft;
}
@-webkit-keyframes flowouttoleft {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(-100%) scale(.7); }
}
@-moz-keyframes flowouttoleft {
0% { -moz-transform: translateX(0) scale(1); }
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(-100%) scale(.7); }
}
@-webkit-keyframes flowouttoright {
0% { -webkit-transform: translateX(0) scale(1); }
60%, 70% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(100%) scale(.7); }
}
@-moz-keyframes flowouttoright {
0% { -moz-transform: translateX(0) scale(1); }
60%, 70% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(100%) scale(.7); }
}
@-webkit-keyframes flowinfromleft {
0% { -webkit-transform: translateX(-100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromleft {
0% { -moz-transform: translateX(-100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}
@-webkit-keyframes flowinfromright {
0% { -webkit-transform: translateX(100%) scale(.7); }
30%, 40% { -webkit-transform: translateX(0) scale(.7); }
100% { -webkit-transform: translateX(0) scale(1); }
}
@-moz-keyframes flowinfromright {
0% { -moz-transform: translateX(100%) scale(.7); }
30%, 40% { -moz-transform: translateX(0) scale(.7); }
100% { -moz-transform: translateX(0) scale(1); }
}

View file

@ -1,78 +0,0 @@
.pop {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
}
.pop.in {
-webkit-transform: scale(1);
-moz-transform: scale(1);
opacity: 1;
-webkit-animation-name: popin;
-moz-animation-name: popin;
-webkit-animation-duration: 350ms;
-moz-animation-duration: 350ms;
}
.pop.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
opacity: 0;
-webkit-animation-duration: 100ms;
-moz-animation-duration: 100ms;
}
.pop.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
}
.pop.out.reverse {
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-webkit-animation-name: popout;
-moz-animation-name: popout;
}
@-webkit-keyframes popin {
from {
-webkit-transform: scale(.8);
opacity: 0;
}
to {
-webkit-transform: scale(1);
opacity: 1;
}
}
@-moz-keyframes popin {
from {
-moz-transform: scale(.8);
opacity: 0;
}
to {
-moz-transform: scale(1);
opacity: 1;
}
}
@-webkit-keyframes popout {
from {
-webkit-transform: scale(1);
opacity: 1;
}
to {
-webkit-transform: scale(.8);
opacity: 0;
}
}
@-moz-keyframes popout {
from {
-moz-transform: scale(1);
opacity: 1;
}
to {
-moz-transform: scale(.8);
opacity: 0;
}
}

View file

@ -1,54 +0,0 @@
/* slide transition */
.slide.out {
-webkit-transform: translateX(-100%);
-webkit-animation-name: slideouttoleft;
-moz-transform: translateX(-100%);
-moz-animation-name: slideouttoleft;
-webkit-animation-duration: 225ms;
-moz-animation-duration: 225ms;
}
.slide.in {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
.slide.out.reverse {
-webkit-transform: translateX(100%);
-webkit-animation-name: slideouttoright;
-moz-transform: translateX(100%);
-moz-animation-name: slideouttoright;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
.slide.in.reverse {
-webkit-transform: translateX(0);
-webkit-animation-name: fadein;
-moz-transform: translateX(0);
-moz-animation-name: fadein;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
@-webkit-keyframes slideouttoleft {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(-100%); }
}
@-moz-keyframes slideouttoleft {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideouttoright {
from { -webkit-transform: translateX(0); }
to { -webkit-transform: translateX(100%); }
}
@-moz-keyframes slideouttoright {
from { -moz-transform: translateX(0); }
to { -moz-transform: translateX(100%); }
}

View file

@ -1,50 +0,0 @@
/* slide down */
.slidedown.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-duration: 100ms;
}
.slidedown.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfromtop;
-moz-transform: translateY(0);
-moz-animation-name: slideinfromtop;
-webkit-animation-duration: 250ms;
-moz-animation-duration: 250ms;
}
.slidedown.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
-webkit-animation-duration: 150ms;
-moz-animation-duration: 150ms;
}
.slidedown.out.reverse {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-webkit-animation-name: slideouttotop;
-moz-animation-name: slideouttotop;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
@-webkit-keyframes slideinfromtop {
from { -webkit-transform: translateY(-100%); }
to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfromtop {
from { -moz-transform: translateY(-100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideouttotop {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(-100%); }
}
@-moz-keyframes slideouttotop {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(-100%); }
}

View file

@ -1,50 +0,0 @@
/* slide up */
.slideup.out {
-webkit-animation-name: fadeout;
-moz-animation-name: fadeout;
-webkit-animation-duration: 100ms;
-moz-animation-duration: 100ms;
}
.slideup.in {
-webkit-transform: translateY(0);
-webkit-animation-name: slideinfrombottom;
-moz-transform: translateY(0);
-moz-animation-name: slideinfrombottom;
-webkit-animation-duration: 250ms;
-moz-animation-duration: 250ms;
}
.slideup.in.reverse {
-webkit-animation-name: fadein;
-moz-animation-name: fadein;
-webkit-animation-duration: 150ms;
-moz-animation-duration: 150ms;
}
.slideup.out.reverse {
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-webkit-animation-name: slideouttobottom;
-moz-animation-name: slideouttobottom;
-webkit-animation-duration: 200ms;
-moz-animation-duration: 200ms;
}
@-webkit-keyframes slideinfrombottom {
from { -webkit-transform: translateY(100%); }
to { -webkit-transform: translateY(0); }
}
@-moz-keyframes slideinfrombottom {
from { -moz-transform: translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideouttobottom {
from { -webkit-transform: translateY(0); }
to { -webkit-transform: translateY(100%); }
}
@-moz-keyframes slideouttobottom {
from { -moz-transform: translateY(0); }
to { -moz-transform: translateY(100%); }
}

View file

@ -1,83 +0,0 @@
/* The properties in this rule are only necessary for the 'flip' transition.
* We need specify the perspective to create a projection matrix. This will add
* some depth as the element flips. The depth number represents the distance of
* the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
* value.
*/
.viewport-turn {
-webkit-perspective: 1000;
-moz-perspective: 1000;
position: absolute;
}
.turn {
-webkit-backface-visibility:hidden;
-webkit-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-webkit-transform-origin: 0;
-moz-backface-visibility:hidden;
-moz-transform:translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
-moz-transform-origin: 0;
}
.turn.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-moz-transform: rotateY(-90deg) scale(.9);
-moz-animation-name: flipouttoleft;
-webkit-animation-duration: 125ms;
-moz-animation-duration: 125ms;
}
.turn.in {
-webkit-animation-name: flipintoright;
-moz-animation-name: flipintoright;
-webkit-animation-duration: 250ms;
-moz-animation-duration: 250ms;
}
.turn.out.reverse {
-webkit-transform: rotateY(90deg) scale(.9);
-webkit-animation-name: flipouttoright;
-moz-transform: rotateY(90deg) scale(.9);
-moz-animation-name: flipouttoright;
}
.turn.in.reverse {
-webkit-animation-name: flipintoleft;
-moz-animation-name: flipintoleft;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@-moz-keyframes flipouttoleft {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipouttoright {
from { -webkit-transform: rotateY(0) ; }
to { -webkit-transform: rotateY(90deg) scale(.9); }
}
@-moz-keyframes flipouttoright {
from { -moz-transform: rotateY(0); }
to { -moz-transform: rotateY(90deg) scale(.9); }
}
@-webkit-keyframes flipintoleft {
from { -webkit-transform: rotateY(-90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoleft {
from { -moz-transform: rotateY(-90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@-moz-keyframes flipintoright {
from { -moz-transform: rotateY(90deg) scale(.9); }
to { -moz-transform: rotateY(0); }
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 7.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 340 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

View file

@ -1,7 +0,0 @@
<?php
$type = 'text/css';
$files = array(
'../../../LICENSE-INFO.txt',
'jquery.mobile.css'
);
$base = dirname(__FILE__);

View file

@ -1,2 +0,0 @@
@import url( "jquery.mobile.theme.css" );
@import url( "../../structure/jquery.mobile.structure.css" );

File diff suppressed because it is too large Load diff

Binary file not shown.

Before

Width:  |  Height:  |  Size: 340 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 269 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

View file

@ -1,7 +0,0 @@
<?php
$type = 'text/css';
$files = array(
'../../../LICENSE-INFO.txt',
'jquery.mobile.css'
);
$base = dirname(__FILE__);

View file

@ -1,2 +0,0 @@
@import url( "jquery.mobile.theme.css" );
@import url( "../../structure/jquery.mobile.structure.css" );

BIN
design/check-radio.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

BIN
design/check-radio.psd Normal file

Binary file not shown.

BIN
design/icon-circle.psd Normal file

Binary file not shown.

BIN
design/icons-36.psd Normal file

Binary file not shown.

BIN
design/icons.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 60 KiB

BIN
design/icons.psd Normal file

Binary file not shown.

File diff suppressed because it is too large Load diff

4314
design/jquery-mobile-logo.ai Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 179 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 493 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 353 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 162 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 171 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 460 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 484 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 152 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 132 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 501 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 155 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 486 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 305 KiB

106047
design/mobile-ui-3aug2010.ai Normal file

File diff suppressed because one or more lines are too long

View file

@ -1,344 +1,18 @@
/* jqm docs css
body { background: #dddddd;}
Beware: lots of last-minute CSS going on in here
cobblers, shoes,
*/
.ui-mobile #jqm-home { background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
.ui-mobile #jqm-homeheader { padding: 55px 25px 0; text-align: center }
.ui-mobile #jqm-homeheader h1 { margin: 0 0 10px; }
.ui-mobile #jqm-homeheader p { margin: 0; }
.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; top: 0; right: 0; }
.ui-mobile .jqm-themeswitcher { clear: both; margin: 20px 0 0; }
body { background: #dddddd; }
.ui-mobile .type-home .ui-content { margin: 0; background: #e5e5e5 url(../images/jqm-sitebg.png) top center repeat-x; }
.ui-mobile #jqm-homeheader { padding: 40px 10px 0; text-align: center; margin: 0 auto; }
.ui-mobile #jqm-homeheader h1 { margin: 0 0 ; }
.ui-mobile #jqm-homeheader p { margin: .3em 0 0; line-height: 1.3; font-size: .9em; font-weight: bold; color: #666; }
.ui-mobile #jqm-version { text-indent: -99999px; background: url(../images/version.png) top right no-repeat; width: 119px; height: 122px; overflow: hidden; position: absolute; z-index: 50; top: -11px; right: 0; }
.ui-mobile .jqm-themeswitcher { margin: 10px 25px 10px 10px; }
h2 { margin:1.2em 0 .4em 0; }
h2 { margin-top:1.5em; }
p code { font-size:1.2em; font-weight:bold; }
h4 code {font-size:1.2em; font-weight:bold; }
dt { font-weight: bold; margin: 2em 0 .5em; }
dt code, dd code { font-size:1.3em; line-height:150%; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
#jqm-homeheader img { width: 235px; }
img { max-width: 100%; }
.ui-header .jqm-home { top:0.65em; }
nav { margin: 0; }
p.intro {
font-size: .96em;
line-height: 1.3;
border-top: 1px solid #75ae18;
border-bottom: 0;
background: none;
margin: 1.5em 0;
padding: 1.5em 15px 0;
}
p.intro strong {
color: #558e08;
}
.footer-docs {
padding: 5px 0;
}
.footer-docs p {
float: left;
margin-left:15px;
font-weight: normal;
font-size: .9em;
}
.type-interior .content-secondary {
border-right: 0;
border-left: 0;
margin: 10px -15px 0;
background: #fff;
border-top: 1px solid #ccc;
}
.type-home .ui-content {
margin-top: 5px;
}
.type-interior .ui-content {
padding-bottom: 0;
}
.content-secondary .ui-collapsible {
padding: 0 15px 10px;
}
.content-secondary .ui-collapsible-content {
padding: 0;
background: none;
border-bottom: none;
}
.content-secondary .ui-listview {
margin: 0;
}
/* new API additions */
dt {
margin: 35px 0 15px 0;
background-color:#ddd;
font-weight:normal;
}
dt code {
display:inline-block;
font-weight:bold;
color:#56A00E;
padding:3px 7px;
margin-right:10px;
background-color:#fff;
}
dd {
margin-bottom:10px;
}
dd .default { font-weight:bold; }
dd pre {
margin:0 0 0 0;
}
dd code { font-weight: normal; }
dd pre code {
margin:0;
border:none;
font-weight:normal;
font-size:100%;
background-color:transparent;
}
dd h4 { margin:15px 0 0 0; }
.localnav {
margin:0 0 20px 0;
overflow:hidden;
}
.localnav li {
float:left;
}
.localnav .ui-btn-inner {
padding: .6em 10px;
font-size:80%;
}
/* F bar theme - just for the docs overview headers */
.ui-bar-f {
border-top: 1px solid #56A00E;
border-bottom: 1px solid #56A00E;
background: #74b042;
color: #fff;
font-weight: bold;
text-shadow: 0 -1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
background-image: -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
background-image: linear-gradient(#74b042, #56A00E);
}
.ui-bar-f,
.ui-bar-f .ui-link-inherit {
color: #fff;
}
.ui-bar-f .ui-link {
color: #fff;
font-weight: bold;
}
.ui-btn-up-f {
border: 1px solid #3B6F07;
background: #56A00E;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#74b042), to(#56A00E)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#74b042, #56A00E); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#74b042, #56A00E); /* FF3.6 */
background-image: -ms-linear-gradient(#74b042, #56A00E); /* IE10 */
background-image: -o-linear-gradient(#74b042, #56A00E); /* Opera 11.10+ */
background-image: linear-gradient(#74b042, #56A00E);
}
.ui-btn-up-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-hover-f {
border: 1px solid #3B6F07;
background: #6EBC1F;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#8FC963), to(#6EBC1F)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#8FC963, #6EBC1F); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#8FC963, #6EBC1F); /* FF3.6 */
background-image: -ms-linear-gradient(#8FC963, #6EBC1F); /* IE10 */
background-image: -o-linear-gradient(#8FC963, #6EBC1F); /* Opera 11.10+ */
background-image: linear-gradient(#8FC963, #6EBC1F);
}
.ui-btn-hover-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-down-f {
border: 1px solid #3B6F07;
background: #3d3d3d;
font-weight: bold;
color: #fff;
text-shadow: 0 -1px 1px #234403;
background-image: -webkit-gradient(linear, left top, left bottom, from(#56A00E), to(#64A234)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(#56A00E, #64A234); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(#56A00E, #64A234); /* FF3.6 */
background-image: -ms-linear-gradient(#56A00E, #64A234); /* IE10 */
background-image: -o-linear-gradient(#56A00E, #64A234); /* Opera 11.10+ */
background-image: linear-gradient(#56A00E, #64A234);
}
.ui-btn-down-f a.ui-link-inherit {
color: #fff;
}
.ui-btn-up-f,
.ui-btn-hover-f,
.ui-btn-down-f {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
/* docs site layout */
@media all and (min-width: 650px){
.jqm-home {
position: absolute;
left: 10px;
top: 0;
}
.type-home .ui-content {
margin-top: 5px;
}
.ui-mobile #jqm-homeheader {
max-width: 340px;
}
.ui-mobile .jqm-themeswitcher {
float: right;
}
p.intro {
margin: 2em 0;
}
.type-home .ui-content,
.type-interior .ui-content {
padding: 0;
background: url(../images/px-ccc.gif) 50% 0 repeat-y;
}
.type-interior .ui-content {
background-position: 45%;
overflow: hidden;
}
.content-secondary {
text-align: left;
float: left;
width: 45%;
background: none;
}
.content-secondary,
.type-interior .content-secondary {
margin: 30px 0 20px 2%;
padding: 20px 4% 0 0;
background: none;
border-top: none;
}
.type-index .content-secondary {
padding: 0;
}
.content-secondary .ui-collapsible {
margin: 0;
padding: 0;
}
.content-secondary .ui-collapsible-content {
border: none;
}
.type-index .content-secondary .ui-listview {
margin: 0;
}
.ui-mobile #jqm-homeheader {
padding: 0;
}
.content-primary {
width: 45%;
float: right;
margin-top: 30px;
margin-right: 1%;
padding-right: 1%;
}
.content-primary ul:first-child {
margin-top: 0;
}
.content-secondary h2 {
position: absolute;
left: -9999px;
}
.type-interior .content-primary {
padding: 1.5em 6% 3em 0;
margin: 0;
}
/* fix up the collapsibles - expanded on desktop */
.content-secondary .ui-collapsible-heading {
display: none;
}
.content-secondary .ui-collapsible-contain {
margin:0;
}
.content-secondary .ui-collapsible-content {
display: block;
margin: 0;
padding: 0;
}
.type-interior .content-secondary .ui-li-divider {
padding-top: 1em;
padding-bottom: 1em;
}
.type-interior .content-secondary {
margin: 0;
padding: 0;
}
}
@media all and (min-width: 750px){
.type-home .ui-content,
.type-interior .ui-content {
background-position: 39%;
}
.content-secondary {
width: 34%;
}
.content-primary {
width: 56%;
padding-right: 1%;
}
.type-interior .ui-content {
background-position: 34%;
}
}
@media all and (min-width: 1200px){
.type-home .ui-content{
background-position: 38.5%;
}
.type-interior .ui-content {
background-position: 30%;
}
.content-secondary {
width: 30%;
padding-right:6%;
margin: 30px 0 20px 5%;
}
.type-interior .content-secondary {
margin: 0;
padding: 0;
}
.content-primary {
width: 50%;
margin-right: 5%;
padding-right: 3%;
}
.type-interior .content-primary {
width: 60%;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 43 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 55 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 55 KiB

View file

@ -1,60 +1,18 @@
//set up the theme switcher on the homepage
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
define( function() {
//>>excludeEnd("jqmBuildExclude");
//collapse page navs after use
$(function(){
$('body').delegate('.content-secondary .ui-collapsible-content', 'click', function(){
$(this).trigger("collapse");
});
});
// Turn off AJAX for local file browsing
if ( location.protocol.substr(0,4) === 'file' ||
location.protocol.substr(0,11) === '*-extension' ||
location.protocol.substr(0,6) === 'widget' ) {
// Start with links with only the trailing slash and that aren't external links
var fixLinks = function() {
$( "a[href$='/'], a[href='.'], a[href='..']" ).not( "[rel='external']" ).each( function() {
this.href = $( this ).attr( "href" ).replace( /\/$/, "" ) + "/index.html";
});
};
// fix the links for the initial page
$(fixLinks);
// fix the links for subsequent ajax page loads
$(document).bind( 'pagecreate', fixLinks );
// Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
$.ajax({
url: '.',
async: false,
isLocal: true
}).error(function() {
// Ajax doesn't work so turn it off
$( document ).bind( "mobileinit", function() {
$.mobile.ajaxEnabled = false;
var message = $( '<div>' , {
'class': "ui-footer ui-bar-e",
style: "overflow: auto; padding:10px 15px;",
'data-ajax-warning': true
});
message
.append( "<h3>Note: Navigation may not work if viewed locally</h3>" )
.append( "<p>The AJAX-based navigation used throughout the jQuery Mobile docs may need to be viewed on a web server to work in certain browsers. If you see an error message when you click a link, try a different browser or <a href='https://github.com/jquery/jquery-mobile/wiki/Downloadable-Docs-Help'>view help</a>.</p>" );
$( document ).bind( "pagecreate", function( event ) {
$( event.target ).append( message );
});
});
});
}
//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
});
//>>excludeEnd("jqmBuildExclude");
$('div').live('pagecreate',function(event){
if( !$(this).is('.ui-dialog')){
$('<a href="#themeswitcher" data-'+ $.mobile.ns +'rel="dialog" data-'+ $.mobile.ns +'transition="pop">Switch theme</a>')
.buttonMarkup({
'icon':'gear',
'inline': true,
'shadow': false,
'theme': 'd'
})
.appendTo( $(this).find('.ui-content') )
.wrap('<div class="jqm-themeswitcher">')
.click(function(){
$.themeswitcher();
});
}
event.stopPropagation();
});

View file

@ -1,28 +1,24 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Accessibility</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Accessibility</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Accessibility</h2>
<p>jQuery Mobile is built upon standard, semantic HTML, allowing pages to be accessible to the broadest range of devices possible. For A-Grade browsers, many of the components in jQuery Mobile leverage techniques such as focus management, keyboard navigation, and HTML attributes specified in the W3C's <a href="http://www.w3.org/TR/wai-aria/">WAI-ARIA</a> specification.</p>
@ -31,33 +27,7 @@
<p>While our accessibility implementation is currently a work in progress, we aim to provide a fully accessible suite of components for version 1.0.</p>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li><a href="../../docs/about/features.html">Features</a></li>
<li data-theme="a"><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>

View file

@ -1,72 +1,43 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Features</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Features</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Key features:</h2>
<ul>
<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve and leverages jQuery UI code and patterns.</li>
<li><strong>Compatible with all major mobile, tablet, e-reader & desktop platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, and all modern browsers with graded levels of support.</li>
<li><strong>Lightweight size</strong> and minimal image dependencies for speed.</li>
<li><strong>Modular architecture</strong> for creating custom builds that are optimized to only include the features needed for a particular application</li>
<li><strong>Built on jQuery core</strong> for familiar and consistent jQuery syntax and minimal learning curve</li>
<li><strong>Compatible with all major mobile platforms</strong> - iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Mobile, bada, MeeGo with baseline support for all devices that understand HTML</li>
<li><strong>Lightweight size</strong> (12k compressed for all mobile functionality) and minimal image dependencies for speed.</li>
<li><strong>HTML5 Markup-driven configuration</strong> of pages and behavior for fast development and minimal required scripting.</li>
<li><strong>Progressive enhancement</strong> approach brings core content and functionality to all mobile, tablet and desktop platforms and a rich, installed application-like experience on newer mobile platforms.</li>
<li><strong>Responsive design</strong> techniques and tools allow the same underlying codebase to automatically scale from smartphone to desktop-sized screens</li>
<li><strong>Powerful Ajax-powered navigation system</strong> to enable animated page transitions while maintaining back button, bookmarking and and clean URLs though pushState. </li>
<li><strong>Automatic initialization</strong> by using HTML5 <code> data-role</code> attributes in the HTML markup to act as the trigger to automatically initialize all jQuery Mobile widgets found on a page.</li>
<li><strong>Accessibility</strong> features such as WAI-ARIA are also included to ensure that the pages work for screen readers (e.g. VoiceOver in iOS) and other assistive technologies.</li>
<li><strong>Touch and mouse event support</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
<li><strong>Unified UI widgets</strong> for common controls enhance native controls with touch-optimized, themable controls that are platform-agnostic and easy to use.</li>
<li><strong>Powerful theming framework</strong> and the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> application make highly-branded experiences easy to build.</li>
<li><strong>New events</strong> streamline the process of supporting touch, mouse, and cursor focus-based user input methods with a simple API. </li>
<li><strong>New plugins</strong> enhance native controls with touch-optimized, themable controls. </li>
<li><strong>Powerful theming framework</strong> and ThemeRoller application make highly-branded experiences easy to build.</li>
</ul>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li data-theme="a"><a href="../../docs/about/features.html">Features</a></li>
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->

View file

@ -1,168 +0,0 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Quick start</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Quick start guide</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>Getting Started with jQuery Mobile</h2>
<p>jQuery Mobile provides a set of touch-friendly UI widgets and an AJAX-powered navigation system to support animated page transitions. Building your first jQuery Mobile page is easy, here's how:</p>
<h2>Create a basic page template</h2>
<p>Pop open your favorite text editor, paste in the <a href="../pages/page-anatomy.html" id="" title="page-anatomy">page template</a> below, save and open in a browser. You are now a mobile developer!</p>
<p>Here's what's in the template. In the <code>head</code>, a meta <code>viewport</code> tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet from the CDN add all the styles and scripts. </p>
<p>In the <code>body</code>, a div with a <code>data-role</code> of <code>page</code> is the wrapper used to delineate a page, and the header bar (<code>data-role="header"</code>) and content region (<code>data-role="content"</code>) are added inside to create a basic page (these are both optional). These <code>data-</code> attributes are HTML5 attributes are used throughout jQuery Mobile to transform basic markup into an enhanced and styled widget.</p>
<pre><code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;My Page&lt;/title&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css&quot; /&gt;
&lt;script src=&quot;http://code.jquery.com/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div <strong>data-role=&quot;page&quot;</strong>&gt;
&lt;div <strong>data-role=&quot;header&quot;</strong>&gt;
&lt;h1&gt;My Title&lt;/h1&gt;
&lt;/div&gt;&lt;!-- /header --&gt;
&lt;div <strong>data-role=&quot;content&quot;</strong>&gt;
&lt;p&gt;Hello world&lt;/p&gt;
&lt;/div&gt;&lt;!-- /content --&gt;
&lt;/div&gt;&lt;!-- /page --&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
<h2>Add your content</h2>
<p>Inside your content container, you can add all any standard <a href="../content/content-html.html">HTML elements</a> - headings, lists, paragraphs, etc. You can write your own custom styles to create custom layouts by adding an additional stylesheet to the <code>head</code> after the jQuery Mobile stylesheet.</p>
<h2>Make a listview</h2>
<p>jQuery Mobile includes a diverse set of common <a href="../lists/docs-lists.html" id="" title="docs-lists">listviews</a> that are coded as lists with a <code>data-role="listview"</code> added. Here is a simple linked list that has a role of <code>listview</code>. We're going to make this look like an inset module by adding a <code>data-inset="true"</code> and add a dynamic search filter with the <code>data-filter="true"</code> attributes.</p>
<pre><code>
&lt;ul <strong>data-role=&quot;listview&quot; data-inset=&quot;true&quot; data-filter=&quot;true&quot</strong>&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Acura&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Audi&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;BMW&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Cadillac&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Ferrari&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
<ul data-role="listview" data-inset="true" data-filter="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
<h2>Add a slider</h2>
<p>The framework contains a full set of <a href="../forms/forms-all.html">form elements</a> that automatically are enhanced into touch-friendly styled widgets. Here's a slider made with the new HTML5 input type of range, no <code>data-role</code> needed. Be sure to wrap these in a <code>form</code> element and always properly associate a <code>label</code> to every form element.</p>
<pre><code>
&lt;form&gt;
&lt;label for=&quot;slider-0&quot;&gt;Input slider:&lt;/label&gt;
&lt;input <strong>type=&quot;range&quot;</strong> name=&quot;slider&quot; id=&quot;slider-0&quot; value=&quot;25&quot; min=&quot;0&quot; max=&quot;100&quot; /&gt;
&lt;/form&gt;
</code></pre>
<form>
<label for="slider-0">Input slider:</label>
<input type="range" name="slider-1" id="slider-0" value="25" min="0" max="100" />
</form>
<h2>Make a button</h2>
<p>There are a few ways to make <a href="../buttons/buttons-types.html" title="buttons-types">buttons</a>, but lets turn a link into a button so it's easy to click. Just start with a link and add a <code>data-role="button"</code> attribute to it. You can add an <a href="../buttons/buttons-icons.html">icon</a> with the <code>data-icon</code> attribute and optionally set its position with the <code>data-iconpos</code> attribute.</p>
<pre><code>
&lt;a href=&quot;#&quot; <strong>data-role=&quot;button&quot; data-icon=&quot;star&quot;</strong>&gt;Star button&lt;/a&gt;
</code></pre>
<a href="#" data-role="button" data-icon="star">Star button</a>
<h2>Play with theme swatches</h2>
<p>jQuery Mobile has a robust <a href="../api/themes.html" id="">theme framework</a> that supports up to 26 sets of toolbar, content and button colors, called a "swatch". Just add a <code>data-theme="e"</code> attribute to any of the widgets on this page: page, header, list, input for the slider, or button to turn it yellow. Try different swatch letters in default theme from a-e to mix and match swatches. </p>
<p>Cool party trick: add the theme swatch to the page and see how all the widgets inside the content will automatically inherit the theme (headers don't inherit, they default to swatch A).</p>
<code>&lt;a href=&quot;#&quot; data-role=&quot;button&quot; data-icon=&quot;star&quot; <strong>data-theme=&quot;a&quot;</strong>&gt;Button&lt;/a&gt;</code>
<a href="#" data-role="button" data-icon="star" data-theme="a">data-theme="a"</a>
<a href="#" data-role="button" data-icon="star" data-theme="b">data-theme="b"</a>
<a href="#" data-role="button" data-icon="star" data-theme="c">data-theme="c"</a>
<a href="#" data-role="button" data-icon="star" data-theme="d">data-theme="d"</a>
<a href="#" data-role="button" data-icon="star" data-theme="e">data-theme="e"</a>
<p>When you're ready to build a custom theme, use <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller</a> to drag and drop, then download a custom theme.</p>
<h2>Go forth and build stuff</h2>
<p>This is just scratching the surface of all the cool things you can build with jQuery Mobile with little effort. Be sure to explore <a href="../pages/page-links.html" id="" title="page-links">linking pages</a>, <a href="../pages/page-transitions.html" id="" title="page-transitions">adding animated page transitions</a>, and <a href="../pages/page-dialogs.html" id="" title="page-dialogs">creating dialogs</a>. Use the <a href="../api/data-attributes.html" id="" title="data-attributes">data-attribute reference</a> to try out some of the other <code>data-</code> attributes you can play with. </p>
<p><strong>More of a developer?</strong> Great, forget everything we just covered (kidding). If you don't want to use the <code>data-</code> attribute configuration system, you can take full control of everything and call plugins directly because these are all just standard jQuery plugins built with the UI widget factory. Be sure to dig into <a href="../api/globalconfig.html" id="" title="globalconfig">global configuration</a>, <a href="../api/events.html" id="" title="events">events</a>, and <a href="../api/methods.html" id="" title="methods">methods</a>. Then read up on <a href="../pages/page-scripting.html" id="" title="page-scripting">scripting pages</a>, <a href="../pages/page-dynamic.html" id="" title="page-dynamic">generating dynamic pages</a>, and <a href="../pages/phonegap.html" id="" title="phonegap">building PhoneGap apps</a>.</p>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li data-theme="a"><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li><a href="../../docs/about/features.html">Features</a></li>
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

View file

@ -1,30 +1,27 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery UI Mobile Framework - About</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
</head>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page">
<div data-role="page" class="type-index">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>About jQuery Mobile</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">Overview</li>
<li><a href="intro.html">Intro to jQuery Mobile</a></li>
<li><a href="getting-started.html">Quick start guide</a></li>
<li><a href="features.html">Features</a></li>
<li><a href="accessibility.html">Accessibility</a></li>
<li><a href="platforms.html">Supported platforms</a></li>
@ -34,4 +31,4 @@
</div>
</body>
</html>
</html>

View file

@ -1,67 +1,40 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Intro</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Introduction</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2>jQuery Mobile Overview</h2>
<p>jQuerys mobile strategy can be summarized simply: A unified user interface system that works seamlessly across all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Focused on a lightweight codebase built on progressive enhancement with a flexible, easily themeable design.</p>
<p>jQuerys mobile strategy can be summarized simply: Delivering top-of-the-line JavaScript in a unified User Interface that works across the most-used smartphone web browsers and tablet form factors.</p>
<p>The critical difference with our approach is the <a href="platforms.html">wide variety of mobile platforms were targeting</a> with jQuery Mobile. Weve been working hard at bringing jQuery support to all mobile browsers that are sufficiently-capable and have at least a nominal amount of market share. In this way, were treating mobile web browsers exactly how we treat desktop web browsers.</p>
<p>To make this broad support possible, all pages in jQuery Mobile are built on a foundation of <strong>clean, semantic HTML</strong> to ensure compatibility with pretty much any web-enabled device. In devices that interpret CSS and JavaScript, jQuery Mobile applies <strong>progressive enhancement techniques</strong> to unobtrusively transform the semantic page into a rich, interactive experience that leverages the power of jQuery and CSS. <strong>Accessibility features</strong> such as WAI-ARIA are tightly integrated throughout the framework to provide support for screen readers and other assistive technologies.</p>
</div><!--/content-primary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li data-theme="a"><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li><a href="../../docs/about/features.html">Features</a></li>
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li><a href="../../docs/about/platforms.html">Supported platforms</a></li>
<img src="../_assets/images/ipad-palm.png" alt="Smartphone and tablet designs" style="max-width:100%; margin-top:20px;">
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>

View file

@ -1,99 +1,51 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Supported platforms</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Supported platforms</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<h2 id="platforms">jQuery Mobile Supported Platforms</h2>
<p>jQuery Mobile has broad support for the vast majority of all modern desktop, smartphone, tablet, and e-reader platforms. In addition, feature phones and older browsers are supported because of our progressive enhancement approach. We're very proud of our commitment to universal accessibility through our broad support for all popular platforms.</p>
<p>We use a 3-level graded platform support system: A (full), B (full minus Ajax), C (basic). The visual fidelity of the experience is highly dependent on the CSS rendering capabilities of the device and platform so not all A grade experience will be pixel-perfect but that's the nature of the web.</p>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #74B64A; padding: 5px 0 5px 8px;"><strong> A-grade</strong> - Full enhanced experience with Ajax-based animated page transitions.</h3>
<h2>Supported platforms in Alpha 4</h2>
<p>In the alpha 4 release, the following platforms and browsers have a solid jQuery Mobile experience with pages fully functional and rendering as designed. New in this release is WP7 support. </p>
<ul>
<li><strong>Apple iOS 3.2-5.0</strong> - Tested on the original iPad (4.3 / 5.0), iPad 2 (4.3), original iPhone (3.1), iPhone 3 (3.2), 3GS (4.3), and 4 (4.3 / 5.0)</li>
<li><strong>Android 2.1-2.3</strong> - Tested on the HTC Incredible (2.2), original Droid (2.2), Nook Color (2.2), HTC Aria (2.1), Google Nexus S (2.3). Functional on 1.5 &amp; 1.6 but performance may be sluggish, tested on Google G1 (1.5)</li>
<li><strong>Android Honeycomb</strong>- Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM</li>
<li><strong>Windows Phone 7-7.5</strong> - Tested on the HTC Surround (7.0) HTC Trophy (7.5), and LG-E900 (7.5)</li>
<li><strong>Blackberry 6.0</strong> - Tested on the Torch 9800 and Style 9670</li>
<li><strong>Blackberry 7</strong> - Tested on BlackBerry® Torch 9810</li>
<li><strong>Blackberry Playbook</strong> - Tested on PlayBook version 1.0.1 / 1.0.5</li>
<li><strong>Palm WebOS (1.4-2.0)</strong> - Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)</li>
<li><strong>Palm WebOS 3.0 </strong> - Tested on HP TouchPad</li>
<li><strong>Firebox Mobile (Beta)</strong> - Tested on Android 2.2</li>
<li><strong>Opera Mobile 11.0</strong>: Tested on Android 2.2</li>
<li><strong>Meego 1.2</strong> - Tested on Nokia 950 and N9</li>
<li><strong>Kindle 3 and Fire</strong>: Tested on the built-in WebKit browser for each</li>
<li><strong>Chrome <strong>Desktop </strong>11-15</strong> - Tested on OS X 10.6.7 and Windows 7</li>
<li><strong>Firefox Desktop 4-8</strong> - Tested on OS X 10.6.7 and Windows 7</li>
<li><strong>Internet Explorer 7-9</strong> - Tested on Windows XP, Vista and 7 (minor CSS issues)</li>
<li><strong>Opera Desktop 10-11</strong> - Tested on OS X 10.6.7 and Windows 7</li>
<li><strong>Samsung Bada</strong> - Tested on the device's stock Dolphin Browser</li>
<li><strong>Android UCWeb</strong> - Tested on Android 2.3</li>
</ul>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #6699cc; padding: 5px 0 5px 8px;"><strong>B-grade</strong> - Enhanced experience except without Ajax navigation features.</h3>
<ul>
<li><strong>Blackberry 5.0</strong>: Tested on the Storm 2 9550, Bold 9770</li>
<li><strong>Opera Mini (5.0-6.0)</strong> - Tested on iOS 3.2/4.3</li>
<li><strong>Nokia Symbian^3 </strong>- Tested on Nokia N8 (Symbian^3), C7 (Symbian^3), also works on N97 (Symbian^1)</li>
</ul>
<h3 style="display: block; font-size: 15px !important; font-weight: normal; background: #f0f0f0; border-left: 7px solid #FFCC33; padding: 5px 0 5px 8px;"><strong>C<strong>-grade</strong></strong> - Basic, non-enhanced HTML experience that is still functional</h3>
<ul>
<li><strong>Blackberry 4.x</strong> - Tested on the Curve 8330</li>
<li><strong>Windows Mobile</strong> - Tested on the HTC Leo (WInMo 5.2)</li>
<li><strong>All older smartphone platforms and featurephones</strong> - Any device that doesn't support media queries will receive the basic, C grade experience</li>
<li>Apple iOS (3.1-4.2): tested on iPhone, iPod Touch, iPad</li>
<li>Android (1.6-2.3): all devices, tested on the HTC Incredible, Motorola Droid, Google G1 and Nook Color</li>
<li>Blackberry 6: tested on Torch and Style</li>
<li>Windows Phone 7: tested on HTC Surround</li>
<li>Palm WebOS (1.4): tested on Pre, Pixi</li>
<li>Opera Mobile (10.1): Android</li>
<li>Opera Mini (5.02): iOS, Android</li>
<li>Firefox Mobile (beta): Android</li>
</ul>
<h2>Target platform additions for beta</h2>
<p>The team is now focusing on bringing support to Blackberry 5, Nokia/Symbian for the upcoming beta release. We don't yet have phones to test bada or MeeGo but these will be added as soon as we can get devices.</p>
<p>Since jQuery Mobile is built on the jQuery core, all pages should also work great on most recent versions of desktop browsers too - Firefox, Chrome, Safari, Internet Explorer, Opera, etc.</p>
<p>For more information about browser support, view the <a href="https://github.com/jquery/jquery-mobile/wiki/Current-development-status-">current browser support status and known issues</a> and the project's target <a href="http://jquerymobile.com/gbs/" rel="external"><strong>graded browser matrix</strong>.</p>
</div>
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">Overview</li>
<li><a href="../../docs/about/intro.html">Intro to jQuery Mobile</a></li>
<li><a href="../../docs/about/getting-started.html">Quick start guide</a></li>
<li><a href="../../docs/about/features.html">Features</a></li>
<li><a href="../../docs/about/accessibility.html">Accessibility</a></li>
<li data-theme="a"><a href="../../docs/about/platforms.html">Supported platforms</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>

View file

@ -1,460 +0,0 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Data Attribute Reference</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<h1>Data Attributes</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<div class="content-primary">
<h2>Data- attribute reference</h2>
<p>The jQuery Mobile framework uses HTML5 <code>data-</code> attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use <code>data-</code> attributes, set a custom namespace by modifying the <a href="globalconfig.html"><code>ns</code> global option</a>.<p>
<style>
table { width:100%; border-bottom:1px solid #ccc; }
th { text-align:left; width: 170px; }
th, td { vertical-align:top; border-top:1px solid #ccc; padding: 6px 10px 4px 0; }
</style>
<h2><a href="../buttons/buttons-types.html">Button</a></h2>
<p>Links with <code>data-role="button"</code>. Input-based buttons and button elements are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-corners</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
</tr>
<tr>
<th>data-iconpos</th>
<td><strong>left</strong> | right | top | bottom | notext</td>
</tr>
<tr>
<th>data-iconshadow</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-inline</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-shadow</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<p>Multiple buttons can be wrapped in a container with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the buttons to sit side-by-side.</p>
<h2><a href="../forms/checkboxes/">Checkbox</a></h2>
<p>Pairs of labels and inputs with <code>type="checkbox"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
<h2><a href="../content/content-collapsible.html">Collapsible</a></h2>
<p>A heading and content wrapped in a container with the <code>data-role="collapsible"</code></p>
<table>
<tr>
<th>data-collapsed</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-content-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../content/content-collapsible-set.html">Collapsible set</a></h2>
<p>A number of collapsibles wrapped in a container with the <code>data-role="collapsible-set"</code></p>
<table>
<tr>
<th>data-content-theme</th>
<td>swatch letter (a-z) - Sets all collapsibles in set</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Sets all collapsibles in set</td>
</tr>
</table>
<h2><a href="../pages/page-dialogs.html">Dialog</a></h2>
<p>Page with <code>data-role="page"</code> linked to with <code>data-rel="dialog"</code> on the anchor.</p>
<table>
<tr>
<th>data-close-btn-text</th>
<td>string (text for the close button, dialog only)</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true | false (used in conjunction with fixed toolbars)</td>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-title</th>
<td>string (title used when page is shown)</td>
</tr>
</table>
<h2><a href="../pages/page-anatomy.html">Content</a></h2>
<p>Container with <code>data-role="content"</code></p>
<table>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../forms/docs-forms.html">Field container</a></h2>
<p>Container with <code>data-role="fieldcontain"</code> wrapped around label/form element pair</p>
<h2><a href="../forms/switch/">Flip toggle switch</a></h2>
<p>Select with <code>data-role="slider"</code>, two options only</p>
<table>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
<tr>
<th>data-track-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
<h2><a href="../toolbars/docs-footers.html">Footer</a></h2>
<p>Container with <code>data-role="footer"</code></p>
<table>
<tr>
<th>data-id</th>
<td>string (unique id, useful in persistent footers)</td>
</tr>
<tr>
<th>data-position</th>
<td>fixed</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../toolbars/docs-headers.html">Header</a></h2>
<p>Container with <code>data-role="header"</code></p>
<table>
<tr>
<th>data-position</th>
<td>fixed</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../pages/page-links.html">Link</a></h2>
<p>Links, including those with a <code>data-role="button"</code>, and form submit buttons share these attributes</p>
<table>
<tr>
<th>data-ajax</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-direction</th>
<td>reverse (reverse page transition animation)</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-prefetch</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-rel</th>
<td>back (to move one step back in history)<br />
dialog (to open link styled as dialog, not tracked in history)<br />
external (for linking to another domain)</td>
</tr>
<tr>
<th>data-transition</th>
<td><strong>slide</strong> | slideup | slidedown | pop | fade | flip</td>
</tr>
</table>
<h2><a href="../lists/docs-lists.html">Listview</a></h2>
<p>OL or UL with <code>data-role="listview"</code></p>
<table>
<tr>
<th>data-count-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-dividertheme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-filter</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-filter-placeholder</th>
<td>string</td>
</tr>
<tr>
<th>data-filter-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-inset</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-split-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
</tr>
<tr>
<th>data-split-theme</th>
<td>swatch letter (a-z)<td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
</table>
<h2><a href="../lists/docs-lists.html">Listview item</a></h2>
<p>LI within a listview</p>
<table>
<tr>
<th>data-filtertext</th>
<td>string (filter by this value instead of inner text)</td>
</tr>
<tr>
<th>data-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
</tr>
<tr>
<th>data-role</th>
<td>list-divider</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - can also be set on individual LIs</td>
</tr>
</table>
<h2><a href="../toolbars/docs-navbar.html">Navbar</a></h2>
<p>A number of LIs wrapped in a container with <code>data-role="navbar"</code></p>
<table>
<tr>
<th>data-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
</tr>
<tr>
<th>data-iconpos</th>
<td><strong>left</strong> | right | top | bottom | notext</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - can also be set on individual LIs</td>
</tr>
</table>
<h2><a href="../pages/page-anatomy.html">Page</a></h2>
<p>Container with <code>data-role="page"</code></p>
<table>
<tr>
<th>data-add-back-btn</th>
<td>true | <strong>false</strong> (auto add back button, header only)</td>
</tr>
<tr>
<th>data-back-btn-text</th>
<td>string</td>
</tr>
<tr>
<th>data-back-btn-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-close-btn-text</th>
<td>string (text for the close button, dialog only)</td>
</tr>
<tr>
<th>data-dom-cache</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-fullscreen</th>
<td>true | false (used in conjunction with fixed toolbars)</td>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme when the page is opened in a dialog</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z)</td>
</tr>
<tr>
<th>data-title</th>
<td>string (title used when page is shown)</td>
</tr>
</table>
<h2><a href="../forms/radiobuttons/">Radio button</a></h2>
<p>Pairs of labels and inputs with <code>type="radio"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
<h2><a href="../forms/selects/">Select</a></h2>
<p>All <code>select</code> form elements are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-icon</th>
<td>home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search</td>
</tr>
<tr>
<th>data-iconpos</th>
<td><strong>left</strong> | right | top | bottom | notext</td>
</tr>
<tr>
<th>data-inline</th>
<td>true | <strong>false</strong></td>
</tr>
<tr>
<th>data-native-menu</th>
<td><strong>true</strong> | false</td>
</tr>
<tr>
<th>data-overlay-theme</th>
<td>swatch letter (a-z) - overlay theme for non-native selects</td>
</tr>
<tr>
<th>data-placeholder</th>
<td>true | false - Add to the Option</td>
</tr>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
<p>Multiple selects can be wrapped in a fieldset with a <code>data-role="controlgroup"</code> attribute for a vertically grouped set. Add the <code>data-type="horizontal"</code> attribute for the selects to sit side-by-side.</p>
<h2><a href="../forms/slider/">Slider</a></h2>
<p>Inputs with <code>type="range"</code> are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
<tr>
<th>data-track-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
<h2><a href="../forms/textinputs/">Text input &amp; Textarea</a></h2>
<p>Input <code>type="text|number|search|etc."</code> or <code>textarea</code> elements are auto-enhanced, no <code>data-role</code> required</p>
<table>
<tr>
<th>data-role</th>
<td>none (prevents auto-enhancement to use native control)</td>
</tr>
<tr>
<th>data-theme</th>
<td>swatch letter (a-z) - Added to the form element</td>
</tr>
</table>
</div><!--/content -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li data-theme="a"><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</body>
</html>

View file

@ -1,110 +1,51 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Events</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Events</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Events</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>jQuery Mobile offers several custom events that build upon native events to create useful hooks for development. Note that these events employ various touch, mouse, and window events, depending on event existence, so you can bind to them for use in both handheld and desktop environments. You can bind to these events like you would with other jQuery events, using <code>live()</code> or <code>bind()</code>.</p>
<div class="ui-body ui-body-e">
<h4 style="margin:.5em 0">Important: Use <code>pageInit()</code>, not <code>$(document).ready()</code></h4>
<p>The first thing you learn in jQuery is to call code inside the <code>$(document).ready()</code> function so everything will execute as soon as the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the contents of each page into the DOM as you navigate, and the DOM ready handler only executes for the first page. To execute code whenever a new page is loaded and created, you can bind to the <code>pageinit</code> event. This event is explained in detail at the bottom of this page.</p></div>
<p> &nbsp;</p>
<div class="ui-body ui-body-e">
<h4 style="margin:.5em 0">Important: <code>pageCreate()</code> vs <code>pageInit()</code></h4>
<p> Prior to Beta 2 the recommendation to users wishing to manipulate jQuery Mobile enhanced page and child widget markup was to bind to the <code>pagecreate</code> event. In Beta 2 an internal change was made to decouple each of the widgets by binding to the <code>pagecreate</code> event in place of direct calls to the widget methods. As a result, users binding to the <code>pagecreate</code> in <code>mobileinit</code> would find their binding executing before the markup had been enhanced by each of the plugins. In keeping with the lifecycle of the jQuery UI Widget Factory, the initialization method is invoked <strong>after</strong> the create method, so the <code>pageinit</code> event provides the correct timing for post enhancement manipulation of the DOM and/or Javascript objects.
In short, if you were previously using <code>pagecreate</code> to manipulate the enhanced markup before the page was shown, it's very likely you'll want to migrate to 'pageinit'.
</p></div>
<h2>Touch events</h2>
<dl>
<dt><code>tap</code></dt>
<dd>Triggers after a quick, complete touch event.</dd>
<dt><code>taphold</code></dt>
<dd>Triggers after a held complete touch event (close to one second).</dd>
<dt><code>swipe</code></dt>
<dd><p>Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration but these can be configured:</p>
<ul>
<li><code>scrollSupressionThreshold</code> (default: 10px) More than this horizontal displacement, and we will suppress scrolling</li>
<li><code>durationThreshold</code> (default: 1000ms) More time than this, and it isnt a swipe</li>
<li><code>horizontalDistanceThreshold</code> (default: 30px) Swipe horizontal displacement must be more than this.</li>
<li><code>verticalDistanceThreshold</code> (default: 75px) Swipe vertical displacement must be less than this.</li>
</ul>
</dd>
<dd>Triggers when a horizontal drag of 30px or more (and less than 20px vertically) occurs within 1 second duration.</dd>
<dt><code>swipeleft</code></dt>
<dd>Triggers when a swipe event occurred moving in the left direction.</dd>
<dt><code>swiperight</code></dt>
<dd>Triggers when a swipe event occurred moving in the right direction.</dd>
</dl>
<h2>Virtual mouse events</h2>
<p>We provide a set of "virtual" mouse events that attempt to abstract away mouse and touch events. This allows the developer to register listeners for the basic mouse events, such as mousedown, mousemove, mouseup, and click, and the plugin will take care of registering the correct listeners behind the scenes to invoke the listener at the fastest possible time for that device. In touch environments, the plugin retains the order of event firing that is seen in traditional mouse environments, so for example, vmouseup is always dispatched before vmousedown, and vmousedown before vclick, etc. The virtual mouse events also normalize how coordinate information is extracted from the event, so in touch based environments, coordinates are available from the pageX, pageY, screenX, screenY, clientX, and clientY properties, directly on the event object.</p>
<dl>
<dt><code>vmouseover</code></dt>
<dd>Normalized event for handling touch or <code>mouseover</code> events</dd>
<dt><code>vmousedown</code></dt>
<dd>Normalized event for handling touchstart or <code>mousedown</code> events</dd>
<dt><code>vmousemove</code></dt>
<dd>Normalized event for handling touchmove or <code>mousemove</code> events</dd>
<dt><code>vmouseup</code></dt>
<dd>Normalized event for handling touchend or <code>mouseup</code> events</dd>
<dt><code>vclick</code></dt>
<dd>Normalized event for handling touchend or mouse <code>click</code> events. On touch devices, this event is dispatched *AFTER* vmouseup. </dd>
<dt><code>vmousecancel</code></dt>
<dd>Normalized event for handling touch or mouse <code>mousecancel</code> events</dd>
</dl>
<div class="ui-body ui-body-e">
<h4 style="margin:.5em 0">Warning: Use vclick with caution</h4>
<p> Use vclick with caution on touch devices. Webkit based browsers synthesize <code>mousedown</code>, <code>mouseup</code>, and <code>click</code> events roughly 300ms after the <code>touchend</code> event is dispatched. The target of the synthesized mouse events are calculated at the time they are dispatched and are based on the location of the touch events and, in some cases, the implementation specific heuristics which leads to different target calculations on different devices and even different OS versions for the same device. This means the target element within the original touch events could be different from the target element within the synthesized mouse events.</p>
<p>We recommend using <code>click</code> instead of <code>vclick</code> anytime the action being triggered has the possibility of changing the content underneath the point that was touched on screen. This includes page transitions and other behaviors such as collapse/expand that could result in the screen shifting or content being completely replaced.</p>
</div>
<p>&nbsp;</p>
<div class="ui-body ui-body-e">
<h4 style="margin:.5em 0">Canceling an elements default click behavior</h4>
<p>Applications can call <code>preventDefault()</code> on a <code>vclick</code> event to cancel an element's default click behavior. On mouse based devices, calling <code>preventDefault()</code> on a <code>vclick</code> event equates to calling <code>preventDefault()</code> on the real <code>click</code> event during the bubble event phase. On touch based devices, it's a bit more complicated since the actual <code>click</code> event is dispatched about 300ms after the <code>vclick</code> event is dispatched. For touch devices, calling <code>preventDefault()</code> on a <code>vclick</code> event triggers some code in the vmouse plugin that attempts to catch the next <code>click</code> event that gets dispatched by the browser, during the capture event phase, and calls <code>preventDefault()</code> and <code>stopPropagation()</code> on it. As mentioned in the warning above, it is sometimes difficult to match up a touch event with its corresponding mouse event because the targets can differ. For this reason, the vmouse plugin also falls back to attempting to identify a corresponding <code>click</code> event by coordinates. There are still cases where both target and coordinate identification fail, which results in the <code>click</code> event being dispatched and either triggering the default action of the element, or in the case where content has been shifted or replaced, triggering a click on a different element. If this happens on a regular basis for a given element/control, we suggest you use <code>click</code> for triggering your action.</p>
</div>
<h2>Orientation change event</h2>
<dl>
<dt><code>orientationchange</code></dt>
<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when <code>orientationchange</code> is not natively supported, or when <code>$.mobile.orientationChangeEnabled</code> is set to false.</dd>
<div class="ui-body ui-body-e">
<h4>orientationchange timing</h4>
<p> The timing of the <code>orientationchange</code> with relation to the change of the client height and width is different between browsers, though the current implementation will give you the correct value for <code>event.orientation</code> derived from <code>window.orientation</code>. This means that if your bindings are dependent on the height and width values you may want to disable <code>orientationChange</code> all together with <code>$.mobile.orientationChangeEnabled = false</code> to let the fallback resize code trigger your bindings.</p>
</div>
<dd>Triggers when a device orientation changes (by turning it vertically or horizontally). When bound to this event, your callback function can leverage a second argument, which contains an <code>orientation</code> property equal to either "portrait" or "landscape". These values are also added as classes to the HTML element, allowing you to leverage them in your CSS selectors. Note that we currently bind to the resize event when orientationChange is not natively supported.</dd>
</dl>
<h2>Scroll events</h2>
<dl>
<dt><code>scrollstart</code></dt>
@ -113,399 +54,87 @@
<dl>
<dt><code>scrollstop</code></dt>
<dd>Triggers when a scroll finishes.</dd>
</dl>
<h2>Page load events</h2>
<p>Whenever an external page is loaded into the application DOM, 2 events are fired. The first is <code>pagebeforeload</code>. The 2nd event will be either <code>pageload</code> or <code>pageloadfailed</code>.</p>
<dl>
<dt><code>pagebeforeload</code></dt>
<dd><p>Triggered before any load request is made. Callbacks bound to this event can call <code>preventDefault()</code> on the event to indicate that they are handling the load request. Callbacks that do this *MUST* make sure they call <code>resolve()</code> or <code>reject()</code> on the deferred object reference contained in the data object passed to the callback.</p>
<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
<ul>
<li><code>url</code> (string)
<ul>
<li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
</ul>
</li>
<li><code>absUrl</code> (string)
<ul>
<li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
</ul>
</li>
<li><code>dataUrl</code> (string)
<ul>
<li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
</ul>
</li>
<li><code>deferred</code> (object)
<ul>
<li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
<pre><code>
$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
// Let the framework know we're going to handle the load.
event.preventDefault();
// ... load the document then insert it into the DOM ...
// at some point, either in this callback, or through
// some other async means, call resolve, passing in
// the following args, plus a jQuery collection object
// containing the DOM element for the page.
data.deferred.resolve( data.absUrl, data.options, page );
});</code></pre>
<p>or rejected like this:
<pre><code>
$( document ).bind( &quot;pagebeforeload&quot;, function( event, data ){
// Let the framework know we're going to handle the load.
event.preventDefault();
// ... load the document then insert it into the DOM ...
// at some point, if the load fails, either in this
// callback, or through some other async means, call
// reject like this:
data.deferred.reject( data.absUrl, data.options );
});</code></pre>
</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the options that were passed into $.mobile.loadPage().</li>
</ul>
</li>
</ul>
</dd>
<dt><code>pageload</code></dt>
<dd>Triggered after the page is successfully loaded and inserted into the DOM. Callbacks bound to this event will be passed a data object as its 2nd arg. This object contains the following information:
<ul>
<li><code>url</code> (string)
<ul>
<li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
</ul>
</li>
<li><code>absUrl</code> (string)
<ul>
<li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
</ul>
</li>
<li><code>dataUrl</code> (string)
<ul>
<li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the options that were passed into $.mobile.loadPage().</li>
</ul>
</li>
<li><code>xhr</code> (object)
<ul>
<li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the 3rd argument to the framework's $.ajax() success callback.</li>
</ul>
</li>
<li><code>textStatus</code> (null or string)
<ul>
<li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this will be a string describing the status. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
</ul>
</li>
</ul>
</dd>
<dt><code>pageloadfailed</code></dt>
<dd>Triggered if the page load request failed. By default, after dispatching this event, the framework will display a page failed message and call reject() on the deferred object contained within the event's data object. Callbacks can prevent this default behavior from executing by calling preventDefault() on the event.
<p>The data object, passed as the 2nd arg to the callback function contains the following properties:</p>
<ul>
<li><code>url</code> (string)
<ul>
<li>The absolute or relative URL that was passed into $.mobile.loadPage() by the caller.</li>
</ul>
</li>
<li><code>absUrl</code> (string)
<ul>
<li>The absolute version of the url. If url was relative, it is resolved against the url used to load the current active page.</li>
</ul>
</li>
<li><code>dataUrl</code> (string)
<ul>
<li>The filtered version of absUrl to be used when identifying the page and updating the browser location when the page is made active.</li>
</ul>
</li>
<li><code>deferred</code> (object)
<ul>
<li>Callbacks that call preventDefault() on the event, *MUST* call resolve() or reject() on this object so that changePage() requests resume processing. Deferred object observers expect the deferred object to be resolved like this:</p>
<pre><code>
$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
// Let the framework know we're going to handle things.
event.preventDefault();
// ... attempt to load some other page ...
// at some point, either in this callback, or through
// some other async means, call resolve, passing in
// the following args, plus a jQuery collection object
// containing the DOM element for the page.
data.deferred.resolve( data.absUrl, data.options, page );
});</code></pre>
<p>or rejected like this:
<pre><code>
$( document ).bind( &quot;pageloadfailed&quot;, function( event, data ){
// Let the framework know we're going to handle things.
event.preventDefault();
// ... attempt to load some other page ...
// at some point, if the load fails, either in this
// callback, or through some other async means, call
// reject like this:
data.deferred.reject( data.absUrl, data.options );
});</code></pre>
</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the options that were passed into $.mobile.loadPage().</li>
</ul>
</li>
<li><code>xhr</code> (object)
<ul>
<li>The jQuery XMLHttpRequest object used when attempting to load the page. This is what gets passed as the first argument to the framework's $.ajax() error callback.</li>
</ul>
</li>
<li><code>textStatus</code> (null or string)
<ul>
<li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, possible values for this property, aside from null, are &quot;timeout&quot;, &quot;error&quot;, &quot;abort&quot;, and &quot;parsererror&quot;. This is what gets passed as the 2nd argument to the framework's $.ajax() error callback.</li>
</ul>
</li>
<li><code>errorThrown</code> (null, string, object)
<ul>
<li>According to the jQuery Core <a href="http://api.jquery.com/jQuery.ajax/">documentation</a>, this property may be an exception object if one occured, or if an HTTP error occured this will be set to the textual portion of the HTTP status. This is what gets passed as the 3rd argument to the framework's $.ajax() error callback.</li>
</ul>
</li>
</ul>
</dd>
</dl>
<h2>Page change events</h2>
<p>Navigating between pages in the application is usually accomplished through a call to <code>$.mobile.changePage()</code>. This function is responsible for making sure that the page we are navigating to is loaded and inserted into the DOM, and then kicking off the transition animations between the current active page, and the page the caller wants to to make active. During this process, which is usually asynchronous, changePage() will fire off 2 events. The first is <code>pagebeforechange</code>. The second event depends on the success or failure of the change request. It will either be <code>pagechange</code> or <code>pagechangefailed</code>.</p>
<dl>
<dt><code>pagebeforechange</code></dt>
<dd>This event is triggered prior to any page loading or transition. Callbacks can prevent execution of the changePage() function by calling preventDefault on the event object passed into the callback. The callback also recieves a data object as its 2nd arg. The data object has the following properties:
<ul>
<li><code>toPage</code> (object or string)
<ul>
<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the configuration options to be used for the current changePage() call.</li>
</ul>
</li>
</ul>
<p>It should be noted that callbacks can modify both the <code>toPage</code> and <code>options</code> properties to alter the behavior of the current <code>changePage()</code> call. So for example, the <code>toPage</code> can be mapped to a different url from within a callback to do a sort of redirect.</p>
</dd>
<dt><code>pagechange</code></dt>
<dd>This event is triggered after the <code>changePage()</code> request has finished loading the page into the DOM and all page transition animations have completed. Note that any pageshow or pagehide events will have fired *BEFORE* this event is triggered. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
<ul>
<li><code>toPage</code> (object or string)
<ul>
<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the configuration options to be used for the current changePage() call.</li>
</ul>
</li>
</ul>
</dd>
<dt><code>pagechangefailed</code></dt>
<dd>This event is triggered when the <code>changePage()</code> request fails to load the page. Callbacks for this particular event will be passed a data object as the 2nd arg. The properties for this object are as follows:
<ul>
<li><code>toPage</code> (object or string)
<ul>
<li>This property represents the page the caller wishes to make active. It can be either a jQuery collection object containing the page DOM element, or an absolute/relative url to an internal or external page. The value exactly matches the 1st arg to the changePage() call that triggered the event.</li>
</ul>
</li>
<li><code>options</code> (object)
<ul>
<li>This object contains the configuration options to be used for the current changePage() call.</li>
</ul>
</li>
</ul>
</dd>
</dl>
<h2>Page transition events</h2>
<p>Page transitions are used to animate the change from the current active page (fromPage) to a new page (toPage). Events are triggered before and after these transitions so that observers can be notified whenever pages are shown or hidden. The events triggered are as follows:</p>
</dl>
<h2>Page show/hide events</h2>
<p>Whenever a page is shown or hidden in jQuery Mobile, two events are triggered on that page. The events triggered depend on whether that page is being shown or hidden, so when a page transition occurs, there are actually 4 events triggered: 2 for each page. </p>
<dl>
<dt><code>pagebeforeshow</code></dt>
<dd>Triggered on the "toPage" we are transitioning to, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
<ul>
<li><code>prevPage</code> (object)
<ul>
<li>A jQuery collection object that contains the page DOM element that we are transitioning away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
</ul>
</li>
</ul>
</dd>
<dd>Triggered on the page being shown, before its transition begins.</dd>
<dt><code>pagebeforehide</code></dt>
<dd>Triggered on the "fromPage" we are transitioning away from, before the actual transition animation is kicked off. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
<ul>
<li><code>nextPage</code> (object)
<ul>
<li>A jQuery collection object that contains the page DOM element that we are transitioning to.</li>
</ul>
</li>
</ul>
<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
</dd>
<dd>Triggered on the page being hidden, before its transition begins.</dd>
<dt><code>pageshow</code></dt>
<dd>Triggered on the "toPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
<ul>
<li><code>prevPage</code> (object)
<ul>
<li>A jQuery collection object that contains the page DOM element that we just transitioned away from. Note that this collection is empty when the first page is transitioned in during application startup.</li>
</ul>
</li>
</ul>
</dd>
<dd>Triggered on the page being shown, after its transition completes.</dd>
<dt><code>pagehide</code></dt>
<dd>Triggered on the "fromPage" after the transition animation has completed. Callbacks for this event will recieve a data object as their 2nd arg. This data object has the following properties on it:
<ul>
<li><code>nextPage</code> (object)
<ul>
<li>A jQuery collection object that contains the page DOM element that we just transitioned to.</li>
</ul>
</li>
</ul>
<p>Note that this event will not be dispatched during the transition of the first page at application startup since there is no previously active page.</p>
</dd>
<dd>Triggered on the page being hidden, after its transition completes.</dd>
</dl>
<p>You can access the <code>prevPage</code> or <code>nextPage</code> properties via the second argument of a bound callback function. For example: </p>
<pre><code>
$( 'div' ).live( 'pageshow',function(event, ui){
alert( 'This page was just hidden: '+ ui.prevPage);
<p>Note that all four of these events expose a reference to either the next page (<code>nextPage</code>) or previous page (<code>prevPage</code>), depending on whether the page is being shown or hidden, and whether that next or previous page exists (the first ever page shown does not have a previous page to reference, but an empty jQuery object is provided just the same). You can access this reference via the second argument of a bound callback function. For example: </p>
<pre>
<code>
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$( 'div' ).live( 'pagehide',function(event, ui){
alert( 'This page was just shown: '+ ui.nextPage);
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
</code></pre>
</code>
</pre>
<p>Also, for these handlers to be invoked during the initial page load, you must bind them before jQuery Mobile executes. This can be done in the <code>mobileinit</code> handler, as described on the <a href="globalconfig.html">global config</a> page.
<h2>Page initialization events</h2>
<p>Internally, jQuery Mobile auto-initializes plugins based on the markup conventions found in a given "page". For example, an <code>input</code> element with a <code>type</code> of <code>range</code> will automatically generate a custom slider control.</p>
<p>This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own intialization behavior and prevent the auto-initializations from occuring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.</p>
<p>This auto-initialization is controlled by the "page" plugin, which dispatches events before and after it executes, allowing you to manipulate a page either pre-or-post initialization, or even provide your own intialization behavior and prevent the auto-initializations from occuring. Note that these events will only fire once per "page", as opposed to the show/hide events, which fire every time a page is shown and hidden.</p>
<dl>
<dt><code>pagebeforecreate</code></dt>
<dd>
<p>Triggered on the page being initialized, before most plugin auto-initialization occurs.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
alert( 'This page was just inserted into the dom!' );
});
</code></pre>
<p>Note that by binding to <code>pagebeforecreate</code>, you can manipulate markup before jQuery Mobile's default widgets are auto-initialized. For example, say you want to add data-attributes via JavaScript instead of in the HTML source, this is the event you'd use.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagebeforecreate',function(event){
// manipulate this page before its widgets are auto-initialized
});
</code></pre>
</dd>
<dd>Triggered on the page being initialized, before initialization occurs.</dd>
<dt><code>pagecreate</code></dt>
<dd>
<p>Triggered when the page has been created in the DOM (via ajax or other) but before all widgets have had an opportunity to enhance the contained markup. This event is most useful for user's wishing to create their own custom widgets for child markup enhancement as the jquery mobile widgets do.</p>
<pre><code>
$( '#aboutPage' ).live( 'pagecreate',function(event){
( ":jqmData(role='sweet-plugin')" ).sweetPlugin();
<dd>Triggered on the page being initialized, after initialization occurs.</dd>
</dl>
<pre>
<code>
$('#aboutPage').live('pagebeforecreate',function(event){
alert('This page was just inserted into the dom!');
});
</code></pre>
</dd>
<dt><code>pageinit</code></dt>
<dd>
<p>Triggered on the page being initialized, after initialization occurs. We recommend binding to this event instead of DOM ready() because this will work regardless of whether the page is loaded directly or if the content is pulled into another page as part of the Ajax navigation system.</p>
<pre><code>
$( '#aboutPage' ).live( 'pageinit',function(event){
alert( 'This page was just enhanced by jQuery Mobile!' );
$('#aboutPage').live('pagecreate',function(event){
alert('This page was just enhanced by jQuery Mobile!');
});
</code>
</pre>
<p>Note that by binding to <code>pagebeforecreate</code> and returning <code>false</code>, you can prevent the page plugin from making its manipulations.</p>
<pre>
<code>
$('#aboutPage').live('pagebeforecreate',function(event){
//run your own enhancement scripting here...
return false;
});
</code></pre>
</dd>
</dl>
<h2>Page remove events</h2>
<p>By default, the framework removes any non active dynamically loaded external pages from the DOM as soon as the user navigates away to a different page. The <code>pageremove</code> event is dispatched just before the framework attempts to remove the a page from the DOM.</p>
<dl>
<dt><code>pageremove</code></dt>
<dd>This event is triggered just before the framework attempts to remove an external page from the DOM. Event callbacks can call preventDefault on the event object to prevent the page from being removed.
</dd>
</dl>
<h2>Layout events</h2>
<p>Some components within the framework, such as collapsible and listview search, dynamically hide and show content based on user events. This hiding/showing of content affects the size of the page and may result in the browser adjusting/scrolling the viewport to accommodate the new page size. Since this has the potential to affect other components such as fixed headers and footers, components like collapsible and listview trigger a custom <code>updatelayout</code> event to notify other components that they may need to adjust their layouts in response to their content changes. Developers who are building dynamic applications that inject, hide, or remove content from the page, or manipulate it in any way that affects the dimensions of the page, can also manually trigger this <code>updatelayout</code> event to ensure components on the page update in response to the changes.</p>
<dl>
<dt><code>updatelayout</code></dt>
<dd>This event is triggered by components within the framework that dynamically show/hide content, and is meant as a generic mechanism to notify other components that they may need to update their size or position. Within the framework, this event is fired on the component element whose content was shown/hidden, and bubbles all the way up to the document element.
<pre><code>
$( '#foo' ).hide().trigger( 'updatelayout' );
</code></pre>
</dd>
</dl>
</code>
</pre>
<div class="ui-body ui-body-e">
<p><strong>Note on Page IDs in Alpha 2 release (<em>no longer an issue</em>): </strong> In jQuery Mobile Alpha 2 and older, page elements utilized the <code>ID</code> attribute for storing the location from which they came. When you place an <code>ID</code> attribute on a page that is brought into jQuery Mobile's single-page environment through Ajax, jQuery Mobile wraps that page with a new "page" <code>div</code> element, preserving any CSS references to your <code>ID</code>. However, this means that your <code>ID</code> attribute is no longer on the "page" element, so you must keep this in mind when binding to page events (<code>pagebeforecreate</code>, <code>pagecreate</code>, etc). To avoid issues, try using a class if possible. </p>
</div>
<h2>Animation Events</h2>
<p>jQuery Mobile exposes the <code>animationComplete</code> plugin, which you can utilize after adding or removing a class that applies a CSS transition.</p>
</div><!--/content-secondary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li data-theme="a"><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>

View file

@ -1,33 +1,30 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile Docs - Configuring default settings</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Configuring default settings</title>
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="page" class="type-interior">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Configuring Defaults</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<div class="content-primary">
<h2>Working with jQuery Mobile's Auto-initialization</h2>
<p>Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before <code>document.ready</code> event fires). These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure.</p>
<p>Unlike other jQuery projects, such as jQuery and jQuery UI, jQuery Mobile automatically applies many markup enhancements as soon as it loads (long before document.ready event fires). These enhancements are applied based on jQuery Mobile's default configuration, which is designed to work with common scenarios, but may or may not match your particular needs. Fortunately, these settings are easy to configure.</p>
<h3>The mobileinit event</h3>
<p>When the jQuery Mobile starts to execute, it triggers a <code>mobileinit</code> event on the <code>document</code> object, to which you can bind to apply overrides to jQuery Mobile's defaults.</p>
<pre>
<code>
$(document).bind("mobileinit", function(){
@ -35,7 +32,7 @@ $(document).bind("mobileinit", function(){
});
</code>
</pre>
<p>Because the <code>mobileinit</code> event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:</p>
<pre>
@ -44,10 +41,10 @@ $(document).bind("mobileinit", function(){
<strong>&lt;script src=&quot;custom-scripting.js&quot;&gt;&lt;/script&gt;</strong>
&lt;script src=&quot;jquery-mobile.js&quot;&gt;&lt;/script&gt;
</code>
</pre>
</pre>
<p>Within this event binding, you can configure defaults either by extending the <code>$.mobile</code> object using jQuery's <code>$.extend</code> method:</p>
<pre>
<code>
$(document).bind("mobileinit", function(){
@ -57,7 +54,7 @@ $(document).bind("mobileinit", function(){
});
</code>
</pre>
<p>...or by setting them individually:</p>
<pre>
<code>
@ -66,108 +63,59 @@ $(document).bind("mobileinit", function(){
});
</code>
</pre>
<p>To quickly preview these global configuration options in action, check out the <a href="../config/index.html">config test pages</a>.</p>
<h2>Configurable options</h2>
<p>The following defaults are configurable via the <code>$.mobile</code> object:</p>
<dl>
<dt><code>ns</code> <em>string</em>, default: ""</dt>
<dd>The namespace used in data- attributes, for example, data-role. Can be set to anything, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.
<p><strong>NOTE:</strong> if you're using data- namespacing, you'll need to manually update/override one selector in the theme CSS. The following data selectors should incorporate the namespace you're using:
<pre><code>
.ui-mobile [data-<strong>mynamespace-</strong>role=page], .ui-mobile [data-<strong>mynamespace-</strong>role=dialog], .ui-page { ...
</code></pre>
</p>
</dd>
<dt><code>autoInitializePage</code> <em>boolean</em>, default: true</dt>
<dd>When the DOM is ready, the framework should automatically call <code>$.mobile.initializePage</code>. If false, page will not initialize, and will be visually hidden until <code>$.mobile.initializePage</code> is manually called.</dd>
<dt><code>subPageUrlKey</code> <em>string</em>, default: "ui-page"</dt>
<dt>ns (<em>string</em>, default: ""):</dt>
<dd>The namespaced used in data- attributes, for example, data-role. Can be set to anything, including a blank string which is the default. When using, it's clearest if you include a trailing dash, such as "mynamespace-" which maps to <code>data-mynamespace-foo="..."</code>.</dd>
<dt>subPageUrlKey (<em>string</em>, default: "ui-page"):</dt>
<dd>The url parameter used for referencing widget-generated sub-pages (such as those generated by nested listviews). Translates to to <em>example.html<strong>&ui-page=</strong>subpageIdentifier</em>. The hash segment before &ui-page= is used by the framework for making an Ajax request to the URL where the sub-page exists.</dd>
<dt><code>activePageClass</code> <em>string</em>, default: "ui-page-active"</dt>
<dt>nonHistorySelectors (<em>string</em>, default: "dialog"):</dt>
<dd>Anchor links with a data-rel attribute value, or pages with a data-role value, that match these selectors will not be trackable in history (they won't update the location.hash and won't be bookmarkable).</dd>
<dt>activePageClass (<em>string</em>, default: "ui-page-active"):</dt>
<dd>The class assigned to page currently in view, and during transitions</dd>
<dt><code>activeBtnClass</code> <em>string</em>, default: "ui-btn-active"</dt>
<dt>activeBtnClass (<em>string</em>, default: "ui-page-active"):</dt>
<dd>The class used for "active" button state, from CSS framework.</dd>
<dt><code>ajaxEnabled</code> <em>boolean</em>, default: true</dt>
<dt>ajaxEnabled (<em>boolean</em>, default: true):</dt>
<dd>jQuery Mobile will automatically handle link clicks and form submissions through Ajax, when possible. If false, url hash listening will be disabled as well, and urls will load as regular http requests.</dd>
<dt><code>linkBindingEnabled</code> <em>boolean</em>, default: true</dt>
<dd>jQuery Mobile will automatically bind the clicks on anchor tags in your document. Setting this options to false will prevent all anchor click handling <em>including</em> the addition of active button state and alternate link bluring. This should only be used when attempting to delegate the click management to another library or custom code.</dd>
<dt>ajaxLinksEnabled (<strong>deprecated</strong> <em>boolean</em>, default: true):</dt>
<dd>jQuery Mobile will automatically handle link clicks through Ajax, when possible.</dd>
<dt><code>hashListeningEnabled</code> <em>boolean</em>, default: true</dt>
<dt>ajaxFormsEnabled (<strong>deprecated</strong> <em>boolean</em>, default: true):</dt>
<dd>jQuery Mobile will automatically handle form submissions through Ajax, when possible.</dd>
<dt>hashListeningEnabled (<em>boolean</em>, default: true):</dt>
<dd>jQuery Mobile will automatically listen and handle changes to the location.hash. Disabling this will prevent jQuery Mobile from handling hash changes, which allows you to handle them yourself, or simply to use simple deep-links within a document that scroll to a particular ID.</dd>
<dt><code>pushStateEnabled</code> <em>boolean</em>, default: true</dt>
<dd>Enhancement to use <code>history.replaceState</code> in supported browsers, to convert the hash-based Ajax URL into the full document path. Note that we <a href="../pages/page-navmodel.html">recommend</a> disabling this feature if Ajax is disabled or if extensive use of external links are used.</dd>
<dt><code>defaultPageTransition</code> <em>string</em>, default: 'slide'</dt>
<dd>Set the default transition for page changes that use Ajax. Set to 'none' for no transitions by default.</dd>
<dt><code>touchOverflowEnabled</code> <em>boolean</em>, default: false</dt>
<dd>Enable smoother page transitions and true fixed toolbars in devices that support both the <code>overflow:</code> and <code>overflow-scrolling: touch; </code> CSS properties.</dd>
<dt><code>defaultDialogTransition</code> <em>string</em>, default: 'pop'</dt>
<dd>Set the default transition for dialog changes that use Ajax. Set to 'none' for no transitions by default.</dd>
<dt><code>minScrollBack</code> <em>string</em>, default: 250</dt>
<dd>Minimum scroll distance that will be remembered when returning to a page. </dd>
<dt><code>loadingMessage</code> <em>string</em>, default: "loading"</dt>
<dt>defaultTransition (<em>string</em>, default: 'slide'):</dt>
<dd>Set the default transition for page changes that use Ajax. The default transition for dialog presentation is 'pop'. Set to 'none' for no transitions by default.</dd>
<dt>loadingMessage (<em>string</em>, default: "loading"):</dt>
<dd>Set the text that appears when a page is loading. If set to false, the message will not appear at all.</dd>
<dt><code>loadingMessageTheme</code> <em>string</em>, default: "a"</dt>
<dd>Set the theme that the loading message box uses, when text is visible.</dd>
<dt><code>pageLoadErrorMessage</code> <em>string</em>, default: "Error Loading Page"</dt>
<dt>pageLoadErrorMessage (<em>string</em>, default: "Error Loading Page"):</dt>
<dd>Set the text that appears when a page fails to load through Ajax.</dd>
<dt><code>pageLoadErrorMessageTheme</code> <em>string</em>, default: "e"</dt>
<dd>Set the theme that the error message box uses.</dd>
<dt><code>loadingMessageTextVisible</code> <em>string</em>, default: false</dt>
<dd>Should the text be visible when loading message is shown. (note: currently, the text is always visible for loading errors)</dd>
<dt><code>gradeA</code> <em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery</dt>
<dt>gradeA (<em>function that returns a boolean</em>, default: a function returning the value of $.support.mediaquery):</dt>
<dd>Any support conditions that must be met in order to proceed.</dd>
</dl>
</div><!--/content-secondary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li data-theme="a"><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
</html>

View file

@ -1,19 +1,18 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery UI Mobile Framework - API</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-index">
<div data-role="page">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>API</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div>
@ -21,12 +20,12 @@
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<li data-role="list-divider">API</li>
<li><a href="globalconfig.html">Configuring defaults</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="methods.html">Methods &amp; Utilities</a></li>
<li><a href="data-attributes.html">Data attribute reference</a></li>
<li><a href="mediahelpers.html">Responsive Layout</a></li>
<li><a href="themes.html">Theme framework</a></li>
</ul>
@ -34,4 +33,4 @@
</div>
</body>
</html>
</html>

View file

@ -1,36 +1,31 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Responsive Layout Helpers</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="f">
<div data-role="header">
<h1>Responsive Layout Helpers</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content" data-theme="c">
<div class="content-primary">
<h2>Media Query Helper Classes</h2>
<p class="ui-bar-e ui-body"><strong>Note: This feature was deprecated in beta, and removed in 1.0rc1. We recommend using CSS3 Media Queries instead.</strong> To support older versions of Internet Explorer, check out <a href="https://github.com/scottjehl/Respond">respond.js</a>, a fast &amp; lightweight polyfill for min/max-width CSS3 Media Queries.</p>
<p class="ui-bar-e ui-body">If you still need this feature, you can find the code here: <a href="https://raw.github.com/jquery/jquery-mobile/38d7ad8848f00b0921bf4ae723f3ad199eb851c1/js/jquery.mobile.media.classes.js">jquery.mobile.media.classes.js</a></p>
<h2>Media Query Helper Classes</h2>
<p>jQuery Mobile adds classes to the <code>HTML</code> element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> - even in browsers that don't support media queries! </p>
<h3>Orientation Classes </h3>
<p>The HTML element will always have a class of either <code>"portrait"</code> or <code>"landscape"</code>, depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
<h3>Orientation Classes</h3>
<p>The HTML element will always have a class of either "portrait" or "landscape", depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
<pre>
<code>
.portrait {
@ -43,7 +38,7 @@
</pre>
<h3>Min/Max Width Breakpoint Classes</h3>
<p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: <code>"min-width-320px"</code>, <code>"max-width-480px"</code>, and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
<p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: "min-width-320px", "max-width-480px", and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
<pre>
<code>
.myelement {
@ -97,33 +92,8 @@ $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
</code>
</pre>
</div><!--/content-secondary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li data-theme="a"><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li>
<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>

View file

@ -1,78 +1,49 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Docs - Methods</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="f">
<div data-role="header">
<h1>Methods</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div><!-- /header -->
<div data-role="content">
<div class="content-primary">
<p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>
<p>jQuery Mobile exposes several methods and properties on the $.mobile object for use in your applications.</p>
<dl>
<dt><code>$.mobile.changePage</code> (<em>method</em>)</dt>
<dd>Programmatically change from one page to another. This method is used internally for the page loading and transitioning that occurs as a result of clicking a link or submitting a form, when those features are enabled.</dd>
<dd>Programmatically change from one page to another. This method is used internally for transitions that occur as a result of clicking a link or submitting a form, when those features are enabled.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>to</code> (<em>string or object</em>, required)
<ul>
<li>String: Absolute or relative URL. (&quot;about/us.html&quot;)</li>
<li>Object: jQuery collection object. (<code>$("#about")</code>)</li>
</ul>
</dd>
<dd><code>options</code> (<em>object</em>, optional)
<dt>Arguments</dt>
<dd><code>to</code>
<ul>
<li>Properties:
<ul>
<li><code>allowSamePageTransition</code> (<em>boolean</em>, default: false) By default, changePage() ignores requests to change to the current active page. Setting this option to true, allows the request to execute. Developers should note that some of the page transitions assume that the fromPage and toPage of a changePage request are different, so they may not animate as expected. Developers are responsible for either providing a proper transition, or turning it off for this specific case.</li>
<li><code>changeHash</code> (<em>boolean</em>, default: true) Decides if the hash in the location bar should be updated. </li>
<li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request.
<ul>
<li>Used only when the 'to' argument of changePage() is a URL.</li>
</ul>
</li>
<li><code>dataUrl</code> (string, default: undefined) The URL to use when updating the browser location upon changePage completion.
If not specified, the value of the data-url attribute of the page element is used.</li>
<li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page. </li>
<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container.
<ul>
<li>Used only when the 'to' argument of changePage() is a URL.</li>
</ul>
</li>
<li><code>reverse</code> (<em>boolean</em>, default: false) Decides what direction the transition will run when showing the page. </li>
<li><code>showLoadMsg</code> (<em>boolean</em>, default: true) Decides whether or not to show the loading message when loading external pages.</li>
<li><code>role</code> (<em>string</em>, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
<li><code>transition</code> (<em>string</em>, default: $.mobile.defaultPageTransition) The transition to use when showing the page. </li>
<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
<ul>
<li>Used only when the 'to' argument of changePage() is a URL.</li>
</ul>
</li>
</ul>
</li>
</ul>
</dd>
<li>String, url to transition to (<code>"about/us.html"</code>)</li>
<li>jQuery object (<code>$("#about")</code>)</li>
<li>Array specifying two page references [from,to] for transitioning from a known page. From is otherwise assumed to be the current page in view (or $.mobile.activePage ).</li>
<li>Object for sending form data. (<code>{url: url, data: serialized form data, type: "get" or "post"}</code></li>
</ul>
</dd>
<dd><code>transition</code> (<em>string</em>, examples: "pop", "slide"," "none")</dd>
<dd><code>reverse</code> (<em>boolean</em>, default: false). True will cause a reverse-direction transition.</dd>
<dd><code>changeHash</code> (<em>boolean</em>, default: true). Update the hash to the to page's URL when page change is complete.</dd>
</dl>
</dd>
@ -80,20 +51,17 @@
<pre>
<code>
<strong>//transition to the "about us" page with a slideup transition</strong>
$.mobile.changePage( "about/us.html", { transition: "slideup"} );
$.mobile.changePage("about/us.html", "slideup");
<strong>//transition to the "search results" page, using data from a form with an ID of "search"" </strong>
$.mobile.changePage( "searchresults.php", {
type: "post",
$.mobile.changePage({
url: "searchresults.php",
type: "get",
data: $("form#search").serialize()
});
<strong>//transition to the "confirm" page with a "pop" transition without tracking it in history </strong>
$.mobile.changePage( "../alerts/confirm.html", {
transition: "pop",
reverse: false,
changeHash: false
});
$.mobile.changePage("../alerts/confirm.html", "pop", false, false);
</code>
</pre>
@ -101,59 +69,13 @@ $.mobile.changePage( "../alerts/confirm.html", {
</dd>
<dt><code>$.mobile.loadPage</code> (<em>method</em>)</dt>
<dd>Load an external page, enhance its content, and insert it into the DOM. This method is called internally by the changePage() function when its first argument is a URL. This function does not affect the current active page so it can be used to load pages in the background. The function returns a deferred promise object that gets resolved after the page has been enhanced and inserted into the document.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>url</code> (<em>string or object</em>, required) A relative or absolute URL.</dd>
<dd><code>options</code> (<em>object</em>, optional)
<ul>
<li>Properties:
<ul>
<li><code>data</code> (<em>object</em> or string, default: undefined) The data to send with an Ajax page request. </li>
<li><code>loadMsgDelay</code> (<em>number (in ms)</em>, default: 50) Forced delay before the loading message is shown. This is meant to allow time for a page that has already been visited to be fetched from cache without a loading message.</li>
<li><code>pageContainer</code> (jQuery collection, default: $.mobile.pageContainer) Specifies the element that should contain the page after it is loaded. </li>
<li><code>reloadPage</code> (<em>boolean</em>, default: false) Forces a reload of a page, even if it is already in the DOM of the page container. </li>
<li><code>role</code> (<em>string</em>, default: undefined) The data-role value to be used when displaying the page. By default this is undefined which means rely on the value of the @data-role attribute defined on the element.</li>
<li><code>type</code> (<em>string</em>, default: &quot;get&quot;) Specifies the method ("get" or "post") to use when making a page request.
</li>
</ul>
</li>
</ul>
</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>//load the "about us" page into the DOM</strong>
$.mobile.loadPage( "about/us.html" );
<strong>//load a "search results" page, using data from a form with an ID of "search"" </strong>
$.mobile.loadPage( "searchresults.php", {
type: "post",
data: $("form#search").serialize()
});
</code>
</pre>
</dd>
<dt><code>jqmData(), jqmRemoveData()</code> (<em>method</em>)</dt>
<dt><code>jqmData(), jqmRemoveData(), and jqmHasData()</code> (<em>method</em>)</dt>
<dd>When working with jQuery Mobile, <code>jqmData</code> and <code>jqmRemoveData</code> should be used in place of jQuery core's <code>data</code> and <code>removeData</code> methods (note that this includes $.fn.data, $.fn.removeData, and the $.data, $.removeData, and $.hasData utilities), as they automatically incorporate getting and setting of namespaced data attributes (even if no namespace is currently in use).</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments:</dt>
<dt>Arguments:</dt>
<dd>See jQuery's <a href="http://api.jquery.com/jQuery.data/">data</a> and <a href="http://api.jquery.com/jQuery.removeData/">removeData</a> methods</dd>
<strong>Note: </strong>Calling jqmData() with no argument will return <code>undefined</code>. This behavior is subject to change in future versions.
<dt><code>&#183;</code> Also:</dt>
<dt>Also:</dt>
<dd>When finding elements by their jQuery Mobile data attribute, please use the custom selector <code>:jqmData()</code>, as it automatically incorporates namespaced data attributes into the lookup when they are in use. For example, instead of calling <code>$("div[data-role='page']")</code>, you should use <code>$("div:jqmData(role='page')")</code>, which internally maps to <code>$("div[data-"+ $.mobile.ns +"role='page']")</code> without forcing you to concatenate a namespace into your selectors manually.</dd>
</dl>
</dd>
@ -161,343 +83,32 @@ $.mobile.loadPage( "searchresults.php", {
<dt><code>$.mobile.showPageLoadingMsg</code> (<em></em>)</dt>
<dd>Show the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dt><code>$.mobile.pageLoading</code> (<em>method</em>)</dt>
<dd>Show or hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dd>
<dl>
<dt>Arguments:</dt>
<dd><code>Done</code> (<em>boolean</em>, defaults to false, meaning loading has started). True will hide the loading message.</dd>
</dl>
</dd>
<dd>Example:
<dd>Examples:
<pre>
<code>
<strong>//cue the page loader</strong>
$.mobile.showPageLoadingMsg();
</code>
</pre>
</dd>
$.mobile.pageLoading();
<dt><code>$.mobile.hidePageLoadingMsg</code> (<em></em>)</dt>
<dd>Hide the page loading message, which is configurable via $.mobile.loadingMessage.</dd>
<dd>Example:
<pre>
<code>
<strong>//cue the page loader</strong>
$.mobile.hidePageLoadingMsg();
<strong>//hide the page loader</strong>
$.mobile.pageLoading( true );
</code>
</pre>
</dd>
<dt><code>$.mobile.fixedToolbars.show</code> (<em>method</em>)</dt>
<dd>Utility method for displaying the fixed header and/or footer of the current active page within the viewport. Note that fixed headers/footers are never really hidden. Toggling the show/hide state of a toolbar is really toggling whether or not they are inline within the page content, or displayed within the viewport as if they were fixed.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>immediately</code> (<em>boolean</em>, optional) If true, any fixed header or footer for the current active page is displayed immediately within the viewport. If false or unspecified, the fixed header/footer will fade-in after a 100 millisecond delay. Note that other events such as a document resize or scroll event can result in an additional delay before the start of the header/footer display animation.</dd>
</dl>
</dd>
<dd>Example:
<pre>
<code>
<strong>// Show fixed header/footer with a fade animation.</strong>
$.mobile.fixedToolbars.show();
<strong>// Show fixed header/footer immediately.</strong>
$.mobile.fixedToolbars.show(true);
</code>
</pre>
</dd>
<dt><code>$.mobile.fixedToolbars.hide</code> (<em>method</em>)</dt>
<dd>Utility method for hiding the fixed header and/or footer of the current active page.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>immediately</code> (<em>boolean</em>, optional) If true, any fixed header or footer for the current active page is immediately placed inline (back in flow) with the page content, which means it will scroll along with the content and will only be visible when viewing the top or bottom of the page within the viewport. If false or unspecified, the fixed header/footer will fade-out after a 100 millisecond delay. Note that other events such as a document resize or scroll event can result in the header/footer being immediately hidden.</dd>
</dl>
</dd>
<dd>Example:
<pre>
<code>
<strong>// Hide fixed header/footer with a fade animation.</strong>
$.mobile.fixedToolbars.hide();
<strong>// Hide fixed header/footer immediately.</strong>
$.mobile.fixedToolbars.hide(true);
</code>
</pre>
<dt><code>$.mobile.path</code> (<em>methods, properties</em>)</dt>
<dd>Utilities for getting, setting, and manipulating url paths. TODO: document as public API is finalized.</dd>
</dd>
<dt><code>$.mobile.path.parseUrl</code> (<em>method</em>)</dt>
<dd>Utility method for parsing a URL and its relative variants into an object that makes accessing the components of the URL easy. When parsing relative variants, the resulting object will contain empty string values for missing components (like protocol, host, etc). Also, when parsing URLs that have no authority, such as tel: urls, the pathname property of the object will contain the data after the protocol/scheme colon.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
<dt><code>&#183;</code> Return Value</dt>
<dd>
<p>This function returns an object that contains the various components of the URL as strings. The properties on the object mimic the browser's location object:</p>
<dl>
<dt><code>hash</code></dt>
<dd>The fragment conponent of the URL, including the leading '#' character.</dd>
<dt><code>host</code></dt>
<dd>The host and port number of the URL.</dd>
<dt><code>hostname</code></dt>
<dd>The name of the host within the URL.</dd>
<dt><code>href</code></dt>
<dd>The original URL that was parsed.</dd>
<dt><code>pathname</code></dt>
<dd>The path of the file or directory referenced by the URL.</dd>
<dt><code>port</code></dt>
<dd>The port specified within the URL. Most URLs rely on the default port for the protocol used, so this may be an empty string most of the time.</dd>
<dt><code>protocol</code></dt>
<dd>The protocol for the URL including the trailing ':' character.</dd>
<dt><code>search</code></dt>
<dd>The query component of the URL including the leading '?' character.</dd>
</dl>
<p>But it also contains additional properties that provide access to additional components as well as some common forms of the URL developers access:</p>
<dl>
<dt><code>authority</code></dt>
<dd>The username, password, and host components of the URL</dd>
<dt><code>directory</code></dt>
<dd>The directory component of the pathname, minus any filename.</dd>
<dt><code>domain</code></dt>
<dd>The protocol and authority components of the URL.</dd>
<dt><code>filename</code></dt>
<dd>The filename within the pathname component, minus the directory.</dd>
<dt><code>hrefNoHash</code></dt>
<dd>The original URL minus the fragment (hash) components.</dd>
<dt><code>hrefNoSearch</code></dt>
<dd>The original URL minus the query (search) and fragment (hash) components.</dd>
<dt><code>password</code></dt>
<dd>The password contained within the authority component.</dd>
<dt><code>username</code></dt>
<dd>The username contained within the authority component.</dd>
</dl>
</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>// Parsing the Url below results an object that is returned with the
// following properties:
//
// obj.href: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread#msg-content
// obj.hrefNoHash: http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234&amp;type=unread
// obj.hrefNoSearch: http://jblas:password@mycompany.com:8080/mail/inbox
// obj.domain: http://jblas:password@mycompany.com:8080
// obj.protocol: http:
// obj.authority: jblas:password@mycompany.com:8080
// obj.username: jblas
// obj.password: password
// obj.host: mycompany.com:8080
// obj.hostname: mycompany.com
// obj.port: 8080
// obj.pathname: /mail/inbox
// obj.directory: /mail/
// obj.filename: inbox
// obj.search: ?msg=1234&amp;type=unread
// obj.hash: #msg-content</strong>
var obj = $.mobile.path.parseUrl("http://jblas:password@mycompany.com:8080/mail/inbox?msg=1234");
</code>
</pre>
</dd>
<dt><code>$.mobile.path.makePathAbsolute</code> (<em>method</em>)</dt>
<dd>Utility method for converting a relative file or directory path into an absolute path.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>relPath</code> (<em>string</em>, required) A relative file or directory path.</dd>
<dd><code>absPath</code> (<em>string</em>, required) An absolute file or relative path to resolve against.</dd>
<dt><code>&#183;</code> Return Value</dt>
<dd>This function returns a string that is an absolute version of the relative path passed in.</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>// Returns: /a/b/c/file.html</strong>
var absPath = $.mobile.path.makePathAbsolute("file.html", "/a/b/c/bar.html");
<strong>// Returns: /a/foo/file.html</strong>
var absPath = $.mobile.path.makePathAbsolute("../../foo/file.html", "/a/b/c/bar.html");
</code>
</pre>
</dd>
<dt><code>$.mobile.path.makeUrlAbsolute</code> (<em>method</em>)</dt>
<dd>Utility method for converting a relative URL to an absolute URL.</dd>
<dd>
<dl>
<dt>Arguments</dt>
<dd><code>relUrl</code> (<em>string</em>, required) A relative URL.</dd>
<dd><code>absUrl</code> (<em>string</em>, required) An absolute URL to resolve against.</dd>
<dt>Return Value</dt>
<dd>This function returns a string that is an absolute version of the relative URL passed in.</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>// Returns: http://foo.com/a/b/c/file.html</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("file.html", "http://foo.com/a/b/c/test.html");
<strong>// Returns: http://foo.com/a/foo/file.html</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("../../foo/file.html", "http://foo.com/a/b/c/test.html");
<strong>// Returns: http://foo.com/bar/file.html</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("//foo.com/bar/file.html", "http://foo.com/a/b/c/test.html");
<strong>// Returns: http://foo.com/a/b/c/test.html?a=1&amp;b=2</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("?a=1&amp;b=2", "http://foo.com/a/b/c/test.html");
<strong>// Returns: http://foo.com/a/b/c/test.html#bar</strong>
var absUrl = $.mobile.path.makeUrlAbsolute("#bar", "http://foo.com/a/b/c/test.html");
</code>
</pre>
</dd>
<dt><code>$.mobile.path.isSameDomain</code> (<em>method</em>)</dt>
<dd>Utility method for comparing the domain of 2 URLs.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>url1</code> (<em>string</em>, required) A relative URL.</dd>
<dd><code>url2</code> (<em>string</em>, required) An absolute URL to resolve against.</dd>
<dt>Return Value</dt>
<dd>This function returns a boolean true if the domains match, false if they don't.</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>// Returns: true</strong>
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
<strong>// Returns: false</strong>
var same = $.mobile.path.isSameDomain("file://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
<strong>// Returns: false</strong>
var same = $.mobile.path.isSameDomain("https://foo.com/a/file.html", "http://foo.com/a/b/c/test.html");
<strong>// Returns: false</strong>
var same = $.mobile.path.isSameDomain("http://foo.com/a/file.html", "http://bar.com/a/b/c/test.html");
</code>
</pre>
</dd>
<dt><code>$.mobile.path.isRelativeUrl</code> (<em>method</em>)</dt>
<dd>Utility method for determining if a URL is a relative variant.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
<dt><code>&#183;</code> Return Value</dt>
<dd>This function returns a boolean true if the URL is relative, false if it is absolute.</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>// Returns: false</strong>
var isRel = $.mobile.path.isRelativeUrl("http://foo.com/a/file.html");
<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("//foo.com/a/file.html");
<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("/a/file.html");
<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("file.html");
<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("?a=1&amp;b=2");
<strong>// Returns: true</strong>
var isRel = $.mobile.path.isRelativeUrl("#foo");
</code>
</pre>
</dd>
<dt><code>$.mobile.path.isAbsoluteUrl</code> (<em>method</em>)</dt>
<dd>Utility method for determining if a URL is absolute.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments</dt>
<dd><code>url</code> (<em>string</em>, required) A relative or absolute URL.</dd>
<dt><code>&#183;</code> Return Value</dt>
<dd>This function returns a boolean true if the URL is absolute, false if not.</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>// Returns: true</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("http://foo.com/a/file.html");
<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("//foo.com/a/file.html");
<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("/a/file.html");
<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("file.html");
<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("?a=1&amp;b=2");
<strong>// Returns: false</strong>
var isAbs = $.mobile.path.isAbsoluteUrl("#foo");
</code>
</pre>
</dd>
<dt><code>$.mobile.base</code> (<em>methods, properties</em>)</dt>
<dd>Utilities for working with generated base element. TODO: document as public API is finalized.</dd>
@ -507,7 +118,7 @@ var isAbs = $.mobile.path.isAbsoluteUrl("#foo");
<dd>Scroll to a particular Y position without triggering scroll event listeners.</dd>
<dd>
<dl>
<dt><code>&#183;</code> Arguments:</dt>
<dt>Arguments:</dt>
<dd><code>yPos</code> (<em>number</em>, defaults to 0). Pass any number to scroll to that Y location.</dd>
</dl>
</dd>
@ -522,7 +133,27 @@ $.mobile.silentScroll(100);
</dd>
<dt><code>$.mobile.addResolutionBreakpoints</code> (<em>method</em>)</dt>
<dd>Add width breakpoints to the min/max width classes that are added to the HTML element.</dd>
<dd>
<dl>
<dt>Arguments:</dt>
<dd><code>values</code> (<em>number or array</em>). Pass any number or array of numbers to add to the resolution classes. Read more about this feature here: <a href="mediahelpers.html">Orientation &amp; resolution targeting</a>.</dd>
</dl>
</dd>
<dd>Examples:
<pre>
<code>
<strong>//add a 400px breakpoint</strong>
$.mobile.addResolutionBreakpoints(400);
<strong>//add 2 more breakpoints</strong>
$.mobile.addResolutionBreakpoints([600,800]);
</code>
</pre>
</dd>
@ -533,31 +164,7 @@ $.mobile.silentScroll(100);
</dl>
</div><!--/content-secondary -->
<div class="content-secondary">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li data-theme="a"><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /content -->
</div><!-- /page -->

View file

@ -1,27 +1,25 @@
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<title>jQuery Mobile Framework - Static Containers, States</title>
<link rel="stylesheet" href="../../css/themes/default/jquery.mobile.css" />
<link rel="stylesheet" href="../../themes/default/" />
<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
<script data-main="../../js/jquery.mobile.docs" src="../../external/requirejs/require.js"></script>
<script src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/"></script>
</head>
<body>
<div data-role="page" class="type-interior">
<div data-role="page">
<div data-role="header" data-theme="f">
<div data-role="header" data-theme="b">
<h1>Themes</h1>
<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
</div>
<div data-role="content">
<div class="content-primary">
<h2>Theming overview</h2>
<p>Every layout and widget in jQuery Mobile is designed around a new object-oriented CSS framework that makes it possible to apply a complete unified visual design Theme to sites and applications. The theming system is similar to the ThemeRoller system in jQuery UI, but adds a few important improvements:</p>
@ -34,9 +32,6 @@
<li>A <strong>simplified icon set</strong> including those most commonly used for mobile, in a sprite to reduce image weight</li>
</ul>
<h2>ThemeRoller</h2>
<a href="http://www.jquerymobile.com/themeroller" rel="external"><img src="../_assets/images/themroller-mobile-logo.png" width="250" style="float:right; margin-left:25px;" alt="Themroller Mobile Logo"></a>
The easiest way to create custom themes is with the <a href="http://www.jquerymobile.com/themeroller" rel="external">ThemeRoller tool</a>. It allows you to build a theme, then download a custom CSS file, ready to be dropped into your project.
<h2>Themes &amp; swatches</h2>
@ -53,11 +48,11 @@
<p>The default theme contains the following five Bar styles:</p>
<div class="swatch-preview">
<div class="ui-bar ui-bar-a">Bar A - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-b">Bar B - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-c">Bar C - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-d">Bar D - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-e">Bar E - <a href="#" data-role="none" class="ui-link">Link</a></div>
<div class="ui-bar ui-bar-a">Bar A</div>
<div class="ui-bar ui-bar-b">Bar B</div>
<div class="ui-bar ui-bar-c">Bar C</div>
<div class="ui-bar ui-bar-d">Bar D</div>
<div class="ui-bar ui-bar-e">Bar E</div>
</div><!-- end swatch-bars -->
<p>By default, the framework assigns the "a" swatch to all headers and footers, because these are typically given high visual priority in an application. To set the color of a bar to a different swatch color, simply add the <code> data-theme</code> attribute to your header or footer and specify an alternate swatch letter ('b' or 'd', for example) and the specified theme swatch color will be applied. Learn more about <a href="../toolbars/bars-themes.html">toolbar theming</a>.</p>
@ -68,17 +63,17 @@
<p>The default theme also includes color swatch values for use in content blocks, designed to coordinate with the header color swatches in the theme. </p>
<div class="swatch-preview">
<div class="ui-body ui-body-a">Block A - <a href="#">Link</a></div>
<div class="ui-body ui-body-b">Block B - <a href="#">Link</a></div>
<div class="ui-body ui-body-c">Block C - <a href="#">Link</a></div>
<div class="ui-body ui-body-d">Block D - <a href="#">Link</a></div>
<div class="ui-body ui-body-e">Block E - <a href="#">Link</a></div>
<div class="ui-body ui-body-a">Block A</div>
<div class="ui-body ui-body-b">Block B</div>
<div class="ui-body ui-body-c">Block C</div>
<div class="ui-body ui-body-d">Block D</div>
<div class="ui-body ui-body-e">Block E</div>
</div><!-- end swatch-bars -->
<p>If a theme isn't specified on a content block, the framework will default to "c" to maximize contrast against the default header "a", as shown here:</p>
<div data-role="header">
<div data-role="header" data-position="inline">
<a href="#" data-icon="arrow-l">Back</a>
<h1>Default Header</h1>
</div>
@ -102,7 +97,6 @@
</div><!-- /controlgroup -->
</div>
<p>Learn more about <a href="../content/content-themes.html">content theming</a>.</p>
@ -160,7 +154,7 @@
<p>If you want to add visual emphasis to a button and help it stand out visually from its parent toolbar, an alternate swatch color can be set by adding a <code> data-theme="a"</code> to the anchor. Once an alternate swatch color is set on a button in the markup, the framework won't override that color if the parent theme is changed, because you made a conscious decision to set it.</p>
<div class="swatch-bars">
<div data-role="header" data-theme="a" class="ui-bar" >
<div data-role="header" data-theme="a" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -169,7 +163,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="b" class="ui-bar" >
<div data-role="header" data-theme="b" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -178,7 +172,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="c" class="ui-bar" >
<div data-role="header" data-theme="c" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -187,7 +181,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="d" class="ui-bar" >
<div data-role="header" data-theme="d" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -196,7 +190,7 @@
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="e">E</a>
</div>
</div>
<div data-role="header" data-theme="e" class="ui-bar" >
<div data-role="header" data-theme="e" class="ui-bar" data-backbtn="false">
<div><!-- wrapper div to have control over butttons -->
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="a">A</a>
<a href="index.html" data-role="button" data-icon="arrow-l" data-theme="b">B</a>
@ -225,27 +219,9 @@
<h3>Icons</h3>
<p>There a core set of <a href="../buttons/buttons-icons.html">standard icons</a> included in the framework that can be assigned to any button. To minimize the download size of the core icons, jQuery Mobile only includes these icons in white and automatically adds a semi-transparent black circle behind the icon to make sure it has good contrast on all background colors.</p>
<h3>Theme classes</h3>
<p>Assigning color swatches through the <code> data-theme</code> attribute is one way to leverage the theme system, but it's also possible to apply any of the theme swatches directly to your markup through classes to apply the colors, textures and font formatting of your theme to any markup. This is especially useful when creating your own custom layout elements or UI widgets. Here are a few common theme classes, but many more are available in the theme stylesheet:</p>
<dl>
<dt><code>ui-bar-(a-z)</code></dt>
<dd>Applies the toolbar theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-bar</code> structural class to add the standard bar padding styles.</dd>
<dt><code>ui-body-(a-z)</code></dt>
<dd>Applies the content body theme styles for the selected swatch letter. Commonly used in conjunction with <code>ui-body</code> structural class to add the standard content block padding styles. </dd>
<dt><code>ui-btn-up-(a-z)</code></dt>
<dd>Applies the button/clickable element theme styles for the selected swatch letter. Commonly used in with the <code>ui-btn-hover-(a-z)</code> and <code>ui-btn-down-(a-z)</code> interaction class states to provide visual feedback and <code>ui-btn-active</code> to indicate the selected or "on" state.</dd>
<dt><code>ui-corner-all</code></dt>
<dd>Applies the theme's global border-radius for rounded corners and is used for container or grouped items in the framework (inset lists, radiobutton sets). There are additional classes for all the possible combinations of rounded corners, for example: <code>ui-corner-tl</code> (top left only), <code>-top</code> (both top corners), <code>-left</code> (both left corners), etc. A second full set of corner classes is provided for buttons so these can have a different corner radius. These use classes with a similar naming convention, but with "btn-corner" instead of "corner", like this: <code>.ui-<strong>btn-corner</strong>-all</code>.</dd>
<dt><code>ui-shadow</code></dt>
<dd>Applies the theme's global drop shadow to any element using CSS <code>box-shadow</code> property. </dd>
<dt><code>ui-disabled</code></dt>
<dd>Applies the disabled look and feel which essentially reduces the opacity of any element with this class to 30%, hides the cursor, and sets <code>pointer-events: none;</code> which prevents any interaction in many modern browsers.</dd>
</dl>
<h3>Overriding themes</h3>
<p>The themes are meant as a solid starting point, but are meant to be customized to add the custom design elements that make your site or app unique. Since everything is controlled by CSS, it's easy to use a web inspector tool to identify the style properties you want to modify. The set of of theme classes (global) and semantic structural classes (widget-specific) added to elements provide a rich set of possible selectors to target style overrides against. We recommend adding an external stylesheet to the <code>head</code>, placed <strong>after</strong> the structure and theme stylesheet references, that contain all your style overrides. This allows you to easily update to newer versions of the library because overrides are kept separate from the library code.</p>
<p><strong>Learn more</strong> about theming individual components:</p>
<ul data-role="listview" data-inset="true">
<li><a href="../pages/pages-themes.html">Page theming</a></li>
@ -255,34 +231,9 @@
<li><a href="../forms/forms-themes.html">Form theming</a></li>
<li><a href="../lists/lists-themes.html">List theming</a></li>
</ul>
</div><!--/content-secondary -->
</div><!-- end content -->
<div class="content-secondary ui-body-d">
<div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
<h3>More in this section</h3>
<ul data-role="listview" data-theme="c" data-dividertheme="d">
<li data-role="list-divider">API</li>
<li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
<li><a href="../../docs/api/events.html">Events</a></li>
<li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
<li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
<li data-theme="a"><a href="../../docs/api/themes.html">Theme framework</a></li>
</ul>
</div>
</div>
</div><!-- /content -->
<div data-role="footer" class="footer-docs" data-theme="c">
<p>&copy; 2011 The jQuery Project</p>
</div>
</div><!-- /page -->
</div><!-- end page -->
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more